Load scripts after AJAX loads content?

Question

I'm using jQuery and YQL to get the content of a website and display a certain element on the page, in this case, the table element. I also have a search function set up using the jQuery QuickSearch plugin.

This works great, and now to the problem...

It seems that the search script is loading before the AJAX content getter gets the content. I think the script then caches the data, so that it's easier to search. Since it's loading after the content is there though, it doesn't search anything and it doesn't work. Is there any way to load the search script AFTER the AJAX content is loaded?

I already attempted calling it via the ready function in jQ:

$(document).ready(function() {

But that still loads before the content is loaded. My AJAX script is below:

<script type="text/javascript">
    $(document).ready(function () {
        var container = $('#content');
        function doAjax(url) {
            if (url.match('^http')) {
                $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                    "q=select%20*%20from%20html%20where%20url%3D%22"+
                    encodeURIComponent(url)+
                    "%22&format=xml'&callback=?", 
                function (data) {
                    if (data.results[0]) {
                        var fullResponse = $(filterData(data.results[0])),
                            justTable = fullResponse.find("table");
                        container.append(justTable);
                    } else {
                        var errormsg = '<p>Error: could not load the page.</p>';
                        container.html(errormsg);
                    }
                });
            } else {
                $('#content').load(url);
            }
        }
        function filterData(data) {
            data = data.replace(/<?\/body[^>]*>/g, '');
            data = data.replace(/[\r|\n]+/g, '');
            data = data.replace(/<--[\S\s]*?-->/g, '');
            data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, '');
            data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, '');
            data = data.replace(/<script.*\/>/, '');
            data = data.replace(/<img[^>]*>/g, '');
            return data;
        }
        doAjax('url_goes_here');
});
</script>

Solution

Not sure I really get the question, but to load a script after the content is loaded with Ajax you could do something like this:

$.ajax({
  url: url,
  data: data,
  success: function() {
     //success loading content
  },
  error: function() {
    //error loading content
  },
  complete: function() {
     $.getScript("/scripts/mysearchscript.js", function() {
          alert('loaded script and content');
     });
  }
});

Comments

[Charlie]

I'm trying to interpret what that means. I should be calling the .ready() first, then the AJAX, and then the search will load once the AJAX loads?

[Charlie]

What part don't you get? I want to refine the answer to be more clear :D

[Travis J]

It means if you are calling the .ready() function in a script inside the body then it runs instantly and should be run from the head.

[Charlie]

Both the scripts are in the head though.

[Charlie]

Also, to add onto this.. I'm not getting the content from a local page. This passes a url to YQL, and then gets the page's content sent back and stripped of everything but table tags. I'm not sure what the syntax would like like since it's just an ajax request, if that makes sense.

[Charlie]

Yes, I am wanting the search script to load after the page's content has loaded from the AJAX request. How would I go about using a callback?

[Charlie]

So I'd have to rewrite the code to get the content? Is there a jQuery function for after AJAX has loaded?

[Travis J]

Once the data has been retrieved in function(data) then the AJAX has loaded and you can call your script function. Also, the second parameted of $.load(first,second) is the callback function which will be called after the ajax is loaded.

[Charlie]

Okay, I think I'm kind of understanding it. Once the content is loaded into data, which would be done when the content is loaded, then call the search script?

[Travis J]

Yes, that would be a good time to call it, right after the data that is loaded is appended.

[Charlie]

let us continue this discussion in chat