Ajax json always returning error although json format in response is correct

Question

I have been trying to implement ajax login with CakePHP 1.3. I have a popup with a simple username/pass login.

Following is in my views/elements/login.ctp:

echo $this->Form->create('User', array('url'=>array('controller'=>'users','action'=>'login'), 'id'=>'user_login'));
echo $this->Form->input('username');
echo $this->Form->input('password');
echo $this->Form->end('Login'));

Following is in my controller controllers/users_controller.php

public function ajax_login() {

    $response = array('success'=>false);

      if($this->RequestHandler->isPost()) {
         if($this->Auth->login()) {
            $response = array('success'=>"true");
         } else {
            $response = array('success'=>false);
         }
      }
        $this->set('response', $response);

}

The view for the above controller is under views/users/ajax_login.ctp has ONLY this line:

echo $javascript->object(isset($response) ? $response : array());

My Ajax has the following code:

function login_user(){

    var username = $("#UserUsername").val();
    var password = $("#UserPassword").val();

    if(username == "" || username == null || password == "" || password == null){
        alert("Please enter a username and password");
        return false;
    }

    $.ajax({
        url:"/users/ajax_login",
        type:"POST", 
        data:$('#user_login').serialize(), 
        dataType:"json",
        async: true,
    success: function() { console.log("success"); }, 
    error: function(msg) { console.log(msg); }
    });

    return false;
}

Now, everything seems to be working perfectly, however, this is always failing into the "error" callback and I dont know why. I've read all of the below links on stackoverflow, and none of them seem to be the issue!

Weird JSON behavior when requesting a json file via $.ajax malformed JSON while JSON is valid? Ajax error result with struts2 json_encode creating a malformed JSON (with extra hidden character) php json_encode not returning proper json encoded string

The ONLY thing I suspect is when I read the console.log(msg) of the error, I get the correct HTML response {"success":true} which is in correct format... BUT... the "responseText" I get something like this:

responseText: "{"success":true}<!-- 0.375s -->"

so basically im guessing it's this "<!-- 0.375s -->" which is causing the json format to always fail in my ajax call. how on earth do i get rid of this?!... I'm no longer sure if this is a CakePHP issue, or and AJAX/JSON issue!... i've worked on both for over 5 years and now im stuck!

Answer 1

Indeed the string <!-- 0.375s --> is breaking your code. Try to find out where it is comming from. Some steps:

1. What layout are you using to render this? Try debug($this->layout) in your Controleler to see which on it is. This may very well be in there since I don't see you setting the layout to ajax for example. Cake has this ajax layout, which essentially is an empty layout. It should not contain anything more than echo $content_for_layout; in CakePHP 1.3.
2. Check and be sure that your is "spitted out" UTF-8 encoded. This is a must for JSON.
3. Try replacing your current view code with echo json_encode($response); or to keep the trilateral check: echo isset($response) ? json_encode($response) : ''; The JavaScriptHelper will to the same thing anyway.
4. This "strange string" may very well be some performance analyzer's "render time" comment. It is comming from somewhere within your app and as you can see it is a HTML comment. Lower your debug value in Config/core.php - I am guessing it is 3.

I am guessing that checking the layout and setting it to ajax or empty will solve your problem.