How to include the images that are referred from inside a third party css?



  • It exists in nodebb/build/public/src/modules and not in nodebb/build/public/assets/src/modules There is no folder by the name assets.

    My another third-party module (geocomplete which is working) resides in the same folder as jqgrid, jqquery-ui etc. i.e. nodebb/build/public/assets/src/modules


  • Global Moderator

    Yeah that's what I meant. Can you share all of the exact code you're using?



  • plugin.json

    "modules": {
    	"jquery.geocomplete.js": "static/lib/geocomplete/jquery.geocomplete.min.js",
    	"jqueryui.js": "static/lib/jqgrid/js/jquery-ui.min.js",
    	"jqgrid.locale.js": "static/lib/jqgrid/js/trirand/i18n/grid.locale-en.js",
    	"jqgrid.js": "static/lib/jqgrid/js/trirand/src/jquery.jqGrid.js"
    },
    "less": [
    	"mydetails.less"
    ],
    "css": [
    	"static/lib/jqgrid/css/trirand/ui.jqgrid-bootstrap.css"
    ],
    "scripts": [
    	"mydetails.js"
    ],
    

    mydetails.js

    requirejs.config({
    	waitSeconds: 30,
    	paths: {
    		jqueryui: "assets/src/modules/jqueryui",
    		jqgridlocale: "assets/src/modules/jqgrid.locale",
    		jqgrid: "assets/src/modules/jqgrid"
    	},
    	shim: {
    		jquery: {
    			exports: '$'
    		},
    		jqueryui: {
    			deps: ["jquery"]
    		},
    		jqgridlocale: {
    			deps: ['jqueryui']
    		},
    		jqgrid: {
    			deps: ['jqueryui','jqgridlocale']
    		}
    	}
    });
    
    requirejs(["jquery.geocomplete", "jqgrid"], function(geocomplete, jqgrid) {
        $("#details-grid").jqgrid({ 
          ... 
    
    

  • Global Moderator

    Don't specify paths in the require config



  • I omitted it but still not working.


  • Global Moderator

    Can you check the responses for jqueryui.js, jqgrid.locale.js, and jqgrid.js in the network tab in the devtools? Make sure they aren't blank.



  • Pl. have a look at the attached screenshot. This output is there for the following shim. I don't think they are loaded in the correct order.

    shim: {
    	jquery: {
    		exports: '$'
    	},
    	jqueryui: {
    		deps: ["jquery"]
    	},
    	jqgridlocale: {
    		deps: ['jqueryui']
    	},
    	jqgrid: {
    		deps: ['jqueryui','jqgridlocale']
    	}
    }
    

    0_1515780173927_Screenshot from 2018-01-12 23:27:32.png



  • 0_1515780737290_Screenshot from 2018-01-12 23:38:09.png

    Notice there is "Nothing to Preview" for jqgridlocale.



  • I removed the dot from jqgrid.locale.js and renamed it to jqgridlocale.js in the modules

    "modules": {
       "jqgridlocale.js": "static/lib/jqgrid/js/trirand/i18n/grid.locale-en.js",
    },
    

    Now the 'modules' are in sync with the 'shim' properties and their dependencies.

    and the jqgridlocale.js file is also loaded now but still the same error.


  • Global Moderator

    So now all of the loaded files show the correct code?



  • Hi @PitaJ

    The code for these files is minified and we can assume that it must be the correct code.

    Secondly, I can see the code for all these files except the jquery.js. For jquery, it reports "Nothing to preview". Does this mean that the browser is unable to read the global jquery code that is fed by the NodeBB itself?

    Finally, how can we ensure that the order of loading of these code files is what we dictated?

    Thank you.


  • Global Moderator

    If you're getting an empty file for jquery.js then that means requirejs is trying to load it, instead of using the jquery already in the site.

    Try changing it to

    jquery: {
      exports: 'jQuery'
    }
    

    Instead. Also, make sure that the config code runs before you require anything.



  • No success buddy. The error is still there.


  • Global Moderator

    @cool do you have the full code available somewhere? If you have a private repo on GitHub or something I could try getting it to work locally. Otherwise you could upload it to Dropbox or the like and send my a pm with the link


Log in to reply
 


Star

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.