Smartmenus will not work when Jquery is loaded by Requirejs

[max]

I just started using smartmenus and downloaded smartmenus-0.9.3. I’m trying to build a menu system as shown above in this forum page (sm-blue style).

Everything works fine until I combine Smartmenu with another piece of code the uses Requirejs (see http://requirejs.org).

The problem is taking a sample code:










The problem is that in my requirePathConfig.js I point to jquery instead of placing
its reference in “index.html”. That is, I don’t have





in my index.html file.

Has anyone got Smartmenus to work by loading “jquery” with “Requirejs”?

thank you,

Max

[admin]

OK, unfortunately, I don’t have access to your code base so I cannot give you a clear answer what exactly might be wrong with your configuration but here is a quick example how you could include jQuery and some plugin (SmartMenus in our case) using RequireJS (this covers just the JS files, you still need to include the CSS files, etc.)

Let’s assume you have the following files:

/index.html
/js/require.config.js
/js/main.js
/js/lib/jquery-1.10.2.js
/js/lib/jquery.smartmenus.min.js
/js/lib/require.js

in “index.html” you need just the following script reference:

<script data-main="js/require.config" src="js/lib/require.js"></script>

The content of /js/require.config.js:

requirejs.config({
    "baseUrl": "js/lib", // you may need to change this when running on a server to something like '/js/lib'
    "paths": {
        "jquery": "jquery-1.10.2",
        "jquery.smartmenus": "jquery.smartmenus.min"
    },
    shim: {
        // tell RequireJS that SmartMenus needs to be loaded after jQuery
        "jquery.smartmenus": {
            deps: [ "jquery" ],
            exports: "jQuery.fn.smartmenus"
        }    
    }
});

// Load main
requirejs(["../main"]);

The content of /js/main.js:

define(["jquery", "jquery.smartmenus"], function($) {
    // jquery.smartemnus.min.js has been loaded so init the menu
    $(function() {
        $('#main-menu').smartmenus({
            subMenusSubOffsetX: 1,
            subMenusSubOffsetY: -8
        });
    });
});

And the files in /js/lib/ are the plain jQuery, SmartMenus jQuery and RequireJS files.

Hope this helps. If you have any further issues, please provide me with some sort of access to your code base so that I could test and try to find out what could be wrong.

Cheers!

[max]

Thank You, I’m testing now and will presents finding and more details.

[max]

I’m still don’t have yet a public facing web site.

I do have a question concerning Requirejs syntax that may be outside the scope
of this forum. If it is, I understand, but just in case, let me continue!
In our business layer we have the following:

web/index.html
web/js/lib/jquery/main.js
web/js/lib/jquery/jquery-1.7.2.js  (which I believe should work with smartmenus
web/js/lib/jquery/jquery.smartmenus.min.js
web/js/lib/requirePathsConfig.js  (here you add require.config.js)

Note, the addition of “jquery” in the path. The requirePathsConfig.js uses slightly different format.

Below is the format of “requirePathsConfig.js”

/* js/lib/requirePathsConfig.js */

var require = require || {paths:{},shim:{}};
(function(require){
    var context = "/" + location.pathname.split("/")[1] + "/";
    var web = context + "web/js/";
    var bl = context;

    var config = {
       //baseUrl: web + "js/",
       paths : {
           /*
            * Paths lists the locations of particular scripts in web.
            * These will be used with the shim config option to setup dependencies for
            * each library.
            */

           jquery : web + "jquery/jquery-1.7.2", /
           // ** not using jquery.jqGrid-4.5.2 until fully tested with all Web features **
           jqGrid : web + "jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/jquery.jqGrid.src", 
           jqGridLocale : web + "jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/grid.locale-en",
 
           // Smartmenu stuff note, the different format
           "jquery.smartmenus" : "jquery/jquery.smartmenus.min"

           // maybe should put main.js ref here?  "main" : "jquery/main",

       },
       shim: {

  /* Hold the dependencies needed for each script. Designed to for 
    * RequireJS v2.0 or higher. Array holds the dependency requirements for each script    above. */

         // recommended from smartmenu forum	   
		   "jquery.smartmenus": {
		      deps: [ "jquery" ],
			  exports: "jQuery.fn.smartmenus"
		   },

   	   jqGridLocale: ["jquery", "jqUI"],
    	   jqGrid: ["jqGridLocale"]

       }
    };

    //copy config into the global require
    // Basically take what we have already, and append the paths/shim.
    var copy = function(elementName){
	    for (var x in config[elementName]) {
	    	if (config[elementName].hasOwnProperty(x)) {
	    		require[elementName][x] = config[elementName][x];
	    	}
	    }
	};
	//alert(paths['jquery']);
    copy("paths");
    copy("shim");
})(require);
// recommended from smartmenu forum requirejs([web+"jquery/main"]);
alert("finished requirePathsConfig.js");

—————————————————————————————

I tried different syntax changes. Incorporating your recommendations but still
missing something basic.

Note, also instead of using



to load say "requireConfigPaths.js" the code I see uses"

instead of


--------------------------------------------------------------------------
Can you recommend how to incorporate say "requirejs([web +"jquery/main"]) with the structure shown above?

Thank You,

[admin]

The paths in requirePathsConfig.js seem to be wrong – you don’t include “lib/” at all. Then your “copy” function does funky but incorrect stuff and also produces a JS error.

Here is my suggestion how to fix the issues:

1) Assuming you use any of these on your pages (not very sure from your explanation which exactly you use):

<script type="text/javascript" data-main="js/lib/requirePathsConfig" src="js/lib/requirejs-2.1.2.js"/></script>

or:

<script type="text/javascript" src="js/lib/requirejs-2.1.2.js"/></script>
<script type="text/javascript" src="js/lib/requirePathsConfig.js"/></script>

2) Replace the content of your current requirePathsConfig.js with the following:

