Static Resources being loaded in different order

Question

I am developing a Salesforce application that is using jQuery, jQueryUI and a custom plugin. The script tags in the page markup are in the correct order:

<script type="text/javascript" 
    src="/resource/1384171438000/afdpce__JQuery/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" 
    src="/resource/1384171438000/afdpce__JQuery/js/jquery-ui.min.js"></script>
<script type="text/javascript" 
    src="/resource/1384170807000/afdpce__IntegrationPlugin"></script>

All three are loading (can view the code in Chrome Development Tools), but when inspecting the Network tab they are loading in a different order; the plug-in is loading before the jQueryUi. This means the plugin is failing (there is no widget method).

Why is this happening and how can I correct it?

Thanks

Edit

The goal is to add the scripts to an existing form (i.e. Account Edit) to add functionality.

Currently I have a Visualforce page that is the javascript to dynamically load the js files from static resources, the file paths are using '{!URLFOR($Resource.name)}'.

They are being added, just not in the same order. I've found that dynamically added js files ARE added async. So now I'm struggling how to over come this.

Answer 1

I don't think this is a visual force problem, resources from a browser are loaded asynchronously, if you have dependencies, try using getScript

https://stackoverflow.com/questions/6577386/loading-required-scripts-into-jquery-plugin

https://stackoverflow.com/questions/7015251/include-jquery-plugins-with-getscript

Answer 2

@kevin,

Could you try using 'apex:includescript' instead of using HTML tag and see how its loading in the network tab?

<apex:includeScript value="{!URLFOR($Resource.afdpce, 'afdpce__JQuery/js/jquery-1.10.2.min.js')}" />

Here i assumed "afdpce" is the Static Resource name of the resource and it is zipped

Answer 3

@Kevin, can you defer the execution of any JS code in your plugin to after page load? @Ganesh is right - you can't control the timing of the load process. Wrote lots of JS/jQuery code - never a problem starting things after page load.