CODEWITHSUNDEEP
jqueryajaxload
Charlie
Charlie

Reputation: 11787

Load scripts after AJAX loads content?

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>

Upvotes: 3

Views: 30601

Answers (3)

Ronyn
Ronyn

Reputation: 1

$('.container').load('yourPage.html',function(){          
    //Do whatever you want here              
});

You can pass an anonymous function like a parameter on the jquery method .load()

http://api.jquery.com/load/

That function will execute when the ajax request is complete

Upvotes: 0

Travis J
Travis J

Reputation: 82337

"If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately." - http://api.jquery.com/ready/

EDIT

I think I may have misinterpreted your question, sorry. Are you saying that the search tries to search before the table is fully loaded? I thought you were trying to search before the page had completed loading. Have you tried using a callback function attached to your .load(), or just after container.append()?

after load

$('#content').load(url,callSearchFunction());

you can do it much simpler after append

 container.append(justTable);
 callSearchFunction();

Upvotes: 0

adeneo
adeneo

Reputation: 318342

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');
     });
  }
});

Upvotes: 15

Related Questions