i have implement 2 functions, append , delete on set of comments. insertion , deletion working unless in 1 case. when try remove newly added comment (before refreshing page), wont remove. when refresh page comment removes swiftly.
here's code. following ajax appending , removing comment div.
<script type="text/javascript"> $(function() { $(".commentbutton").click(function() { var element = $(this); var postid = element.attr("id"); var commenttext = $("#commenttext"+postid).val(); var datastring = 'commenttext='+ commenttext+'&postid='+postid; var postseq='#post'+postid; if(commenttext=='') { alert("please enter comment"); } else { //$("#flash").show(); //$("#flash").fadein(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">loading update...</span>'); $.ajax({ type: "post", url: "insdelcomment.php", data: datastring, datatype:'html', cache: false, success: function(html){ $(postseq).append(html); $(postseq).slidedown(); document.getelementbyid('commenttext'+postid).value=''; } }); } return false; }); $('.delcombutton').click(function() { var commid = $(this).attr("id"); var datastring = 'delcomm=1&commid='+commid; var delcomment = '#comment'+commid; if(confirm("sure want delete update? there no undo!")) { $.ajax({ type: "post", url: "insdelcomment.php", data: datastring, cache: false, success: function(html){ $(delcomment).slideup('slow', function() {$(this).remove();}); } }); } return false; }); }); </script> structure of div
echo "<div id='post{$postseq}'>"; while($commentonpost=mysql_fetch_array($resultcomm)){ if($commentonpost['visible']==1){ echo ' <div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;" id="comment'.$commentonpost['commentid'].'"> <div style="width:10%;float:left;"><a href="profile.php?user='.$commentonpost['usernick'].'" >'.$commentonpost['fname']." ".$commentonpost['lname'].'</a></div> <div style="width:78%;float:left;margin-left:2%;">'.$commentonpost['comment'].'</div> <div style="width:8%;float:right;margin-left:2%;"> '; if($commentonpost['usernick']==$_session['user_nick']){ echo ' <form action="" method="post"> <input type="submit" name="delcomm" value="x" class="delcombutton" id="'.$commentonpost['commentid'].'"> </form> '; } echo '<h5 class="msg">'.datetime($commentonpost['date']).'</h5> </div> <br/> </div> '; } } echo "</div>"; echo ' <form name = "form'.$postseq.'" method = "post" action="" onsubmit="return validateform()" style="width:100%"> <div style="width:90%;float:left;margin-left:5%;margin-right:15%;margin-top:10px;"> <div style="width:10%;float:left;"><a href="profile.php?user='.$_session['user_nick'].'" >'.$_session['user_fname']." ".$_session['user_lname'].'</a></div> <div style="width:78%;float:left;margin-left:2%;"><textarea placeholder="comment..." name="commenttext" id="commenttext'.$postseq.'" class="inputcomment" ></textarea></div> <br> <input type="submit" id="'.$postseq.'" name="submitcomment" value="comment " class="commentbutton" style="font-size:1em;width:100px;float:right;margin-top:4px;margin-right:9%;"> </div> </form> </div> '; ps: sorry such raw code, have limited internet now.
use event delegation model .on() dynamically added elements
$(function() { $(document).on('click', '.commentbutton', function() { var element = $(this); var postid = element.attr("id"); var commenttext = $("#commenttext"+postid).val(); var datastring = 'commenttext='+ commenttext+'&postid='+postid; var postseq='#post'+postid; if(commenttext=='') { alert("please enter comment"); } else { //$("#flash").show(); //$("#flash").fadein(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">loading update...</span>'); $.ajax({ type: "post", url: "insdelcomment.php", data: datastring, datatype:'html', cache: false, success: function(html){ $(postseq).append(html); $(postseq).slidedown(); document.getelementbyid('commenttext'+postid).value=''; } }); } return false; }); $(document).on('click', '.delcombutton', function() { var commid = $(this).attr("id"); var datastring = 'delcomm=1&commid='+commid; var delcomment = '#comment'+commid; if(confirm("sure want delete update? there no undo!")) { $.ajax({ type: "post", url: "insdelcomment.php", data: datastring, cache: false, success: function(html){ $(delcomment).slideup('slow', function() {$(this).remove();}); } }); } return false; }); }); 
Comments
Post a Comment