jQuery in Liferay 7

[8年前 に donino pienni によって更新されました。]

Hi everyone,

I have a portlet plugin which makes use of jquery. For Liferay 6.2 jquery is included through liferay-portlet.xml of the plugin and it works very well. In Liferay 7.0 i noticed jquery is now natively available in variable "$". Can we rely on this? I mean for performance considerations and to avoid conflicts, can we consider that starting from Liferay 7 GA1 jquery is always loaded and thus we don't have to include it anymore in liferay-portlet.xml?

Same question with bootstrap.js: it appears it is loaded in Liferay 7. I have a custom bootstrap component using it, is there a dependency module to invoke in Liferay 7 to take advantage of bootstrap.js?

Thanks!

[8年前 に David H Nebinger によって更新されました。]

Liferay 7 uses BS 3 and (I believe) a lite jquery.

Yes you can rely on it, but as always you are better off avoiding the $ syntax to avoid conflicts with other frameworks. Stick with the fully qualified jQuery() syntax.

[8年前 に donino pienni によって更新されました。]

Great news!

Thank you David.

[6年前 に William Gosse によって更新されました。]

Do we have an answer on how to avoid a conflict with JQuery being used by the portlets?

[6年前 に David H Nebinger によって更新されました。]

William Gosse:

Do we have an answer on how to avoid a conflict with JQuery being used by the portlets?

Hmm, not following William. What kind of (possible) conflict are you concerned about?

[6年前 に William Gosse によって更新されました。]

David H Nebinger:

William Gosse:

Do we have an answer on how to avoid a conflict with JQuery being used by the portlets?

Hmm, not following William. What kind of (possible) conflict are you concerned about?

The problem turned out not to jQuery but a bad import statement in a jsp.

[6年前 に Nate Cavanaugh によって更新されました。]

I have a portlet plugin which makes use of jquery. For Liferay 6.2 jquery is included through liferay-portlet.xml of the plugin and it works very well. In Liferay 7.0 i noticed jquery is now natively available in variable "$". Can we rely on this? I mean for performance considerations and to avoid conflicts, can we consider that starting from Liferay 7 GA1 jquery is always loaded and thus we don't have to include it anymore in liferay-portlet.xml?

That is correct, you can leverage it and it will be auto included. However, if you need a different version of jQuery to run because of plugin compatibility or certain features, you can always include yours, and there shouldn't be any conflicts.

What we do is we include it, but we also assign

AUI.$ = jQuery.noConflict();

Internally, we only refer to jQuery via that namespace, that way if you load your own jQuery, we don't have to worry about plugin conflicts between the two versions.

Same question with bootstrap.js: it appears it is loaded in Liferay 7. I have a custom bootstrap component using it, is there a dependency module to invoke in Liferay 7 to take advantage of bootstrap.js?

Bootstrap is a bit trickier because it's tied to the version of Bootstrap, but it's always included, so you shouldn't have to specify any dependencies.

I hope that helps

[5年前 に Ricardo Vieira によって更新されました。]

Nate Cavanaugh:

What we do is we include it, but we also assign

AUI.$ = jQuery.noConflict();

Internally, we only refer to jQuery via that namespace, that way if you load your own jQuery, we don't have to worry about plugin conflicts between the two versions.

Quick question, if you already set the noConflict option, if we load our own Jquery version, do we need to set that option also ?

[5年前 に Nate Cavanaugh によって更新されました。]

No you don't, as long as you're including your version of jQuery after ours is loaded, which ours are prioritized for the top specifically for things like this, so you should be fine

[5年前 に Ricardo Vieira によって更新されました。]

Nate Cavanaugh:

No you don't, as long as you're including your version of jQuery after ours is loaded, which ours are prioritized for the top specifically for things like this, so you should be fine

Tnx Nate, but that brings me to another question, when do you load your version?

I'm actually using Liferay's version, but I couldn't put my jquery datatables loading in the theme cause it was loading before you load your version of jquery, so I put it on my custom portlet, it works fine like that, but for future reference, if I need it in more than 1 portlet, I would prefer to load it in my theme, so where should I load it?

Thanks again