Decode zend json ajax response with Prototype

Question

Hi. am using prototype v1.7 for making ajax calls and using zend to send the response.

Here is my response code

{"html":"\r\n#s_del {\r\n  float: right;\r\n}\r\n#s_link
 {\r\n  float: left;\r\n}\r\n#search_view {\r\n  display: inline-block;\r\n  width: 193px;\r\n}\r\n
\r\n\r\njQuery.noConflict();\r\n\r\n"
,"success":"true"}

Actually my response code has style tags, script tags and other html tags.

My prototype code is

var reloadurl = "getUrl('savesearch/ajax/save') ?>";

    new Ajax.Updater('layer_save',reloadurl, {
    method: 'post',
    requestHeaders: {Accept: 'application/json'},
    evalScripts: 'true',
    parameters: "searchname="+searchname,
    onLoading: function(){ $('loadingmask').show();},
    onSuccess: function(transport) {
    $('loadingmask').hide();
        var json = transport.responseText.evalJSON(true);
        if(json.success == "true")
        {    
           $('layer_save').innerHTML = "";
           $('layer_save').innerHTML = json.html;
           $('viewsearch').simulate('click');
        }
        else
        {
           // Failed to update

           alert("Not a success, no update made");


         }
    }
    });

But when the div is loaded with response i get only this {"html":"

when i alert the json.html all the html is displayed correctly without the slashes.

can someone please help me with the fixes ?

Geek Num 88 Geek Num 88 · Accepted Answer · 2014-01-06T03:25:26

Ajax.Updater is designed to take whatever the output of the ajax call is and dump it into the element with the id 'layer_save' (the first parameter). I would use the Ajax.Request() method in this instance, and make sure your backend script sets the header Content-type: application/json

new Ajax.Request(reloadurl, {
    method: 'post',
    evalScripts: 'true',
    parameters: "searchname="+searchname,
    onLoading: function(){ $('loadingmask').show();},
    onSuccess: function(transport) {
        $('loadingmask').hide();
        //if you set the json header this is auto-evaluated to json
        var json = transport.responseJSON;
        if(json.success == "true")
        {    
           $('layer_save').update(json.html);
           $('viewsearch').simulate('click');
        }
        else
        {
           // Failed to update

           alert("Not a success, no update made");
        }
    }
});

Decode zend json ajax response with Prototype

3 Answers