include the jquery in ext plugin

[Ashok Sangi, modifié il y a 11 années.]

Hi all,

how can i include jquery in ext-plugin

[amit doshi, modifié il y a 11 années.]

Hi Ashok,

Can you plz let me know why u required to do it so?

Because if we want to make any portlet then we can make it in plugins or need to change the jsp then you can do it in Hook.
Then in which circumstances you required to write jquery in EXT.

And if you required to add jquery in EXT then you can do in the following path

F:\Projects\6.1sp1\source\plugins\ext\sample-ext\docroot\WEB-INF\ext-web\docroot\js

Create js folder and put your jquery file in it and also include it in your jsp or you can include it through liferay-portlet-ext.xml in that you need to put your respective portlet tag and include tag like <footer-portlet-javascript> or <header-portlet-javascript> it depends on your portet need.

Hope it Helps.

Thanks & Regards,
Amit Doshi

[David H Nebinger, modifié il y a 11 années.]

It is easier to handle this via a theme plugin or a hook plugin.

EXT plugins have special deployment requirements/limitations that will make this difficult.

[Hitoshi Ozawa, modifié il y a 11 années.]

If you want to make jquery available to all portlets, just include it in your theme as David said. Otherwise, just include it in your portlet. If you absolutely want to include jquery in ext plugin, just include it in classic theme.

[Kate Smith, modifié il y a 9 années.]

Hi all,

I am attempting to use jQuery in the ext plugin (Liferay 6.1.30).

Following the advice in this thread, I have tried to include it via my theme without success : jQuery is not being recognised in my jsp (situated in the "liferay-ext-web" project). I get an "$ is not defined" error.

These are the steps I have followed :

