Question

Here is the issue:
I have a page index.php and onclick of select element we load another page (ajax) from same folder into the index.php page.

The ajax request is performed using this:

var $cachedContent = $loadContainer.find(".foo").html();
var $preloadHTML = $('<div class="loader"><img src="images/loader.gif"></div>');  
$("#myads").change(function(){
//$("#adshowblock").load( $(this).val() );
var loadFile = $(this).val();
if (!!loadFile) {
    $loadContainer
    .html($preloadHTML)
    .load(loadFile, function() {
        $preloadHTML.remove();
    });
}
else {
 $loadContainer.html($cachedContent);             
}             
});
});

For example: On the index.php page, I click select box, and banner.php loads into the page via ajax request. All works perfect.

But on banner.php page we also need to load specific css and js files such as:

    <link rel='stylesheet' type='text/css' href='style.css' />
    <script type='text/javascript' src='js/upload.min.js'></script>
    <script type='text/javascript' src='js/swfobject.js'></script>
    <script type='text/javascript' src='js/myupload.js'></script>

The issue is these files don’t get loaded (if we inspect the index.php page) after banner.php is fetched they just aren’t there. Should we in the index page (for the ajax request be adding get script like below (pinched from another StackOverflow answer))

If so can anyone help me do this? It’s driving me crazy.

$.ajax({
cache: true,
dataType: "script",
url: "your_js_file.js",
success: yourFunction
});

P.S. The above code I have no idea how to initiate that using our load file ajax request script at top of page, a very helpful member on here made the code for us.

Thanks!

Answer 1

Move your scripts to the bottom of the page.