CODEWITHSUNDEEP
jqueryyepnope
dottedquad
dottedquad

Reputation: 1391

jquery yepnope throws an error when loading the same file twice

                $("#register").click(function()
                {
                     yepnope({
                          load: ['js/join.js', 'css/join.css',  'css/join_form.css'],
                     });

                     $('#midcol').load('join.htm');             
                });

When the register link is clicked yepnope loads those files listed as expected. When the register link is clicked a second, third, fourth etc... time yepnope throws the following error:
Could not convert JavaScript argument arg 0 [nsIDOMHTMLHeadElement.insertBefore] js/yepnope/yepnope.js Line 248

I was under the impression that yepnope will only load the file if it does not exist? Am I required to run a check on every file that I want to load with yepnope? That will seem a bit daunting if that is the case.

I could not find a solution to my issue while searching the web for HOURS. I did however, come across CURL.js. It has a rather smaller footprint. I was able to load my dependencies without any issues. Below is an example of code to load dependencies. 

var cnf = {
     baseUrl: 'scripts',
     pluginPath: 'curl/plugin',
     paths: {
          curl: 'curl/src/curl',
     },
};

curl(cnf, ['js!join.js!order', 'domReady!'], function () {
     $("#register").click(function(){
          $("#midcol").load("join.htm");    
     });
});

Upvotes: 3

Views: 518

Answers (1)

John Starr Dewar
John Starr Dewar

Reputation: 1371

In my experience, yes you do have to run a check, if there is the possibility of the script being loaded twice. That seems like a fairly rare case to me.

On the site I'm working on at the moment I did encounter this situation when the user switches back and forth between a couple of sections that are loaded via AJAX and each have their own set of scripts. The user could load either section first.

I have my scripts set up as modules so it's pretty easy to do this:

// Section A loaded
yepnope([{
    test: window.One,
    nope: 'js/One.js'
},{
    test: window.Two,
    nope: 'js/Two.js'
}]);

// Section B loaded
yepnope([{
    test: window.One,
    nope: 'js/One.js'
},{
    test: window.Three,
    nope: 'js/Three.js'
}]);

You're definitely right that having load handle this automatically would be much more convenient.

Upvotes: 1

Related Questions