Geek Answers Handbook

I need to make sure that the plugin will not load until its dependency is loaded using RequireJS

I am using jquery.validationEngine.js plugin. jqueryValidateEnglish cannot work until jqueryValidateEngine loads.

My jquery.wrapped.validationEnglish2.js is encoded as follows:

define(['jqueryValidateEngine'],function($){ //Plugin Code here });

My jquery.wrapped.validationEngine2.js is encoded as follows:

  define(['jquery'],function($){ //Plugin Code here });

My homepage contains:

  <script src="/imagesrv/marketing/requireJS/assets/lib/require.js" data-main="/imagesrv/marketing/requireJS/assets/js/common2">

common2.js Contains:

  //Configure RequireJS require.config({ baseUrl: "/imagesrv/marketing/requireJS/assets", paths: { // The libraries we use jquery: [ '/imagesrv/marketing/js/jquery.min' ], bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min', smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device', eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag', main: '/imagesrv/marketing/requireJS/assets/page/main', startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit', jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min', smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min', genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script', owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel', placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder', explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped', kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script', jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2', jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2' } }); require(['main', 'bootstrap', 'startupkit', 'eloquatag', 'owlcarousel', 'kiblog', 'jqueryuicus', 'jqueryValidateEnglish'], function($) {// Load up this pages script, once the 'common' script has loaded console.log('jQuery and r.js have been loaded!'); });

But I keep getting the following error in the console when starting my page: "$ (...). ValidationEngine is not a function

Console screen capture

When I look in the "Network" section, it shows that my downloaded plugins are loading, but for some reason it seems that they should be loaded out of order, which is probably due to the fact that I get a console error.

enter image description here

I am not sure what the problem is.

+4
source share
2 answers

If jQuery is loaded first, you can use $.holdReady() , $.when()

  $.holdReady(true); var scripts = { bootstrap: '/imagesrv/marketing/requireJS/assets/lib/bootstrap.wrapped.min', smartdevice: '/imagesrv/marketing/requireJS/assets/page/smart-device', eloquatag: '/imagesrv/marketing/requireJS/assets/page/eloqua-tag', main: '/imagesrv/marketing/requireJS/assets/page/main', startupkit: '/imagesrv/marketing/requireJS/assets/js/startup.wrapped.kit', jqueryuicus: '/imagesrv/marketing/requireJS/assets/js/jquery-wrapped.ui-1.10.3.custom.min', smoothscrl: '/imagesrv/marketing/requireJS/assets/js/jquery.smoothdivscroll.wrapped-1.3-min', genscript: '/imagesrv/marketing/requireJS/assets/js/gen-wrapped.menu.script', owlcarousel: '/imagesrv/marketing/requireJS/assets/js/owl.wrapped.carousel', placeholder: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.placeholder', explorewhatshot: '/imagesrv/marketing/requireJS/assets/js/explorewhatshot.wrapped', kiblog: '/imagesrv/marketing/requireJS/assets/js/ki.wrapped.blog.script', // load `jquery.wrapped.validationEngine2` before `jquery.wrapped.validationEnglish2` jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2', jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2' }; var requests = $.when.apply($, $.map(scripts, function(url, name) { return $.getScript(url) })); requests.then(function() { $.holdReady(false); }, function(error) { console.log(error) }); $(document).ready(function() { // do stuff when `scripts` loaded });
+1
source

I am not sure if I understood the problem correctly, but what I understood is that you are missing a declaration of dependency on your require.config, you are not saying that it depends on anything, so you need to change to something like this:

 require.config({ //alias paths: { jqueryValidateEnglish: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEnglish2', jqueryValidateEngine: '/imagesrv/marketing/requireJS/assets/js/jquery.wrapped.validationEngine2' }, //dependencies shim: { 'jqueryValidateEngine': ['jqueryValidateEnglish'] } });

Hope this is what you are looking for

0
source

More articles:


All Articles