|
JavaScript - Comment System - On A Concatenation
I have concatenated list of posts, whereby a user can comment on each one (and the comment gets a live update via jquery). I decided that since I'm using a unique variable for each post, I could just tack that onto the end of the id of the update div, and also tack it onto the end of the class of the submit button, like so:
PHP Code: $my_list .= ' <form action="#" method="post"> <textarea class="commentbox" name="comment" id="comment"></textarea> <input type="hidden" name="post_id" id="post_id" value=' . $post_id . ' /> <input type="hidden" name="member_id" id="member_id" value=' . $id . ' /> <input type="submit" class="submit' . $post_id . '" value="Comment " /> </form> ' . $comment_list . ' // existing comments queried from the db <ol id="update' . $post_id . '"></ol> // jquery-ed live update comments '; ?> Everything with respect to the above looks fine (i.e. each submit button gets a unique class and each update div gets a unique id). So the problem I'm running into now is: how do I get my js function to recognize each of the unique "submits"? This is what I have now (below). But whenever I click on a submit button next to a post, nothing happens, my page just reloads and a "#" gets added to the end of the url. I checked my live http headers, and it looks like the comment is getting posted along with the correct unique $post_id... but I believe it's stopping at the js function. Code: <head>
<script type="text/javascript">
$(function() {
$(".submit<?php echo $post_id; ?>").click(function() {
var post_id = $("#post_id").val(); // this is the unique id for each story, in a hidden input
var member_id = $("#member_id").val(); // this is a member for the commenter, in a hidden input
var comment = $("#comment").val(); // this is the comment from the input box
var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;
if(comment=='') {
alert('Please enter a valid comment');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("#update<?php echo $post_id; ?>").append(html);
$("#update<?php echo $post_id; ?> li:last").fadeIn("slow");
document.getElementById('post_id').value='';
document.getElementById('member_id').value='';
document.getElementById('comment').value='';
$("#comment").focus();
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
Similar TutorialsI'm pretty new to Javascript programming. I have this function I created that is basically pretty simple. It does edit checks, however, at the end of my script, I display an error message using an alert statement and at the end of the first sentence, the word "undefined" shows up before the line break. The only thing I can think of that is causing it is the "+" sign. Here is my code below: Code: function CheckEdits() {
var msg;
ok = true;
if (document.getElementById("txtName").value == '') {
msg = msg + '\nName';
ok = false;
}
if (document.getElementById("txtOrganization").value == '') {
msg = msg + '\nOrganization';
ok = false;
}
if (document.getElementById("txtSubject").value == '') {
msg = msg + '\nSubject';
ok = false;
}
if (document.getElementById("txtNote").value == '') {
msg = msg + '\nNote';
ok = false;
}
if (msg != '') {
var msg2;
msg2 = "Please provide the following:\n" + msg;
alert(msg2);
}
}
What am I doing wrong? Thanks! New to javascript and not familiar with the variable concatenation or for/next loop procedures. The following code works, but I am adding 50 more division id's numbered 'c3' to 'c52' and need to know how to simplify this function. Thanks for your help! Code: <script type="text/javascript"> <!--
function collapseAll()
{
var el = document.getElementById('c1');
if ( el.style.display = 'none' ) {el.style.display != "none";}
else {el.style.display = '';}
var el = document.getElementById('c2');
if ( el.style.display = 'none' ) {el.style.display != "none";}
else {el.style.display = '';}
}
</script>
Code: var purchasePrice = window.prompt("Please enter the purchase price:", 0);
function calculateTotalCost () {
if (purchasePrice <= 25) {
purchasePrice = purchasePrice + 1.50;
}
else {
purchasePrice = purchasePrice + (purchasePrice * 0.10);
}
window.alert("Your total price is $ " + purchasePrice);
}
I am still getting the same error, concatenation instead of addition, i can't figure out why. (i.e input 50, result 505 instead of 55.) what's the fastest or easiest way to get all comment nodes into an Array? the solution only needs to work in ie8/w3 if that helps. Hi, I'm mainly a PHP/HTML coder, but now I saw an excellent opportunity to use some Javascript. On my social network I'm adding the option to comment on statuses. What I need help with is how to this: I want it to be a text that says "Comment on status", when the user clicks this text I want the comment form to drop down under there and the "comment on status" link to disappear. Please help me with this, thank you in advance. Hi I am creating a help page on my website and I am putting a form on there in case users wish to leave any feedback/suggestions. Now, I am using JavaScript to try and solve this. What I want is a form box, which when the submit button is clicked, it creates a new div box underneath the form (or existing comment div) and updates the site this way. At first I would like to just get the functionality of the div being created and updated, then I will imrpove/add my form inputs etc. Here is what code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>template</title>
<meta name="description" content="Brief description of the page" />
<meta name="author" content="Thomas S. P. Vasey" />
<style type="text/css">
label {width: 7em;
float: left;
text-align: right;
margin-right: 1em;
margin-left: 1em;
display: block;
text-decoration: underline;
font-family: century gothic;
font-size: 10pt;
font-weight: bold;}
fieldset {background-color: gray;
width: 50%;
color: #f7852c;
display: inline;
border: 0pt;}
legend {color: black;
border: 1px solid #000000;
font-size: 14pt;
padding-left: 1em;
padding-right: 1em;}
textarea {border: 1pt solid black;
background-color: #f7852c;}
input {border: 1pt solid black;}
input[type="text"] {background-color: #f7852c;}
input[type="button"] {background-color: #f7852c;
font-family: century gothic;
border: 2px solid black;
padding: 0.5%;
margin: 2%;}
input[type="reset"] {background-color: #f7852c;
font-family: century gothic;
padding: 0.5%;
border: 2px solid black;
margin: 2%;}
input:focus {background-color: #80b7ff;}
textarea:focus {background-color: #80b7ff;}
</style>
<script type="text/javascript">
function printOut() {
var alias = document.form1.username.value;
var comment = document.form1.comments.value;
document.write('<div class="output">' + alias + '</div>');
document.write('<div class="output">' + comment + '</div>');
}
</script>
</head>
<body>
<form action="" name="form1" method="">
<fieldset>
<legend>[A!B]Attitude Brothaz Feedback</legend>
<p>
<label for="username">Name/Alias:</label>
<input type="text" name="username" maxlength="25" size="20" />
</p>
<p>
<label for="comments">Comments:</label>
<textarea name="comments" rows="5" cols="40"></textarea>
</p>
<input type="button" value="Submit Post" onclick="printOut()" />
<input type="reset" value="Reset Form" />
</fieldset>
</form>
</body>
</html>
I hope someone can help me achieve this, I believe I am going in the right direction with it, just need some guidance. Thank you for your time, Regards, LC. Hi, I'm trying to make a comment field that only appears once you've clicked the "Add comment link". I'd like it to replace the add comment link. I assume this is an onclick event of some sort, but I'm not sure quite how to go about doing it. Help would be highly appreciated. I came across some embedded JavaScript code and I noticed some weird “HTML comment-like tags” within embedded JavaScript that are getting rendered in FireFox but not IE. Specifically the closing tag "//-->" And the JavaScript code between these tags is functional (not commented out)! Code: <SCRIPT type=text/javascript> <!-- .... //--> </SCRIPT> What are these? Example usage: Code: <SCRIPT type=text/javascript>
<!--
var zz, zv, d, fTSR;
d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;
var gBF=false;
function GoTo(u){window.top.location = u + zz;}
function Go(u){window.top.location = u;}
....
//-->
</SCRIPT>
I am trying to create a comments posting feature in my site using javascript However everytime i click on submit it shows the comment posted for a second and then the comment dissapears. It does not retain the comment posted. Please help. code is given below: Code:
<html>
<head>
<script type="text/javascript">
function post(){
document.getElementById("label").innerHTML=document.hello.posted.value;
}
</script>
</head>
<body>
<form name="hello">
<div id="label"> </div>
<textarea name="posted"> </textarea>
<input type="submit" value="Submit" onclick="post()">
</form>
</body>
</html>
Why does a comment tag hide the havascript if the browser does not support javascript? I thought comment tags were for comments not to hide things...
Hello, I have not been able to do any JS because my damn books have been on order for the last 3 weeks but I'm wondering if anybody could help me put a script into my webpage so that when anybody visits the 'contact us' page they can leave comments. Here's my code: HTML: Code: <!DOCTYPE html "PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="css/contactus.css" />
</head>
<body bgcolor="grey">
<img src="gradientheader.jpg" id="header" width="930px;" height="120px;" align="center" border="1" />
<div class="gradientbuttons blacktheme">
<ul>
<li><a href="headerwithbuttons.html">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">Games</a></li>
<li><a href="http://www.dynamicdrive.com/style/">Music</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Contact Us</a></li>
<li><a href="http://www.codingforums.com/">Links</a></li>
</ul>
</div>
</br>
<div>
<img src="contactus.jpg" id="contactusright" alt="contact1" height="120px;" />
</div>
<div>
<img src="contactus.jpg" id="contactusleft" alt="contact2" height="120px;" />
</div>
<div class="infoarea1" height="300">
<img src="tel2.jpg" width="250" height="100px;" />
<p class="infoarea1">Please contact us on either our Fax line or Business line on:</p>
<br />
<p><i>Telephone: <b>012....</b></i>;</p>
<p><i>Fax: <b>012.....6</b></i></p>
</div>
<div class="infoarea2" height="300">
<img src="emailicon.jpg" width="250" height="100px;" />
<p class="infoarea2">Please contact us by e-mail to the following e-mail address:</p>
<br />
<p><i>E-Mail: <b>flipmode...........co.uk</b></i></p>
</div>
<div class="infoarea3" height="300">
<img src="postboxicon.jpg" width="250" height="100px;" />
<p class="infoarea3">Please contact us by post by sending all relevant post to:</p>
<br />
<p><i>..........</p>
<p>............</p>
<p>.......</p>
<p>.......</i></p>
</div>
</body>
</html>
CSS: Code: #header {border-style: solid;
border-width: 2px;
border-color: black;
}
.gradientbuttons {position:absolute; top:95px; left:149px; }
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.gradientbuttons li{
display: inline;
margin: 0;
}
.gradientbuttons li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 50px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.gradientbuttons li a:hover{
color: red;
}
.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}
#contactusright {position: absolute; top:8px; left:895px;}
#contactusright {border: 2px solid #8dcb41;
width: 100px;}
#contactusleft {position: absolute; top:8px; left:8px;}
#contactusleft {border: 2px solid #8dcb41;
width: 100px;}
div.infoarea1 {float: left;}
div.infoarea1 {width: 250px;
background-color: green;
margin-top: 20px;}
p {padding: 1;
margin: 5;}
p {font-family: franklin gothic;
color: black;
}
div.infoarea2 {float: left;}
div.infoarea2 {width: 250px;
background-color: red;
margin-top: 20px;
margin-left: 130px;}
div.infoarea3 {float: right;}
div.infoarea3 {width: 250px;
background-color: blue;
margin-top: 20px;
margin-right: 0px;
}
BTW - I know this doesn't validate but it's only a draft site until I get my books. Thanks for any info! Here's the page, I want the comment underneath all three div's. Hello I'm not sure if I post this message on the right section or not...Actually what iam having difficulty at is I put a facebook plugin commentbox on my page. here is the link for my site http://www.mxstudio.ca/comments.html what my qestion is I can't delit other people message from this page. So if someone post badwords to my site is there anything I can remove his or her comments from this comment section. Any answer greatly precaite thanks... Hello I'm not sure if I post this message on the right section or not...Actually what iam having difficulty at is I put a facebook plugin commentbox on my page. here is the link for my site http://www.mxstudio.ca/comments.html what my qestion is I can't delit other people message from this page. So if someone post badwords to my site is there anything I can remove his or her comments from this comment section. Any answer greatly precaite thanks... Hi. So, I have this loop I run to retrieve wallposts with php. Within this loop, I want a link/button on every post that says "comment". When the user clicks the comment link I want a comment field and post button to appear on the post I clicked on. The problem is that when I've tried making a link that does this, it only drops down the comment field on the most recent wallpost regardless of which wallpost I click on. I'd appreciate some help, a lot! Is it just considered proper format to always have comment tags in javascript code such as */ and /* and // etc? thanks Hi I normally use Firefox as my web browser. After adding the comment script to my site I have now found out that the script isn't working with Explorer 8. Clicking on the 'Send Comment' button when using Explorer 8 doesn't work, yet it works fine with Firefox. Hopefully then there can't be too much wrong. You can see the script and test it he http://creatingwebsites-4u.co.uk/com...st/example.php Regards Mark Hello Is there any Rating System based on java or ajax for free.. hi guys im new here. i need some help at a battle system java script im working at a wbmmorpg game and im stuck at the battle system i dont know how to make that script i tryed some methods but all were wrong. i want the battle script to calculate the following procedu attack vs deffense inteligence vs intelligence agillity vs agillity those attributes are taken from MySQL database. can you please explain or make the script for that combination or at least for one. i appreciate it thanks Hi all. I'm coding a javascript game, and need to know how I can take this heart image, split it up frame by frame, and make it display 20 full hearts. then if i click the mouse, it will remove the top-right of the heart, followed by the bottom right, followed by the bottom left, followed by the top left of the heart. when it removes a part of the heart, it instead displays part of the "empty" frame of the heart. code: Code: <script>
//2d rpg
var max = 20;
var img = "hearts.png";
hearts(max);
function hearts(max){
for(var i = 0; i<=max-1;i++){
document.write('\<img src\=\''+img+'\'\>\<\/img\>');
}
}
</script>
ANY help is GREATLY appreciated! Hello there I am creating a website for a friend where the user cant can choose what jobs they want to do while a event. There a are more than 300 people involved so i found a script that worked fine but it used some checkboxes, and I wat to use drop down menu (one drop down menu for every day of the event). With the checkboxes it worked fin but when I modifie the part to insert the dropdown menu and that on my webpage I choose a job and then i send it and it tells me that I haven't selected anything. I already lost 3 days of work triing to make it work but nothin succesfull.. This is the PHP code of the webpage: PHP Code: <?php include("login.php"); ?> <html> <head> <title>Tickets</title> <style> * { font-size: 11px; font-family: arial; } </style> <script> function reserveSeats() { var selectedList = getSelectedList('Reserve Seats'); if (confirm('Do you want to reserve selected seat/s ' + selectedList + '?')) { document.forms[0].oldStatusCode.value=0; document.forms[0].newStatusCode.value=2; document.forms[0].action='bookseats.php'; document.forms[0].submit(); } else { clearSelection(); } } function getSelectedList(actionSelected) { // get selected list var obj = document.forms[0].elements; var selectedList = ''; for (var i = 0; i < obj.length; i++) { if (obj[i].checked && obj[i].name == 'seats[]') { selectedList += obj[i].value + ', '; } } // no selection error if (selectedList == '') { alert('Please select a seat before clicking ' + actionSelected); return false; } else { return selectedList; } } function refreshView() { clearSelection(); document.forms[0].action='<?php echo $_SERVER['PHP_SELF']; ?>'; document.forms[0].submit(); } </script> </head> <body> <table> <tr><td width="100%" align="center"> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <input type="hidden" name="oldStatusCode" value=""/> <input type="hidden" name="newStatusCode" value=""/> <table width='100%' border='0'> <tr><td align='center'> <input type='button' value='Refresh View' onclick='refreshView();'/> </td></tr> </table> </td></tr> <tr><td width="100%" align="center"> <table width='100%' border='0'> <tr><td align='center'> <input type='button' value='Reserve Seats' onclick='reserveSeats()'/> </td></tr> </table> </td></tr> <tr><td width="100%" align="center"> <select> <?php $linkID = @ mysql_connect("......", ".....", ".....") or die("Could not connect to MySQL server"); @ mysql_select_db("......") or die("Could not select database"); /* Create and execute query. */ $query = "SELECT * from seats order by rowId, columnId desc"; $result = mysql_query($query); $prevRowId = null; $seatColor = null; $tableRow = false; //echo $result; while (list($rowId, $columnId, $status, $updatedby) = mysql_fetch_row($result)) { if ($prevRowId != $rowId) { if ($rowId != 'A') { } $prevRowId = $rowId; } else { $tableRow = false; } if ($status == 0) { $seatColor = "lightgreen"; } else { $seatColor = "red"; } if ($status == 0 || ($status == 1 && $updatedby == $_SERVER['PHP_AUTH_USER'])) { echo "<option name='seats[]' value='$rowId$columnId'>$rowId$columnId</option>"; } } echo "</tr></table></td>"; echo "</tr>"; echo "</table>"; /* Close connection to database server. */ mysql_close(); ?> </select> </td></tr> </table> </form> </body> </html> There is an atatchment of the webpage in a browser. I hope someone out there can help me figure out the probleme. Thanks alot Joris |
|||||||