0

I'm having an issue with getting jQuery & Bootstrap.js to load and play nicely. I can put them in the header and they work fine, but I have a 'master page' which loads 3 subforms on them. Thus on each form, I need to assure jQuery & Bootstrap.js are loaded but I cannot have them reload or it is causing issues.

So, I've created a jsfiddle that I'm using to assure jQuery is loaded before I then check to see if bootstrap.js is loaded (and load it if it is not). The problem is that code after the jQuery check seems to be executing before jQuery finishes loading despite trying to put a delay in to assure it does not.

Here is the code:

if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = '//code.jquery.com/jquery-2.0.3.min.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
    alert('You are here')
    myJQueryCode();
}
function yourFunctionToRun(){
    //Your JQuery goodness here
}

function runYourFunctionWhenJQueryIsLoaded() {
    if (window.$){
        //possibly some other JQuery checks to make sure that everything is loaded here
        myJQueryCode();
    } else {
        setTimeout(function() {runYourFunctionWhenJQueryIsLoaded()}, 50);
    }
}

runYourFunctionWhenJQueryIsLoaded();
if(typeof jQuery=='undefined') {
    alert('Houston we have a problem');
}

Here is the jsfiddle

Based on this fiddle, the alert windows should never open as it should not reach that until after jQuery is loaded.

Any help would be greatly appreciated.

Charles Wilkins IV
  • 57
  • 1
  • 7
  • 1
    At the risk of bloating your code further, you should examine a dependency management or module framework like `requirejs`, which is an implementation of something close to the CommonJS spec. Even if you don't implement it as-is, you might learn enough looking through their code to resolve your issue. – Palpatim May 02 '14 at 15:11
  • Apparently you didn't read the rest of the answer that you copied your code from. http://stackoverflow.com/questions/6813114/how-can-i-load-jquery-if-it-is-not-already-loaded You are loading jQuery asynchronously, so when your if statement executes, you are still in the process of loading it. – mambrow May 02 '14 at 15:20
  • The thought of using another framework makes me ill. Getting the Bootstrap & jQuery frameworks to play nicely together is what is driving me crazy. Thus, adding another does not seem like a likely option. I'm 'old school' and prefer to have all my code written by myself, but I'm trying to evolve into at least the common Bootstrap & jQuery ones. – Charles Wilkins IV May 02 '14 at 15:24
  • mambrow - I tried to keep the jsfiddle simple. What happens inside the myJQueryCode function (which fires on the .onload function) first is: $(document).ready(function() { // now that jquery is loaded - load bootstrap if(typeof popover !== 'function') { loadJSfile("../../includes/js/bootstrap.js"); } } This fails because "$ is not defined" on $(document).ready(function () { Unless I'm wrong, this is because jQuery is not fully loaded yet. – Charles Wilkins IV May 02 '14 at 15:34
  • Also, in the jsfiddle - shouldn't the code be waiting for the complete of the delay function (runYourFunctionWhenJQueryIsLoaded() ) before continuing? Thus, it should not get to the alert until it recognizes that jQuery is loaded. – Charles Wilkins IV May 02 '14 at 15:35
  • You should post the actual issue then. Based on what you posted, I would absolutely expect the "Houston we have a problem" alert to fire. If you were to put that if statement inside your onload event, you would not see that alert. Without seeing the actual issue, we will not be able to help you. – mambrow May 02 '14 at 15:38
  • `Getting the Bootstrap & jQuery frameworks to play nicely together` they would play nicely together if you included them in the header like any other script file. or, if you included ALL of your script includes before the closing body tag. You are overcomplicating things. – Kevin B May 02 '14 at 15:49
  • setTimeOut will execute the function specified asynchronously as well. Meaning your if statement after the original call to runYourFunctionWhenJQueryIsLoaded will execute before the call to myJQueryCode from runYourFunctionWhenJQueryIsLoaded. – mambrow May 02 '14 at 15:51
  • Kevin - you're correct they do 'play nicely' in a simple single page format. The problem is that is now how I'm trying to use them. The secondary issue is that they do not work properly if you reload them (as is happening in my multipage format). – Charles Wilkins IV May 02 '14 at 16:21
  • Thanks mambrow.. That makes sense now. It doesn't resolve my issue of trying to load jQuery & javascript conditionally (only if not previously loaded) though. I need the jQuery to load fully before the bootstrap.js file (as it's dependant on jQuery) but need to assure they are not loading multiple times (through the multiple pages). – Charles Wilkins IV May 02 '14 at 16:24
  • Looks like I can get them to load synchronously by setting .asynch = false. This seems to get them to load properly, but the problem is that it wants to execute the code with myJQueryCode() [after the bootstrap is called to load] before they are fully loaded... – Charles Wilkins IV May 02 '14 at 17:01

0 Answers0