CODEWITHSUNDEEP
javascriptjquery
Sasha
Sasha

Reputation: 8705

Javascript - script load order

I have this code:

$("#pop_mali_oglas").on('click', function(){
        TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'});
        $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js");
        $.getScript("<?php echo JS ?>tmpl.min.js");
        $.getScript("<?php echo JS ?>load-image.min.js");
        $.getScript("<?php echo JS ?>canvas-to-blob.min.js");        
        $.getScript("<?php echo JS ?>bootstrap.min.js");        
        $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");     
        $.getScript("<?php echo JS ?>jquery.iframe-transport.js");
        $.getScript("<?php echo JS ?>jquery.fileupload.js");
        $.getScript("<?php echo JS ?>jquery.fileupload-ip.js");
        $.getScript("<?php echo JS ?>jquery.fileupload-ui.js");
        $.getScript("<?php echo JS ?>locale.js");        
        $.getScript("<?php echo JS ?>main.php");       
        return false;                    
});

The first line is loading last ( TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'});) and I need it to load first, and then the rest. How can I do this?

Upvotes: 2

Views: 1542

Answers (4)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24526

The problem is that all the scripts are being loaded asynchronously which basically means they are all being fired simultaneously which means that they will most likely break everything. if you are depending on them being loaded in order..

Check out this past answer on methods for running functions or any javascript really after another.

like tkone had shown in his example, the function will first run the TINY.box.show function before running all the $.getScript functions.

$("#pop_mali_oglas").on('click', function(){
          scriptload(function() {
          getscripts()
          return false; 
        });
});

function scriptload(callback) {
 tinyboxfunc()
 callback();
} 

function tinyboxfunc() {
TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'}); 
};

function getscripts() {
            $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js");
            $.getScript("<?php echo JS ?>tmpl.min.js");
            $.getScript("<?php echo JS ?>load-image.min.js");
            $.getScript("<?php echo JS ?>canvas-to-blob.min.js");        
            $.getScript("<?php echo JS ?>bootstrap.min.js");        
            $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");     
            $.getScript("<?php echo JS ?>jquery.iframe-transport.js");
            $.getScript("<?php echo JS ?>jquery.fileupload.js");
            $.getScript("<?php echo JS ?>jquery.fileupload-ip.js");
            $.getScript("<?php echo JS ?>jquery.fileupload-ui.js");
            $.getScript("<?php echo JS ?>locale.js");        
            $.getScript("<?php echo JS ?>main.php"); 
};

Upvotes: 1

Panagiotis
Panagiotis

Reputation: 1567

You should set $.ajaxSetup before your $.getScript:

 $.ajaxSetup({
  async: false
 });

For the record, $.getScript() is indeed executed asynchronously, so setup it befor using it.

Upvotes: -1

tkone
tkone

Reputation: 22728

These are loading asynchronously -- they'll appear in whatever order they load in. To ensure one has loaded before the rest the best thing to do is load the one, and then load the others in the callback that is triggered when the first loads.

Something like

$.getScript(first script to load, function(){
    // other get script functions
});

edit

Apparently this isn't about script loading but order of execution.

That first tinybox line d oe s execute first, however, the results of calling it might not be visible until after other lines have executed and returned. This is likely due to the fact that the tinybox command is loading a file asynchronously. My above answer still applies, but you'll need to see how tinybox can execute a callback upon a successful completion of an asynchronous event.

Upvotes: 1

Chris Gessler
Chris Gessler

Reputation: 23113

I'm guessing that the second parameter (ajax true|false) defaults to true which is why it appears to be loading last. Pass in a 0 as the second parameter to force it to be synchronous.

Upvotes: 2

Related Questions