I want to get a div element with an ID after calling $.ajax() Here is my code:
$.ajax({
url: "PO_Header.php",
data: "supplier="+selectedId,
cache: false,
success: function(html){
$("#PO_Header").empty();
$("#PO_Header").append(html);
}
});
$("#PO_Header").append(html); will append the entire html page, what I want to have is get an element with a specific id. Let's say inPO_Header.phpa div element with an id='mydiv' would be injected in my current page.
Use jQuery's load:
$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );
It allows you to load page fragments. As their documentation points out:
Loading Page Fragments The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
It will therefore only inject <div id="myDiv"></div> from PO_Header.php into your element.
$.ajax() is the general function jQuery provides to handle the XmlHttpRequest object. But they added a whole bunch of more precise functions to enable people to get what they want out of it without lots of unnecessary parameters. So $.load() is just a more precise and specified function of $.ajax() which enables you to fetch data from a server file and insert it into a DOM element.You can use .load() for this.
Loading Page Fragments
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
Source: http://api.jquery.com/load/
Basically you can use it like this:
$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );
To disable cache you can use at the start of your code:
$.ajaxSetup({
cache: false
});
EDIT:
.load() is roughly the same as .get() except for a couple of reasons:
.load() has an implicit callback function which set the returned HTML content into the supplied element when a successful response occurs.
It has a special syntax for the url parameter for specifying just a determined portion of the returned document to be inserted.
Default method is GET. Unless the data parameter is passed as an object then a POST method is used.
I prefer to bind to ajax loaded elements in an external function and call that in my success function.
function binder(){
$("#mydiv")....do something here
}
$.ajax({
url: "PO_Header.php",
data: "supplier="+selectedId,
cache: false,
success: function(html){
$("#PO_Header").empty();
$("#PO_Header").append(html);
binder();
}
});
Try this
$.ajax({
url: "PO_Header.php",
data: "supplier="+selectedId,
cache: false,
success: function(html){
var new_html = $(html).find('#mydiv').html();
$("#PO_Header").empty();
$("#PO_Header").append(new_html);
}
});
I found this example from CSS-Tricks to be very helpful -
