2

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?

4 Answers 4

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.

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

3 Comments

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 - 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.
I was mostly being facetious. :)
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.

7 Comments

the only issue with this is that the function he wants to run first isn't a getscript ;)
What do you mean? Do you know the op? Why wouldn't this work?
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
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.
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
|
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"); 
};

8 Comments

This is not working. Only TINY.box is loaded, and $.getScript is not called.
have you checked the console for anything?
Yes, there is only one response, from the TINY.box.
It is working, but, again TINY.box is loading last.postimage.org/image/71j04jqn7/full
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.
|
-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.

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.