Home/ Questions/Q 99619
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T00:25:20+00:00

I am working on a script to send data to a mysql table and

  • 0

I am working on a script to send data to a mysql table and I have it all working properly but the success part of the call, it is not loading my results in to my results column on my page. My code is below.

Any suggestions on what I can do to fix that? I am guessing the problem is within my ‘success:’ option in my AJAX call.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <title>Facebook like ajax post - jQuery - ryancoughlin.com</title> <link rel='stylesheet' href='css/screen.css' type='text/css' media='screen, projection' /> <link rel='stylesheet' href='css/print.css' type='text/css' media='print' /> <!--[if IE]><link rel='stylesheet' href='css/ie.css' type='text/css' media='screen, projection'><![endif]--> <script src='js/jquery.js' type='text/javascript' charset='utf-8'></script> <script type='text/javascript'> /* <![CDATA[ */ $(document).ready(function(){      $('p.validate').hide();      $.getJSON('readJSON.php',function(data){         $.each(data.posts, function(i,post){             content = '<div id='post-'+ post.id +''>\n';             content += '<h3>' + post.author + '</h3>\n';             content += '<p class='small quiet'>' + post.date_added + '</p>\n';             content += '<p>' + post.post_content + '</p>';             content += '<hr/>';             $('#contents').append(content).fadeIn('slow');               });     });       $('.reload').click(function() {          $('#posts').empty();     });      $('#add_post').submit(function() {         $('p.validate').empty();         // we want to store the values from the form input box, then send via ajax below         var author = $('#author').attr('value');         var post   = $('#post').attr('value');           if(($('#author').val() == '') && ($('#post').val() == '')){             $('p.validate').fadeIn().append('Both fields are required.');             $('#author,#post').fadeIn().addClass('error');         }else{             $.ajax({                 type: 'POST',                 url: 'ajax.php',                 data: 'author='+ author + '&post=' + post,                 success: function(result){                     $('#contents').after( '<div>' +result +'</div>' );                 }             });          }         return false;     });  }); /* ]]> */ </script> <style type='text/css'> h3{margin:10px 0;} p{margin:5px 0;} #posts{display:none;} </style> </head> <body>         <div class='container'>                 <div class='span-24'>                         <div id='post-container' class='span-9 colborder'>                                 <h2>Posts loaded via Ajax:</h2>                                 <div id='contents'></div>                            </div>                         <div id='form' class='span-11'>                             <h2>New Post:</h2>                              <form name='add_post' id='add_post' action=''>                                 <label>Author:</label><br />                                 <input type='text' name='author' id='author' size='15' class='text' /><br />                                 <label>Post:</label><br />                                 <textarea name='post' id='post' rows='5' cols='5' class='text'></textarea><br />                                 <input type='submit' value='Post' id='submit' /><br />                             </form><br />                             <p class='validate error'></p>                          </div>                   </div>                 <div class='span-24'>                     <a href='#' class='reload'>Reload</a>                 </div>         </div> </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Questions to ask yourself…

    1. Does jQuery even run your success callback?
    2. If so is the response data well formed markup?

    To begin I would add a ‘debugger;’ statement to your success function (assuming you have firefox and firebug). This will enable you to break into the script console and get a better understanding of what is happening.

    The debugger statement will cause the script execution to pause and break into the firebug console. Try the following

      success: function(result){              debugger;              $('#contents').after( '<div>' +result +'</div>' );            }

    If your script hits this I suspect your response markup is not well formed and jQuery is having issues parsing into the div but you can check all this when your at that breakpoint in firebug.

    Another easy thing to check and dismiss in your debugging is

    1. does your web server serve a valid (status 200) response (check the console or net tab in firebug to see this, or use the likes of fiddler if running in ie)

    Let me know how you get on.

    • 0