how to manipulate Ajax returned content

Question

How do you return a portion of the remote document while doing an ajax call ? Instead I'm getting the whole page, and Im interesting in manipulating this returned data and load it in specific locations instead..

For example :

$.ajax({

 type: "POST",

 url: "includes/search.php",

 beforeSend: function () {

 $( "#Loader" ).html('loading..');

},

 data: {t : t, r: r},

 success: function (e) {

    $( "#table" ).html(e); 

This will return the whole HTML content of search.php, instead I want to be able to target specific Divs I choose where to load them..similar to :

$( "#result" ).load( "ajax/test.html #container" );

Im trying to return :

$( "#table" ).load( "#table" ); // Load the Div #table from search.php into Div #table of current document

$( "#header" ).load( "#Stats" ); // ect.. load #Stats in current #Header...

},
    error: function(xhr, error){
    console.debug(xhr); console.debug(error);;
 }
 });

Im using this while filtering a data table and fecthing query stats a per the selection...Thanks

Answer 1

You probably want to be fetching a JSON (or XML) version of those results, rather than trying to parse html into chunks with javascript.

---

In your includes/search.php

Modify this (or create a search_json.php, or whatever), so that it outputs JSON instead of markup.

How to do this depends on what it's doing, but as a general rule you want to load the information into an associative array, and then using PHP do json_encode() on it.

http://us3.php.net/manual/en/function.json-encode.php

Then on the client side, use $.parseJSON(), which will split it back into a standard javascript object you can play with all you want.

http://api.jquery.com/jquery.parsejson/

Answer 2

This thread answers exactly what I wanted. I hope it helps someone. Answer