/* js/lib/requirePathsConfig.js */

(function(require) {

    if (!require) {
        return;
    }

    var context = "/" + location.pathname.split("/")[1] + "/";
    var web = context + "web/js/";
    var bl = context;

    require.config({
        baseUrl: web,
        paths : {
            /*
             * Paths lists the locations of particular scripts in web.
             * These will be used with the shim config option to setup dependencies for
             * each library.
             */

            jquery : "lib/jquery/jquery-1.7.2",
            // ** not using jquery.jqGrid-4.5.2 until fully tested with all Web features **
            jqGrid : "lib/jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/jquery.jqGrid.src", 
            jqGridLocale : "lib/jquery/plugins/webvisGridView/jquery.jqGrid-4.4.1/grid.locale-en",

            // Smartmenu stuff note, the different format
            "jquery.smartmenus" : "lib/jquery/jquery.smartmenus.min"
        },
        shim: {
            /* Hold the dependencies needed for each script. Designed to for 
             * RequireJS v2.0 or higher. Array holds the dependency requirements for each script    above. */

            "jquery.smartmenus": {
                deps: [ "jquery" ],
                exports: "jQuery.fn.smartmenus"
            },
            jqGridLocale: ["jquery", "jqUI"],
            jqGrid: ["jqGridLocale"]
        }
    });

    // load main.js
    require([web + "lib/jquery/main.js"]);

})(window.require);

and it should work assuming:

– you use the exact folder structure you mentioned;
– main.js has the exact content I mentioned in my previous post;
– you keep the main RequireJS code in js/lib/requirejs-2.1.2.js.

Hope this helps. Let me know if you still have any troubles.

[max]

Followed your instructions again. And got my stuff to work with Requirejs. So I owe a big thanks.

Thank you so much.

I have a public facing web site now and in future will expose code directly.

[admin]

Np at all! Glad to hear you’ve got everything working and live now! 🙂

[donaldante]

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

[Author]

Posts