Question

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 specified
                destination.html($(response).children("#lightBoxForm"));

                callback();
            }
        });

Answer 1

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>