Multiple jQuery in LR 5.2.x

[Chris Chan，修改在12 年前。]

Hi,

I'm trying to use a jQuery library in LR 5.2.x but it requires jQuery 1.4+. But LR 5.2.x uses jQuery 1.2.6.
I've seen the blog post (http://www.liferay.com/web/julio.camarero/blog/-/blogs/5224020) and subsequent wiki (http://www.liferay.com/community/wiki/-/wiki/Main/Several+jQuery+versions+within+Liferay) but I can't seem to get it to work according to those steps.

Has anyone been able to successfully do this? Could you provide some additional insight on how this was done?

Thanks in advance!
Chris

[Chris Chan，修改在12 年前。]

Can anyone help?
Thanks!

[Olaf Kock，修改在12 年前。]

"It doesn't work" is kind of a generic inquiry. To get more specific help, you might want to tell us what you actually did from those posts and what the behaviour is that you currently experience.
And: You might want to consider upgrading to 6.0 as AUI brings some more advanced possibilities of namespacing different libraries and different versions.

[Chris Chan，修改在12 年前。]

Sorry about the lack of details.

I've actually tried the code snippets that were provided in the two links I sent. The following is the code snippet I tried adding to the jsp:

<script type="text/javascript" src="/html/js/jquery16/jquery.js"></script> //jQuery 1.6
<script type="text/javascript">

var jq = jQuery.noConflict(true);

</script>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>  //Shipped jQuery

I've also removed jquery.js from the portal-ext.properties under the javascript.barebones.files
However, when I try this method, the portal's functionality that requires jquery doesn't work, which is understandable because jquery has been removed and only loaded for the portlet.

When adding the code:

<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>  //Shipped jQuery

to the top_head.jsp and keeping the previous code snippet (minus the above snippet), the portal's jquery still doesn't seem to catch on.

Finally, I tried adding the OOTB jquery load in the top_head.jsp like the above and in the portlet, I added the inclusion of the new jquery.js in the liferay-portlet.xml for my portlet:

<header-portlet-javascript>/html/js/jquery16/jquery.js</header-portlet-javascript>

and adding

<script type="text/javascript">

var jq = jQuery.noConflict(true);

</script>
<script type="text/javascript" src="/html/js/jquery/jquery.js"></script>  //Shipped jQuery

to my jsp. Still no dice as the portal's jquery doesn't seem to work still.

Any suggestions?

Thanks!

[Chris Chan，修改在12 年前。]

Also, I can't upgrade to LR 6.0 (trust me I would if I could) but has their product built on 5.2.x and aren't planning on migrating anytime soon.

I've developed in 6.0 and I agree, it's much better but I have to work with what I have.

Thanks in advance!

[kaante dost，修改在12 年前。]

Hi Guys,

I was also facing the issue when trying to have jQuery in custom portlet with Liferay 5.2.3, I am able to solve this issue, it was a small fix, but bit trickey.

Here is what I did:

Added the following code in top_js.jspf:


<script type='text/javascript' src='/html/js/jquery15/jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

$JQ_1 = jQuery.noConflict();

</script>

1st point to be noted is i have used single quotes when including javascript, as type='text/javascript' I was using double quotes. this way Liferay is able to load the jQuery I wanted to include.

2nd change that I have made is edited the jQuery js for plug-in that I wanted to use, and replaced jQuery with $JQ_1.

I hope this will help you to resolve the issue.

Thanks,
Ravikant Kadbe

[Pranay R Patadiya，修改在12 年前。]

Hi,
You can have more idea about noConflict over Here.

Let me know if you want anything else.

Thanks,
Pranay

[Jitendra Rajput，修改在12 年前。]

Hi Chris ,

You can try following code. After you import new jQuery in your jsp of the portlet use this code in script tag.

var myjQuery = jQuery.noConflict(true) ;

you can use whatever name you prefer instead myjQuery.

Now to use jQuery function of newly added plugins use this namespace. For example dialog is the function of your jQuery plugin.

myjQuery.dialog() instead of jQuery.dialog();


Jitendra