Combining jQuery.load() and ajax dataFilter()
I was using jQuery.load() to load a html page's content into a lightbox. The most useful thing load does in this instance is turning full html pages into a clean html fragment to be inserted into the page.
But (because of a buggy 3rd party API which won't work when loaded dynamically), I need to first use a regex to filter out one or two elements from the page before it gets processed as html, which means I need to use the dataFilter option of $.ajax.
So now that I'm using $.ajax instead of .load I need to convert my filtered text into the clean html that .load delivers automatically
But $(response) generates a strange buggy jQuery object where .find(), children() etc... don't work.
Can anyone tell me how to get the clean html I need (I notice the ajax code injQuery has changed a lot from v 1.4.4 to 1.5 - a solution using either version would do)
Here's what I have so far (using jQuery 1.4.4) (all the variables and methods referenced are defined above this code)
$.ajax({
url: url,
type: "GET",
dataType: "html",
dataFilter: function (response) {
return response.replace(recaptchaRegex, "");
},
success: function (response) {
// If successful, inject the HTML into all the matched elements
// See if a selector was s开发者_如何转开发pecified
destination.html($(response).children("#lightBoxForm"));
callback();
}
});
Well I see this was asked a while ago but hopefully this will still be helpful to you. From your question I understand you want to replicate the $.load function with the $.ajax function instead.
A tool you might find useful to use in the future is the jQuery source viewer so you can see exactly how jQuery is doing things under the hood.
// Using jquery 1.5.1
$(function () {
var rscript = "/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi";
// Will override all ajax requests on this page including load
$.ajaxSetup({
dataFilter: function (response) {
return response.replace("Lorem ipsum.", "");
},
type: "GET",
dataType: "html",
// Disable caching of AJAX responses for example only
cache: false
});
$("#load").click(function (evt) {
evt.preventDefault();
$('#content').load("html.htm #lightBoxForm");
});
$("#ajax").click(function (evt) {
evt.preventDefault();
$.ajax({
url: "html.htm",
success: function (res) {
$("#content").html("#lightBoxForm" ?
$("<div>").append(
res.replace(rscript, ""))
.find("#lightBoxForm") : res);
}
});
});
});
And my html
<input type="button" id="load" value="Load" />
<input type="button" id="ajax" value="Ajax" />
<div id="content"></div>
精彩评论