CODEWITHSUNDEEP
javascriptjqueryajax
user39980
user39980

Reputation:

Not printing results from AJAX

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>

Upvotes: 1

Views: 3591

Answers (2)

redsquare
redsquare

Reputation: 78667

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.

Upvotes: 1

bendewey
bendewey

Reputation: 40235

You might be getting an error try adding a debug statement to your ajax call using the error setting

$.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: "author="+ author + "&post=" + post,

                        error: function(XMLHttpRequest, textStatus, errorThrown) 
                        { alert(errorThrown); },

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

Upvotes: 0

Related Questions