1

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!

2 Answers 2

2

Move your scripts to the bottom of the page.

Sign up to request clarification or add additional context in comments.

Comments

0

The js files should be loaded in when you use ajax to load the page, but they won;t work with an onReady function, the page really isn't loading the same.

A solution I use for these type of things is to call a function once the load is done.

In your loaded in file:

var page = {
  init:function(){
    you JS file code
  }
}

And in your ajax once it's finished:

page.init();

Hope this helps!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.