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 ?

Answer 1

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");
        }
    }
});

Answer 2

Your styles should be in a style tag and your script should be in a script tag(although I don't think scripts are execute via an innerHTML).

{
    "html": "<style>\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</style>\r\n<script>\r\njQuery.noConflict();\r\n</script>\r\n",
    "success": "true"
}

I don't know prototype, so I wouldn't know if there are errors there.

Answer 3

I suggest remove the float directive. URL is there (not truncated) but hidden. JSon is correct.