Problem with jQuery Ajax...how do I update two DIVs with ONE ajax call?

Question

function ajaxCall(query){
$.ajax({
    method:"get",
    url:"/main/",
    data:"q="+query,
    beforeSend:function() {},
    success:function(html){
        $("#main").html(html);
    }
    });
};

This is the entire code that will populate #main:

<p>{{ num_results }}, you just searched for {{ query }}</p>

Suppose I have another div called $("secondary") ....how would I populate that with {{ num_results }}, which is a part of the code, instead of all of it?

Answer 1

Use a regular expression

success:function(html){
        $("#main").html(html);
        $("secondary").html( /.*?(?=,)/.exec(html) );
    }

Answer 2

$('#secondary').html($('#main p').html().split(',')[0]);

Answer 3

One option is to return json with the data you need for each area.

$.ajax({
    method:"get",
    url:"/main/",
    dataType: "json",
    data:"q="+query,
    beforeSend:function() {},
    success:function(json){
        $("#main").html(json.main);
        $("#secondary").html(json.secondary);
    }
});

What you would be returning is:

{
    "main": "<p>{{ num_results }}, you just searched for {{ query }}</p>",
    "secondary": "{{ num_results }}"
}

Answer 4

You will need to return a XML or JSON object from the request which will the be used to fill in only the relevant parts. Try something like this:

function ajaxCall(query){
$.ajax({
    method:"get",
    url:"/main/",
    data:"q="+query,
    beforeSend:function() {},
    success:function(html){
        $("#main").html(html.main);
        $("#secondary").html(html.secondary);
    }
    });
 };

You will also need to update the server-side to return a JSON object.