Many friends are asking me how to they use JQuery AJAX power. However you have two main ways, using:
$(‘#elem’).load(‘url’, ”, function() {});
or
$.ajax({
type : ‘GET’, // or POST
dataType : ‘text’, // or JSON
url : ‘url’,
data : {}, // GET or POST key/value parameters
success : function () {}, // on success callback
error : function () {} // on error callback
});
Note: be careful to miss the comma after the error callback declaration, cause IE is giving some problems with objects with comma after the last key/value pair.
Both methods are useful, but however the second one is more complicated and gives more functionality. It’s important to note that if you’d like to include Html, which will be JavaScript processed after that, there are another two ways. The first one is obvious, you can call the javascript file processing the included Html in your success callback of the first ajax call. After calling the second ajax call, be aware to call it with dataType : ‘script’, which includes de js code and parses it as code. Than you can call whatever function in that .js as you’d do it as it was already included.
That method is obvious and easy, but however on slow nets it’s pretty slow and it’s not useful. Actually you can include your script file as you’d normally do it, with a script tag.
In it you should register all event listeners in methods you can call later. That’s the better way.
In the first case you have:
$.ajax({
type: ‘GET’,
dataType: ‘text’,
url: ‘the_url’,
data: {},
success : function () {
$.ajax({
type: ‘GET’,
dataType: ‘script’,
url : ‘script.js’,
success : function() {
// now do what you want
}
})
},
error : function() {
}
});
In the second case you’d just include your file:
<script src=”script.js”></script>
<script>
$.ajax({
type : ‘GET’,
dataType : ‘text’,
url : ‘url’,
success : function() {
init_script(); // method in script.js
}
});
</script>
Now everything should work OK, good luck!