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

cool

I have taken the other path.. abandoned the jstree library and chosen the jqgrid instead. It is because jstree doesn't address certain requirements of mine.

Unlike jstree, the jqgrid css has no associated images. But it has few other challenges which I am trying to resolve .. they are outside the NodeBB's scope. If I am not able to fix them, I will ask the NodeBB community to help me out.

Thank you all for your kind cooperation.

cool

I have two plugins and both will use the jqgrid. How can I address this requirement.. I am wondering. Now a reference to the jqgrid will appear in two different plugin.json files.

What implication will it have? Will it be loaded twice? In fact, it is a huge library with several other dependencies.

PitaJ

That's a good question. If it's in the modules section in plugin.json then it will only be loaded once.

cool

Ok fine. I have another question ...

plugin.json

	"modules": {
		"jqueryui.js": "static/lib/jqgrid/js/jquery-ui.min.js",
		"jqgrid.js": "static/lib/jqgrid/js/trirand/src/jquery.jqGrid.js",
		"jqgrid.locale.js": "static/lib/jqgrid/js/trirand/i18n/grid.locale-en.js"
	},

requirejs is expecting a runtime path to these modules. What shall I write over here.. something like assets/...

requirejs.config({
	paths: {
		jqueryui: "assets/jqueryui",
		jqgridlocale: "assets/jqgrid.locale",
		jqgrid: "assets/jqgrid"
...
``

Still not working

PitaJ

You don't need to set up the paths yourself, NodeBB automatically handles that when you run ./nodebb build.

You can require them directly like: require(['jqgrid', 'jqgrid.locale'], function () { ... })

cool

@PitaJ
The problem is that jqgrid should be loaded only after the jqueryui and jqgrid.locale are loaded. This thing is stated here: https://stackoverflow.com/questions/15728329/requirejs-jquery-multiple-dependent-non-module-jquery-plugins-like-jquery-ui-and

If we go with this and a few other solutions, we need to configure the paths and shim objects of requirejs.

So far I have not been successful in accessing the jqgrid from NodeBB. What do you suggest? Could you pl. try it locally and find out the answer? Can you suggest any other alternative?

Thanks

PitaJ

Did you try it like this?

requirejs.config({
  shim: {
    jquery: {
      exports: '$',
    },
    jqueryui: {
      exports: '$',
    },
    jqgrid: {
        deps: ['jqueryui' ,'jqgrid.locale'],
    },
    'jqgrid.locale': {
        deps: ['jqueryui'],
    },
  },
});

require(['jqgrid'], function () { ... });

cool

@PitaJ Hi

Just tried this but same error: Uncaught TypeError: $(...).jqgrid is not a function

Note that the 'jqgrid.locale' key/property is a string while other properties are not. Why so?

I think an element of the deps array should be a property of the 'path' object.

Any other solution?

Thank you for helping me out.

PitaJ

Can you confirm that jqgrid.js exists in nodebb/build/public/src/modules?

cool

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

PitaJ

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

cool

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({ 
      ...

PitaJ

Don't specify paths in the require config

cool

I omitted it but still not working.

PitaJ

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.

cool

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

cool

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

Notice there is "Nothing to Preview" for jqgridlocale.

cool

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.

PitaJ

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

cool

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.