Loading external page using jquery/ajax - loading external page's jquery scripts as well.

Question

Ok, this is killing me. I'm loading an external page with jquery:

var response = $.ajax({
    url: "example.php",
    dataType: "html",   
    async: false,
});
$("#content2").empty().prepend(response.responseText);

This part is working perfectly.

Now I know that if I I want to interact with the new content I would have to bind any new elements to an action for it to work...

$(".example").live("click",function(event){
    //do something
}):

BUT, the problem is that the content that I am loading contains several .js files that contains LOTS of form validation.

Is there a way to just bind all of the new content to these external .js files?

Answer 1

Including JavaScript via AJAX requires those scripts to be eval'd. See $.getScript for a better way to do this.

As far as your example AJAX request is concerned, be wary of making synchronous requests as they will freeze your browser for the duration of the remote request. Instead, use asynchronous requests and handle their responses via callbacks

$.ajax({
    url: "example.php",
    dataType: "html",   
    success: function(response) {
        $("#content2").html(response.responseText);
    }
});