Question

I have this jQuery code:

<script type="text/javascript" >
$(function()
{
    $('#add_comment').bind('submit',function()
    //$("input[type=submit]").click(function()
    {
        var problem_id = $("#problem_id").val();
        var problem_comment = $("#problem_comment").val();  

        var dataString = 'problem_id='+ problem_id + '&problem_comment=' + problem_comment;

        if( problem_id == '' || problem_comment == '' )
        {   
            $('.comment_success').fadeOut(200).hide();
            $('.comment_error').fadeOut(200).show();
        }
        else
        {   
            // Now check if the person is logged in.
            $.ajax({
                    type: "POST",
                    url: "/auth/check_login.php",
                    dataType: "json",
                    success: function(data)
                    {
                        // Now add the comment!
                        $.ajax({
                            type: "POST",
                            url: "/problems/add_problem_comment_ajax.php",
                            dataType: "json",
                            data: dataString ,
                            success: function(data)
                            {
                                $('.add_message_success').fadeIn(200).show();
                                $('.add_message_error').fadeOut(200).hide();

                                // Here can update the right side of the screen with the newly entered information
                                alert ("success");


                            },
                            error: function(data)
                            {
                                alert ("add comment error, data: " + data);
                            }
                        });
                    },
                    error: function(json)
                    {
                        $("#loginpopup").dialog();

                        return false;           
                    }
            });         
        }

        return false;
    });
});
</script>

It actually works fine, and calls the AJAX in both places, and the server code behaves as I want it to behave, and I am happy with how it works.

Unfortunately, the nested jQuery AJAX call always goes back into the error case. I don’t know why. How can I get to understand why it does that?

I get no errors in the JavaScript console of Chrome or in my PHP server logs. Any idea what it could be?

Also, how can I tell what is in the data variable that is returned? The way I output it now it just says “Object object”

Thanks!!

Answer 1

Try modifying your error function as follows:

$.ajax({
    ...
    error : function (xhr, status, error){
        // Error Text //
        console.log(xhr.responseText); // Server Response
        console.log(xhr.statusText); // Server Status Response
        console.log(error); // Thrown Error

        // Data Object //
        console.log(data); // Displayed in console.
    }
    ...
});

The xhr object is part of the XMLHttpRequest object.

All info will appear in the javascript console.

Hope this helps!