I want to use a function on my html page but the content is delivered via ajax, how do I first load the script and then apply the function ? It won't work if I include the script in my <head> . Also how can I use the jQuery .find() and and apply a function or modify the css for content that has been delivered after the page has loaded ?
3 Answers
LABjs(http://labjs.com/) has an awesome interface for that. Here's an example code.
<!-- In the head -->
<script src="lab.js"></script>
<!-- In the body -->
<script>
$LAB
.script("yourscript.js")
.wait(function(){
yourfunction();
});
</script>
In the above example, the yourfunction(); will only be called after the script yourscript.js has been loaded.
Edit: After an ajax call using the .load method, this is how your body script might look like.
<script>
$('taggetelmselector').load(your_url, data, function(){
$LAB
.script("yourscript.js")
.wait(function(){
yourfunction();
});
});
</script>
3 Comments
andrei
I want it to load after the search results via ajax have been loaded
partoa
While you will still need to use LABjs, you need to add an ajax complete event handler to your ajax call. I'll update the example to assuming you're working with the .load()[api.jquery.com/load/] method.
andrei
Found the answer: i used $.get(); combined with $.getScript for an auto-refresh of the scripts this way they kept account of the new elements
1 Comment
andrei
and how do i know when the content via ajax has loaded ?
jQuery has this functionality built in to the getScript function.
$.getScript('yourscript.js', yourfunction);
document.createElement('script')?