django ajax load() - possible to update two or more divs, with part of the returned django view context?

Question

Hi,

I'm using the load method to replace the contents of ONE div.

$( '#ajax_tbody_result' ).html( ' ' ).load(url);

Now I'm wondering whether it is possible to call the url, get the return values, split them up and update TWO or more divs in my template.

Thus the solution would be to get some objects out of the returned django context, split it up and update the divs with the correct content. This is the returned context:

context = {
            'object_list' : contact_list_page,
            'headers': headers,
            'filter_by_classification_form': filter_by_classification_form,            
            'filter_by_address_form': filter_by_address_form,
            'filter_by_company_form': filter_by_company_form,
            'urlquerystring_previous_page' : urlquerystring_previous_page,
            'urlquerystring_next_page' : urlquerystring_next_page,
        } 

Edit: The solution:

Split up the html response of a jquery get request into its parts and update the corresponding parts in the .html. You can do it like this:

$.get(url, function(results){
      var table = $("table", results);
      var spans = $("span.step-links", results);

      //update the ajax_table_result with the return value
      $('#ajax_table_result').html(table);
      $('.step-links').html(spans);

    }, "html");

The results object is the django template rendered to .html. From this .html return I take the stuff that I need (the table and the span with the id step-links) and update the corresponding objects in my page.

Answer 1

use

$.get(url, [{key:value}], function(data){
    //data is the entired contents of going to that url.
    //split it up here and do your stuff

    $('#div1').html(piece1);
    $('#div2').html(piece2);
});

http://docs.jquery.com/Ajax/jQuery.get

edit: looking more closely at your question, you will need to also create a django template for the view which you're calling with url that will give all the information you want to the javascript function.

Answer 2

I feel like a broken record by giving this answer, but you really want to check out the jQuery Taconite Plugin. It does what you asked for and 500% more. Checkout the examples and be amazed. I don't use this word lightly, but this is a truly elegant solution.