jQuery $.post not returning data

Question

I'm using $.post to send a form via ajax to a PHP page, which returns JSON data. Once upon a time, it worked perfectly, and the function(data) executed as normal. Somehow, I've broke it, and now it doesn't even touch the function(data). I've tried undoing most of what I've done, but I still can't find the problem.

Here's the script :

$("#modifyhome").submit(function(event) {
    if($("#modifyhome").valid()) {  
        event.preventDefault();

        var $form = $( this ),
            title = $form.find('input[name="title"]').val(),
            content = $form.find('textarea[name="content"]').val();

        $.post("?action=page-accueil", {"title": title, "content": content},
            function(data) {            
                if(data['error'] == 1)
                {           
                    $().message(data['message']);
                    $("div.jquery-message").effect("shake", {times: 3}, 900);
                }
                else if(data['error'] == 0)
                {           
                    $().message(data['message']);
                    $("div.jquery-message").effect("bounce", {times: 3}, 900);
                }
                else
                {           
                    $().message("Erreur de connexion au serveur : veuillez réessayer.");
                    $("div.jquery-message").effect("shake", {times: 3}, 900);
                }
            }, "json"
        );
    }
    else
    {
        $("[id^=qtip-]").effect("pulsate", {times: 3}, 600);
        return false;
    }
});

And here is what the PHP page (?action=page-accueil) returns :

{"error":0,"message":"Page modifiée."}

That all checks out as valid JSON, but it's as if jQuery doesn't recognize it for some reason. Any help is greatly appreciated :)

Answer 1

You're not clear about what the problem is. At the beginning you say

Somehow, I've broke it, and now it doesn't even touch the function(data)

but then you say that jQuery is not recognizing your JSON, which means the callback function was invoked. You need to test each phase of the process to discover your error. Browser console is a must for debugging in this case.

Test cases:

1. is the server returning anything? If not

   • Is there an error in the php code? May return 500 error or could return OK, but with error message as string.
   • Is there a same-origin issue? Perhaps going form HTTP -> HTTPS?

2. If the server is returning something but it is not being parsed correctly.

   • Is the data being returned valid JSON? For PHP you should use json_encode function if available or something similar. jQuery side there is jQuery.parseJSON()
   • Is there an issue with response-type headers? In this case you will want to use normal $.ajax and set the beforeSend parameter to something like beforeSend: function(xhr){ xhr.setRequestHeader("Accept", "text/javascript") }. You will need to further research this option.

To test any of this it is fundamental that you are familiar with the browser console. Chrome Network Panel or Firebug Net Tab

Answer 2

I used to get this problem too, I am exactly not sure of the reason why. But I have a solution that works.

$.post("?action=page-accueil", 
    {"title": title, "content": content},
    function(data) {
        data = eval("("+data+")");
        //.... Then continue it
});

Or, use .parseJSON() function to read the string as JSON, if you dont want to use eval()

$.post("?action=page-accueil", 
    {"title": title, "content": content},
    function(data) {
        data = $.parseJSON(data);
        //.... Then continue it
});