Smartmenus will not work when Jquery is loaded by Requirejs

Home Forums Older releases 0.9.x Smartmenus will not work when Jquery is loaded by Requirejs

This topic contains 7 replies, has 3 voices, and was last updated by  donaldante 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1287

    max
    Participant

    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:



    SmartMenus jQuery




    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

    #1493

    admin
    Keymaster

    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!

    #1494

    max
    Participant

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

    #1495

    max
    Participant

    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,

    #1496

    admin
    Keymaster

    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.

    #1578

    max
    Participant

    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.

    #1575

    admin
    Keymaster

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

    #8413

    donaldante
    Participant

    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).

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?