Here's the html, it gets concatenated 5 times (due to a page limit I have set up).
Code:
$h=1;
$i=1;
$j=1;
$k=1;
$l=1;
// the html is generated within the php here
$my_posts .= ' // this concatenates the list
<div class="blockdetails">
<div class="my_post">
' . $story_post . ' // this is where the posted story goes
</div>
<div class="comments">
' . $commentername . ' ' . $comment . ' // this is where "old" comments get listed
<li id="update' . $k++ . '"></li> // this is where live comments go
<div class="linebreak">
<form action="#" method="post">
<textarea class="commentbox" name="comment" id="comment' . $h++ . '"></textarea>
<input type="hidden" name="d_id" id="d_id' . $i++ . '" value=' . $d_id . ' />
<input type="hidden" name="mem_id" id="mem_id" value=' . $id . ' />
<input type="submit" class="submit' . $j++ . '" value="Comment" />
</form>
</div>
<div id="flash' . $l++ . '"></div> // don't worry about the #flash part
</div>
</div>
</div>
';
// heres the actual html
<html>
<head>
// the current 5 scripts go here
</head>
<body>
<?php echo $my_posts; ?>
</body>
I think this will probably do it. As long as your html structure stays the same, you should be able to use just this function, and give all your submit buttons a class name of just plain "submit". You said not to worry about the "flash" so I left the code in there...
Code:
$(function() {
$(".submit").click(function() {
var udid=this.parentElement.parentNode.previousElementSibling.id;
var commid=this.parentElement[0].id;
var posid=this.parentElement[1].id;
var memid=this.parentElement[2].id;
var post_id = $(this.parentElement[1]).val();
var member_id = $(this.parentElement[2]).val();
var comment = $(this.parentElement[0]).val();
var dataString = 'post_id='+ post_id + '&member_id=' + member_id + '&comment=' + comment;
if(comment=='') {
alert('Please enter a valid comment 1');
} else {
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("li#"+udid).append(html);
$("li#"+udid+" li:last").fadeIn("3600");
$("#flash1").hide();
document.getElementById(posid).value='';
document.getElementById(memid).value='';
document.getElementById(commid).value='';
$("#"+udid).focus();
$("#flash1").hide();
}
});
}
return false;
});
});
... although thinking about it more it would probably be easier (and more robust) to give each of your buttons a unique id, echoed out from the post count like this:
one thing I noticed - you haven't given the member id field in your form a unique like you have for the rest of the fields - for it to be legal html (and for the above code to work) you will have to do that.
Thanks you!!!!... that worked perfectly. At first I thought my original way to try to do the commenting system (ala jquery) would have been a more elegant solution... but now, I'm thinking that w your help, this may be the more elegant way! Thanks again...
A couple of things I could probably search and figure it out but if u know off the top of your head, that'd be great... For some reason what I type in the text area, stays in the text area even after I click the button. Also, I never see the "Loading Comment..." from #flash, I'm not sure if its cuz its loading too fast, is there a way I could slow it down to see if it is working?
refers to the milliseconds it takes to fade in, which comes out at 2.4 seconds - certainly enough to see it. you can crank it up to check, but I suspect it's something else...
Reply With Quote
Bookmarks