Load JS for ajax page ( get script method ? )

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!

Kyle R · Accepted Answer · 2012-02-04 01:49:47Z

2

Move your scripts to the bottom of the page.

answered Feb 4, 2012 at 1:49

Kyle R

5682 silver badges13 bronze badges

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

Comments

Anonymous Penguin · Accepted Answer · 2013-01-27 22:54:21Z

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!

edited Jan 27, 2013 at 22:54

Anonymous Penguin

2,1475 gold badges34 silver badges49 bronze badges

answered Feb 4, 2012 at 0:26

Drew Dahlman

4,9651 gold badge24 silver badges34 bronze badges

Collectives™ on Stack Overflow

Load JS for ajax page ( get script method ? )

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related