ebolt007 Posted March 19, 2012 Share Posted March 19, 2012 So I am trying a new approach to my earlier comment area per post debauchery. I have changed my ajax to the following, however I am getting no results at all, I am not getting the comment_inser_msg = 'Make a comment...' var to fill in the .comment_insert input area. And no alerts placed anywhere in the code fire off any alerts, can anyone point me in the correct direction as to what I am missing to get this to fire anything at all on my page? Here's the simple little test page I made with everything stripped out. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" /> <head> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("document").on('submit', 'form.response', function() { var $form = $(this); var $wall = $form.closest('.wall'); $.ajax({ type: "POST", url: "include_wall_front/updatecomment_ajax.php", data: $form.serialize(), success: function(){ $("<li>a bunch of code</li>").appendTo('ul', $wall).hide().fadeIn(); } }); return false; }); var comment_insert_msg = 'Make a comment...'; $('.comment_insert').on('blur', function(){ if(this.value == ''){ this.value = comment_insert_msg; } }).on('focus', function(){ if(this.value == comment_insert_msg){ this.value = ''; } }).val(comment_insert_msg); )};; </script> </head> <body id="thetrue1"> <a href="">test</a> <div class="wall"> <ul> .... </ul> <form class="response" method="post" action=""> <input type="hidden" name="action" value="commentupdate" /> <input type="hidden" name="commentviewedID" value="$PostUserID" /> <input type="hidden" name="commentID" value="$CommentmainID" /> <input type="hidden" name="user" value="$user" /> <input type="hidden" name="userID" value="$user_ID" /> <input type="hidden" name="PostID" value="$PostID" /> <input type="hidden" name="UserPostID" value="$CommentUserID" /> <input type="text" class="comment_insert" name="commentinsert" size="100" /> <input type="submit" value="Go" /> </form> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/ Share on other sites More sharing options...
seanlim Posted March 20, 2012 Share Posted March 20, 2012 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" /> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.7.1"); </script> <script type="text/javascript"> $("document").on('submit', 'form.response', function() { var $form = $(this); var $wall = $form.closest('.wall'); $.ajax({ type: "POST", url: "include_wall_front/updatecomment_ajax.php", data: $form.serialize(), success: function(){ $("<li>a bunch of code</li>").appendTo('ul', $wall).hide().fadeIn(); } }); return false; }); $(document).ready(function(){ var comment_insert_msg = 'Make a comment...'; $('.comment_insert').on('blur', function(){ if(this.value == ''){ this.value = comment_insert_msg; } }).on('focus', function(){ if(this.value == comment_insert_msg){ this.value = ''; } }).val(comment_insert_msg); }); </script> </head> <body id="thetrue1"> <a href="">test</a> <div class="wall"> <ul> .... </ul> <form class="response" method="post" action=""> <input type="hidden" name="action" value="commentupdate" /> <input type="hidden" name="commentviewedID" value="$PostUserID" /> <input type="hidden" name="commentID" value="$CommentmainID" /> <input type="hidden" name="user" value="$user" /> <input type="hidden" name="userID" value="$user_ID" /> <input type="hidden" name="PostID" value="$PostID" /> <input type="hidden" name="UserPostID" value="$CommentUserID" /> <input type="text" class="comment_insert" name="commentinsert" size="100" /> <input type="submit" value="Go" /> </form> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329306 Share on other sites More sharing options...
ebolt007 Posted March 20, 2012 Author Share Posted March 20, 2012 Perfect thanks! Got it working, but my closest doesn't work, var $wall = $form.closest('.wall'); I have multiple forms, dynamically created, each with an ID, and when I put any text in any of them, and make this run it puts comments in every ul I have on the page rather than looking at the closest <div class="wall"><ul>, I'm reading more about closest, but I'm kind of lost. It should be appending to the closest ul to this div shouldn't it? Not every ul I have on my page? Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329478 Share on other sites More sharing options...
seanlim Posted March 20, 2012 Share Posted March 20, 2012 Probably need to see the page in action to properly debug it, but if I were to hazard a guess, I would say that the variable you are applying ".closest()" to is actually a collection of elements. So jQuery is basically calling closest() on all the forms on your page. I might be totally wrong here, just guessing. Is this page hosted live where we can have a look? Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329483 Share on other sites More sharing options...
ebolt007 Posted March 20, 2012 Author Share Posted March 20, 2012 Yeah, and you seem correct, it seems to be looking at ALL forms on the page because if I try to get the values of any of the hidden inputs, and alert them they come up undefined. like var $form = $(this); var $PostID = $('.formid').val(); var $wall = $form.closest('.comment'); var commentviewedID = $('#commentviewedID').val(); var commentID = $('#commentID').val(); var user = $('#user').val(); var userID = $('#userID').val(); alert (userID); $.ajax({ type: "POST", url: "include_wall_front/updatecomment_ajax.php", data: $form.serialize(), success: function(){ $("<li style=\"list-style-type: none;\">Code</li>").appendTo('ul', $wall).hide().fadeIn(); } }); return false; }); Here's the page http://www.thetrue1.com/indexajaxtest2.php you'll have to login and can use username:Eric and password:test1234 to get in so it uses a userid, I have the userID alerting on it. Thanks Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329490 Share on other sites More sharing options...
seanlim Posted March 20, 2012 Share Posted March 20, 2012 Maybe, instead of $("document").on('submit', 'form.response', function() { Try $("form").submit(function(){ Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329499 Share on other sites More sharing options...
ebolt007 Posted March 20, 2012 Author Share Posted March 20, 2012 hmmm, nope, that doesn't do it either, it's just running rampant and using all the forms instead of $(this) dang ajax is so confusing. Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329504 Share on other sites More sharing options...
ebolt007 Posted March 20, 2012 Author Share Posted March 20, 2012 Here's a simple page I put together using the code, no login needed, you can see any time you press go on either one, both Wall's ul's get the bunch of code appended to it. The code is in the source. How do I get it to do it one at a time? http://www.thetrue1.com/indexajaxtest3.php Quote Link to comment https://forums.phpfreaks.com/topic/259297-trying-a-new-approach-getting-no-results/#findComment-1329524 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.