How to load more than one DIVs using AJAX-JSON combination in zend?

Question

I am learning AJAX in zend framework step by step. I use this question as first step and accepted answer in this question is working for me. Now I want to load more than one

Answer 1

Encode JSON using the Zend Framework as

echo Zend_Json::encode($jsonArray);

If you are already using JSON for serialization, then don't send the images in HTML tags. The disadvantage of doing that is basically the JavaScript code cannot do much with the images other than sticking it into the page somewhere. Instead, just send the path to the images in your JSON.

$jsonArray = array();
$jsonArray['title'] = "Hello";
$jsonArray['image'] = "";

On the client side, the received JSON will look like:

{
    "title": "Hello",
    "image": ""
}

So the jQuery code needs to loop through key each, and inject a new image into the div with matching key - "image1" or "image2".

jQuery('.ajax').click(function(event) {
    event.preventDefault();
    // load the href attribute of the link that was clicked
    jQuery.getJSON(this.href, function(snippets) {
        for(var id in snippets) {
            // updated to deal with any type of HTML
            jQuery('#' + id).html(snippets[id]);
        }
    });
});