Menu
When using the jQuery.ajax() method, I am struggling to filter the data that is returned to get exactly what I need. I know this is easy using .load() and probably the other jQuery AJAX methods but I need to use .ajax() specifically.
For example I know that this works;
var title = $(data).filter('title'); // Returns the page title But what if I just want the contents of a div with id="foo"?
var foo = $(data).filter('#foo'); // None of these work var foo = $(data).find('#foo'); // var foo = $('#foo', data); // Ideally, I want one method into which I can pass a normal jQuery selector, which will work for selecting titles, divs, or any other element that jQuery can select. This is so that I can pass in any string into my own ajax function - eg;
myApp.ajax({ url: 'myPage.html', filterTitle: 'title', filterContent: '#main-content' }); Any help would be greatly appreciated.
416
The $.ajax() function returns the XMLHttpRequest object that it creates. Normally jQuery handles the creation of this object internally, but a custom function for manufacturing one can be specified using the xhr option.
jQuery filter() MethodThis method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned. This method is often used to narrow down the search for an element in a group of selected elements.
The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds. The function takes three parameters, namely: The data returned from the server, formatted according to the dataType parameter, or the dataFilter callback function.
The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
The use of filter() vs. find() depends on the structure of your retrieved HTML page. For example, if this is the retrieved page:
<!DOCTYPE html> <html> <head> <title>Foo</title> </head> <body> <div id="wrap"> <div id="header"> <h1>Foo</h1> </div> <div id="body"> content </div> </div> <div id="tooltip"> tooltip </div> </body> </html> If you want to select the top-level elements = elements that are direct children of <body> - in this example: #wrap or #tooltip - then you have to use filter().
If you want to select other elements - in this example: #header, <h1>, #body, ... - then you have to use find().
I you don't know whether your element is a child of <body> or not, you could use this "hack":
$("<div>").html(data).find( selector );
By using this work-around, you always get the elements via find().
146
The jQuery.load method uses the following code:
// If successful, inject the HTML into all the matched elements if ( status === "success" || status === "notmodified" ) { // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div />") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(rscript, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); } I.e it appends the full response to a DIV it creates, and then uses find(selector) on that.
So you should be looking at something like:
var foo = $('<div />').html(data).find('#foo'); // This looks like it'll work! Bit of a hack from jQuery's point of view!
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
