Javascript - script load order

Question

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?

score 2 · Answer 1 · answered Apr 04 '12 at 11:58

2

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.

answered Apr 04 '12 at 11:58

Chris Gessler

22,727
7
57
83

3

Nooooo! Synchronous is evil! Evil I tells ya. Seriously though JavaScript people need to be comfortable with asynchronous operations since they happen all over the place. Synchronous isn't evil but can block the ui and that users sad. – tkone Apr 04 '12 at 12:01
@tkone - I'm quite comfortable with either, it just depends on the situation. I'm merely pointing out to the OP that the second parameter specifies async or non-async which is why it appears to load last. – Chris Gessler Apr 04 '12 at 12:17
I was mostly being facetious. :) – tkone Apr 04 '12 at 12:24

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

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"); 
};

edited May 23 '17 at 10:34

Community

1
1

answered Apr 04 '12 at 11:57

Michael Zaporozhets

23,588
3
30
47

This is not working. Only TINY.box is loaded, and $.getScript is not called. – Sasha Apr 04 '12 at 12:02
have you checked the console for anything? – Michael Zaporozhets Apr 04 '12 at 12:04
Yes, there is only one response, from the TINY.box. – Sasha Apr 04 '12 at 12:04
It is working, but, again TINY.box is loading last.http://postimage.org/image/71j04jqn7/full/ – Sasha Apr 04 '12 at 12:12
Something strange is going on :D. Still nothing. I think for it is best to give up, and try something else. Like formula 1 driver, or butcher. – Sasha Apr 04 '12 at 12:30
hahahaha don't give up, like tkone was saying;if you attach the callback to within the TINY.box function it would definitely work. – Michael Zaporozhets Apr 04 '12 at 12:32
I believe the reason this doesn't work is because Tiny.box is being called asynchronously and it does not have the ability to set a callback method, unlike jQuery's methods like hide(). In order to run the show() method asynchronously with a callback, you'll have to crack open the Tiny.box code and set some sort of callback event handler. There might be a way of making the show() method a jQuery like method through prototyping, which means it would have callback capability. – Chris Gessler Apr 04 '12 at 15:27
yeah I was thinking about it for a bit, maybe using a old school timer approach would work? hahaha (i know it's horrendous form but hey, if it works?); realistically though, I think without actually opening up TINY.box this is a pretty difficult task.. – Michael Zaporozhets Apr 04 '12 at 15:43

tkone · Answer 3 · 2012-04-04T12:05:03.583

1

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.

edited Apr 04 '12 at 12:05

answered Apr 04 '12 at 11:57

tkone

22,092
5
54
78

the only issue with this is that the function he wants to run first isn't a getscript ;) – Michael Zaporozhets Apr 04 '12 at 12:00
What do you mean? Do you know the op? Why wouldn't this work? – tkone Apr 04 '12 at 12:24
I gave him this method before to try and he was unsuccessful (I mean the /beforeedit/ idea), no clue why it didn't work console gave nothing – Michael Zaporozhets Apr 04 '12 at 12:25
Hence the edit and a suggestion for how to resolve. What ever TINY.box is doing needs to provide a callback to run other code when it's done. Otherwise there's no easy way to do it. – tkone Apr 04 '12 at 12:27
true, I tried to stick it in a callback sort of wrapper in my newest attempt but i doubt i think you're right about needing to attach the callback to within the TINY.box process – Michael Zaporozhets Apr 04 '12 at 12:30
With every answer I am more and more confused :D. TINY.box creates popup div (div is created at the end of the body, and it has forms). In order for second form to work, it needs to be loaded before js scripts. – Sasha Apr 04 '12 at 12:37
@Sasha TINY.box is being given a URL. This means it is fetching resources from a remote server. TINY seems to be requesting this resource asynchronously. If this needs to occur BEFORE your $getScripts commands, you'll need to look at the documentation for TINY to determine how to find out something has finished loading. – tkone Apr 04 '12 at 15:13

score -1 · Answer 4 · answered Apr 04 '12 at 12:19

-1

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

 $.ajaxSetup({
  async: false
 });

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

answered Apr 04 '12 at 12:19

Panagiotis

1,539
1
14
28

Javascript - script load order

4 Answers4