StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJavaScript Being Called
text
Body
copied!<p>So I have a ajax function which appends data to a php page. It works like a comment panel that when you scroll to the bottom you can click a button and it loads more comments. This is the ajax function which loads more comments.</p> <pre><code>$("#loadmorecomments").click(function(){ $('div#loadmorecomments').show(); .ajax({ url: "loadmorecomments.php?lastComment=" + $(".post:last").attr("id") + "&sname=<?php echo $link ?>", success: function(html){ if(html){ $("#postspace").append(html); $("div#loadmorecomments").hide(); else{ ("div#loadmorecomments").replaceWith("div#done"); } }); }); </code></pre> <p>This is the page it appends to the original php page. All of this code including the javacript is part of the loadmorecomments.php which gets appended to the original page. So on the original page where all of this exact same code works. Doesn't work on these new comments that are appended on.</p> <pre><code> if($stmt = mysqli_prepare($mysqli, "SELECT post.text,post.username,post.id,post.likes,post.dislikes,post.image,users.avatar FROM post LEFT JOIN users ON post.username = users.username WHERE post.school='$sname' AND post.id < $lastcomment ORDER BY post.id DESC LIMIT 0,10")){ mysqli_stmt_execute($stmt); mysqli_stmt_execute($stmt); mysqli_stmt_bind_result($stmt,$comments,$user, $id,$likes,$dislikes,$image,$avatar); $counter = 0; while(mysqli_stmt_fetch($stmt)){ /////////////////Get Image/////////////////// switch($user){ case "Anonymous": $img = "design/anonymous.png"; break; case $user != "Anonymous" && !empty($avatar): $img = $avatar; break; case $user != "Anonymous" && empty($avatar): $img = "logo.png"; break; } if(!empty($image) || $image != "images/"){ $comimage = $image; }else{ $comimage = ""; } echo "<div class = 'post' id = '$id'>"; echo "<a href = './visitpage.php?userpage='$user'>$user<br /><img src='$img'/></a>"; if(!empty($comimage)){ echo "<img src='$comimage' class='comimage'></img> <h3>$comments</h3> "; }else{ echo "<p>$comments</p>"; } echo "<div style='border: 2px solid #000; height: 40px; margin-right: 20px; margin-left:90px; background: #F1F2F6'class='commentpanel' id='commentpanel_$id'>"; if(in_array($id, $likedcomments)){ echo "<img src='design/liked.png' class='like' /><h4 class='liketext' id='liketext_$id'>You and $likes</h4>"; }else{ echo " <a href='' id='like_$id'><img src='design/like.png' class='like' /></a><h4 class='liketext' id='liketext_$id'>$likes</h4>"; } if(in_array($id, $dislikedcomments)){ echo "<img src='design/disliked.png' class='like' /><h4 class='liketext' id='liketext_$id'>You + $dislikes</h4>"; }else{ echo " <a href='' id='dislike_$id'><img src='design/dislike.png' class='like' /></a><h4 class='liketext' id='liketext_$id'>$dislikes</h4>"; } $link = urlencode($sname); echo " <a href= '' id ='toggle_$id'><img src='design/reply.png' class='like'/><h4 class='liketext'>Send Message</h4></a> <a href= './quote.php?text=$comments&school=$link' ><img src='design/quote.png' class='like'/><h4 class='liketext'>Quote Post</h4></a> </div> <div class = 'replypost' id='replypost_$id'> <form action='' method='POST'> <input type= 'hidden' name='user' id='user' value='$user' /> <input type= 'hidden' name='comment' id='comment' value='$comments' /> <input type='textarea' name='reply' id= 'reply' class='replycomment' /> <input type= 'submit' id='submit' name='submit' value=' Reply ' class='replybutton' /> </form> </div> <br/><br/><br/> </div>"; $counter++; } mysqli_stmt_close($stmt); } mysqli_close($mysqli); } </code></pre> <p>?></p> <pre><code> <script> $("#loadmorecomments").click(function(){ $('div#loadmorecomments').show(); $.ajax({ url: "loadmorecomments.php?lastComment=" + $(".post:last").attr("id") + "&sname=<?php echo $link ?>", success: function(html){ if(html){ $("#postspace").append(html); $("div#loadmorecomments").hide(); }else{ $("div#loadmorecomments").replaceWith("div#done"); } } }); }); $("a[id ^= 'toggle']").click(function(event){ event.preventDefault(); $("div [id='replypost_"+$(this).attr('id').replace('toggle_','')+"']").toggle(); }); var likecounter = 0; var dislikecounter = 0; $("a[id ^= 'like_']").click(function(event){ event.preventDefault(); var value = $(this).attr("id").replace('like_',''); $.ajax({ url: "./like.php?id="+value+"&sname=<?php echo $link ?>", success: function(html){ if(html && likecounter == 0 && dislikecounter == 0 ){ $("#commentpanel_"+value).append("<br/><br/><br /><br /><h4>You Like This Post</h4>"); likecounter = 1; }else{ $("div#loadmorecomments").replaceWith("div#done"); } } }); }); $("a[id ^= 'dislike_']").click(function(event){ event.preventDefault(); var value = $(this).attr("id").replace('dislike_',''); $.ajax({ url: "./dislike.php?id="+value+"&sname=<?php echo $link ?>", success: function(html){ if(html && likecounter == 0 && dislikecounter == 0 ){ $("#commentpanel_"+value).append("<br/><br/><br /><h4>You Hate This Post</h4>"); dislikecounter = 1; }else{ $("div#loadmorecomments").replaceWith("div#done"); } } }); }); </script> </code></pre> <p>I was wondering why when I click on the anchor tags that are suppose to call those javascript functions, it just refreshes the page and no javascript functions are called.</p> <p>Note: The original page has the exact same format of posting comments and calling the javascript functions and it works perfectly. The only time it doesn't work is when the comments are loaded from the loadmorecomments.php file that is called.</p> <p>I know this is a tricky question if I can clarify any further please just let me know thanks. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload