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 ?
views:
111answers:
3and how do i know when the content via ajax has loaded ?
andrei
2010-06-08 10:39:07
+1
A:
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>
partoa
2010-06-08 09:31:47
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()[http://api.jquery.com/load/] method.
partoa
2010-06-08 10:53:47
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
andrei
2010-06-08 10:55:17
A:
jQuery has this functionality built in to the getScript function.
$.getScript('yourscript.js', yourfunction);
Jeff Davis
2010-06-08 13:07:53