ajax always going to error

Question

Im trying to learn to use ajax at the moment, but unfortunately I cannot get it to success .

$('.engineering-services').live('click', function() {     
$.ajax({
    url: 'index.php?route=information/information/homepage_info',
    type: 'post',
    data: {info_description : 'test'},
    dataType: 'json',
    success:    function(json){
    alert('pass');
    },
    error: function(json) {
    alert('fail');
    }
    });

});

Here is the php function...

    public function homepage_info() {
    $json = array();
    if (isset($this->request->post['info_description'])) {  
    echo $this->request->post['info_description'];
    echo '<br /> test2';
    }
    $this->response->setOutput(json_encode($json));
    }

However this always makes a fail alert instead of a pass one. Am I missing something obvious here?

EDIT: Its finding the function ok, as in the console it is giving the correct response,

ie

test

test2

Thank you

Answer 1

If your dataType is set to json, anything returned that is not JSON will cause the ajax call to error out. Try sending some json back to the script... {"test":"abc"} or similar. I see a couple of calls to echo in your code, for example.

Not just this, but any PHP error/warning/notice printed to the browser will break calls.

Hint: you can generate valid JSON from PHP variables using json_encode() .

Answer 2

You cannot combine an existing query string with data. Something like this should work (or at least be syntactically valid):

$.ajax({
    url: 'index.php',
    type: 'post',
    data: {information:'information/information/homepage_info',info_description:'test'},
    dataType: 'json',
    success:function(json){
        alert('pass');
    },
    error:function(json) {
        alert('fail');
    }
});

Also as was mentioned, anything that is not json will potentially cause an error, so you not echo those html components ... if anything, you print them.

Also, as a side note your dataType should be done server side with a header('Content-type: application/json'); declaration in index.php rather than in your jQuery script. Its guaranteed to be recognized as json that way, and also less Javascript code.