I've an ajaxified site having structure like this:
<body>
<div id="site-header"> content here </div>
<div id="site-body"> content here </div>
<div id="site-footer"> content here </div>
<body>
Now when any link is clicked, a jQuery script like this is executed:
$.ajax({
url: targetURL,
dataType: "html",
success: function(response) {
var targetBody = $(response).filter('#site-body').html();
$('body').prepend('<div id="ajax-body"></div>');
$('#ajax-body').append(targetBody);
}
});
And it works perfectly fine. But now the issue is target page may contain some js files which are not already loaded (because we are not loading js files of target page, only a specific div). In this case if target page has any content which depends on such script to function correctly will not function as intended (e.g image slider).
I know, I can use .getScript method to load that script but the issue is in this case I'll have no prior knowledge of any page specific script, so I cannot hardcode js file source like that.
Now the question is, is there any method in jQuery which can check the response data for any unique js files which has not already been loaded and then load that js file ONLY in AJAX callback function?