* In my theme project, I created two new folders, "templates" and "js" in the "_diffs" folder.
* I copied the portal_normal.vm template from the "templates" folder to the "_diffs\templates" folder.
* I added the following lines (#js) to this copy of portal_normal.vm :

	<title>$the_title - $company_name</title>
	$theme.include($top_head_include)
	
	#js("$javascript_folder/jquery-1.9.1.min.js")
	#js("$javascript_folder/jquery.dataTables.js")

* I added the .js files "jquery-1.9.1.min.js" and "jquery.dataTables.js" to the "_diffs\js" folder.
* I added some jQuery to my jsp in the "liferay-ext-web" project.
* I redeployed the application.

I have also tried referencing the .js files in several different ways in the .vm but to no avail :

	<title>$the_title - $company_name</title>
	$theme.include($top_head_include)
	
	<script type="text/javascript" src="$javascript_folder/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="$javascript_folder/jquery.dataTables.js"></script>

I would be very grateful if anyone has any suggestions as to what might be missing.

Thanks in advance,

Kate

[David H Nebinger, modifié il y a 9 années.]

Kate you cannot use the $ shortcut because of collisions with aui. Switch to the jquery() syntax and you'll be fine.

[Kate Smith, modifié il y a 9 années.]

David,

Thank you very much for your reply.

I have tried your suggestion and replaced $ by jQuery :

 jQuery(document).ready(function() {
    jQuery('#example').dataTable();
} );

instead of

$(document).ready(function() {
    $('#example').dataTable();
} );

Unfortunately I am now getting the error "jQuery is not defined".
It would seem the .js files are not being detected by the ext project.

Would you have any other ideas ?

Thanks in advance,

Kate

[Muthukumar Thangavinayagam, modifié il y a 9 années.]

Kate,

It looks like jQuery conflicts,

Below the links will help you.

https://www.liferay.com/community/forums/-/message_boards/message/3815152
https://www.liferay.com/web/julio.camarero/blog/-/blogs/can-i-have-different-jquery-versions-in-liferay-

Thanks,
Muthukumar Thangavinayagam

[Kate Smith, modifié il y a 9 années.]

Muthukumar,

Thank you for the links.

I have tried adding the following to avoid conflicts but my problem is that unfortunately even the key word "jQuery" is not being recognised in my jsp :

var $jq = jQuery.noConflict(true); 

Kate

[David H Nebinger, modifié il y a 9 années.]

Kate Smith:

Unfortunately I am now getting the error "jQuery is not defined".

When you view source for the page, are you seeing the jquery include somewhere?

[Kate Smith, modifié il y a 9 années.]

David,

No I have inspected the page and as I suspected the two jquery files I am trying to add are not present.

Thank you in advance for any further suggestions....

Kate

[David H Nebinger, modifié il y a 9 années.]

So from your first, post, if I have it correctly:

1. You added jquery to your theme.
2. You are trying to incorporate the use of jquery into the portal via an EXT plugin?

So #1 is right (although I typically add in the footer rather than the header, but obviously that will depend upon requirements). It's the right place to put it, but note that since it is in your theme your theme must be selected for a page for jquery to be included.

The EXT plugin usage seems kind of odd. Most of the time I try to avoid the EXT plugin and use hooks instead, but in either case like the note above says the theme would have to be applied to the page for jquery to be pulled in and available.

Since you're not seeing jquery include in the source, is the theme selected for the page in question?

[Kate Smith, modifié il y a 9 années.]

David,

Yes, your analysis is correct.

I have no choice but to use the EXT plugin as we have made project-specific changes to the "Users and organizations" section of the administration module (addition of a new sub-section under "User information").

You are right, our custom theme (where I have added the jQuery files) is not applied to this page, which uses the classic Liferay theme.
Apologies, being new to Liferay I did not appreciate that I would have to apply our theme to benefit from the jQuery (I thought it would become available everywhere in the portal).

I understand Hitoshi Ozawa's comment better now :

If you want to make jquery available to all portlets, just include it in your theme as David said. Otherwise, just include it in your portlet. If you absolutely want to include jquery in ext plugin, just include it in classic theme.

I have essentially gone for the first option when what I'm really after is the last.

Please could you give me a couple of pointers on how to modify the classic theme to include jQuery ?

Many thanks.

Kate

[David H Nebinger, modifié il y a 9 années.]

Normally I just create a custom theme that uses classic as the parent. Repeat the same process you've already started (_diffs folder w/ template change, added js files, etc) but be sure to use the classic templates to edit from.

Deploy your theme and change from classic to your custom theme.

Yes this is better than trying to modify the classic theme as you want to ensure that (as much as possible) your code will work in future releases.

[Kate Smith, modifié il y a 9 années.]

David,

Many thanks for your advice.

In order to test the results before creating another theme I found a way to apply our existing custom theme to the Control Panel where my jsp is situated (it is not actually a separate page in the Liferay sense) :

Control Panel → Portal Settings → Display Settings → Look and Feel → Default Control Panel Theme

(It turns out I would be wanting to "inherit" from the "Control panel" theme rather than the "Classic" theme).

Even with our custom theme selected, the jQuery scripts were still not loaded. The only .js being loaded up with the theme was "main.js".

It seems that unfortunately I am stuck in a rut trying to achieve what I want via a theme.
Is there any other way of including jQuery in the EXT plugin that I could try ?

Thanks again for your help,

Kate

[Kate Smith, modifié il y a 9 années.]

I have tried the method suggested by Amit Doshi in his original reply to this thread :

And if you required to add jquery in EXT then you can do in the following path

F:\Projects\6.1sp1\source\plugins\ext\sample-ext\docroot\WEB-INF\ext-web\docroot\js

Create js folder and put your jquery file in it [...]

I put my two jQuery files in a js folder that I added at the following location : webapps\my-liferay-ext\WEB-INF\ext-web\docroot\

Unfortunately this method didn't work either, the scripts were still not loaded up.

Thank you in advance if anyone has any further suggestions.

Kate

[Kate Smith, modifié il y a 9 années.]

Hi all,

Just wanted to let you know that we have found another way round our problem with adding jQuery.
It turns out that we are able to add our new jsps for the Control Panel via the hook and not via the EXT plugin as we originally thought.

We have therefore added the jQuery files to a new folder "js" under our-hook\webapp\custom_jsps\html
and modified the portal-ext.properties file to include the new scripts.

This time the scripts are being correctly loaded in our page

Thanks for all your time and help in trying to solve the problem, much appreciated.

Kate

[Jorge Páez, modifié il y a 9 années.]

Hello all, im just curious about this since i have been able to include jquery 2.1 in Liferay 6.2 without any problems and in a very smooth way, so smooth that im afraid im doing something weird or just wrong (it works tho).

In my theme: I have added the jquery files to /_diffs/js and modify the portal_normal.vm (or ftl if that's your case) adding this line:
#js("$javascript_folder/jquery-2.1.1.min.js")

Im adding the jquery code inside the portal normal and it's working for me, so i don't know if this call will allow me to use jquery in any part of the portal or portlets, just thinking why it was so easy for me and it seems to be a pain in the a for a lot of people. Any comments will be really appreciated, as you can figure out im also a newbie when it comes to liferay 6.2.

many thanks.

[Kate Smith, modifié il y a 9 années.]

Hi Jorge,

My original problem was that I needed to use jQuery in the EXT plugin, which uses a separate theme (control panel theme) so adding jQuery to our own theme did not solve the issue.

Your method seems fine and is how I went about adding jQuery to our theme when I was testing out solutions.
I think you should be able to use jQuery anywhere you have that theme.

Regards,

Kate

[Jorge Páez, modifié il y a 9 années.]

Thanks a lot for your feedback Kate, now i understand the whole scenario.