Liferay and JQuery integration

[11年前 に Rajesh Murli Mirchandani Mirchandani によって更新されました。]

As you can integrate JQuery in Liferay the best way I have found to do it is:

1.) Download JQuery
2.) Optional: Download JQuery plug-ins
3.) Copy JQuery and JQuery plug-ins into you portlet project
4.) Update the file liferay-portlet.xml as it looks like:
<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>MyPortelt</portlet-name>
<icon>/icon.png</icon>
<instanceable>false</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css> <!-- Default CSS -->
<header-portlet-css>/ria/jquery-ui/css/smoothness/jquery-ui-1.8.19.custom.css</header-portlet-css> <!-- JQuery CSS -->
<header-portlet-css>/ria/fullcalendar/fullcalendar.css</header-portlet-css> <!-- Full Calendar 1.5.3 CSS -->
<header-portlet-javascript>/ria/jquery-ui/js/jquery-1.7.1.min.js</header-portlet-javascript> <!-- JQuery JS -->
<header-portlet-javascript>/ria/jquery-ui/js/jquery-ui-1.8.19.custom.min.js</header-portlet-javascript> <!-- JQuery JS -->
<header-portlet-javascript>/ria/fullcalendar/fullcalendar.min.js</header-portlet-javascript> <!-- Full Calendar 1.5.3 JS -->
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript> <!-- Default JS -->
<css-class-wrapper>MyPortlet-portlet</css-class-wrapper>
</portlet>
<role-mapper>
<role-name>administrator</role-name>
<role-link>Administrator</role-link>
</role-mapper>
<role-mapper>
<role-name>guest</role-name>
<role-link>Guest</role-link>
</role-mapper>
<role-mapper>
<role-name>power-user</role-name>
<role-link>Power User</role-link>
</role-mapper>
<role-mapper>
<role-name>user</role-name>
<role-link>User</role-link>
</role-mapper>
</liferay-portlet-app>

Regards.
Rajesh Murli

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

Note that jQuery is kind of a heavyweight javascript lib to be loading on a per-portlet basis.

Instead it is often better to integrate into your theme.

To do this you would put the jQuery and plugins into your theme plugin in docroot/_diffs/js directory.

Then in your portal_normal.vm, add

#js ("$javascript_folder/jquery-1.7.1.min.js")

just above the closing body tag at the bottom of the file. Repeat for any plugins you want to include.

This will include jQuery on all pages, but typically if you're using it for one portlet you plan on using it on multiple portlets.

[11年前 に Hitoshi Ozawa によって更新されました。]

This will include jQuery on all pages, but typically if you're using it for one portlet you plan on using it on multiple portlets.

To be more precise, jquery will be included in all pages where the theme is used. So, just create a theme and inherit it to create a jquery theme
and use the jquery included theme whenever you need to use jquery or allow portlets with jquery to be placed on a page.

[11年前 に Jitendra Rajput によって更新されました。]

It is also suggested that you include jquery directly from google code base (from network) instead to copying it into theme/portlet.

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

Jitendra Rajput:

It is also suggested that you include jquery directly from google code base (from network) instead to copying it into theme/portlet.

If you feel your code will be immune to possible changes in jQuery, then go ahead. If, however, your site is working you may introduce instability by doing such a thing.

Additionally you must know your environment. If your corp environment is locked down, the end user's browser might be able to hit your Liferay site but may not have access to the google site for jquery. These days I don't think this is a reality anymore, but I remember when it was...

Choice is yours whether to host it or use the google cache...

[11年前 に Pablo Antonio Zamora Ortiz によって更新されました。]

what is the difference between <header-portlet-javascript> and b <footer-portlet-javascript>?

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

when it is loaded. if you do it as header, content will not be rendered until js loads. with footer, content will render, then js will load...

[10年前 に Ettore Giallaurito によって更新されました。]

Hi everybody,

I know the post is a bit dated, but I'm a weird problem regarding JQuery with Spring portlet on Liferay 6.0.2 EE.

As matter of fact I'm using the dataTable JQuery plugin which works fine with Chrome and IE 8 while deployed under my local instance of Liferay Tomcat 7 bundle.
With FF 18 under the same ENV is not not working properly.

What happens is that the DataTable library seems not to be present, while browsing with FF, since by trying to call the function on a table $('#workflow_info').datatable(); I'm getting datatable() is not a function, so JQuery loaded but not the DataTable. If I only use the selector $('#workflow_info') the console will display the correct object.

In an other scenario, where there is Apache behind tomcat bundle for Liferay 6.0.2 EE, Chrome is still working properly while in this case neither FF nor IE are (even worse than in my local ENV, neither IE working).

I've properly added the javascript in the file liferay-portlet.xml for each portlet like this "<header-portlet-javascript>/js/jquery-1.4.4.min.js</header-portlet-javascript>" (is it possible to add more js library by adding multiple row of <header-portlet-javascript>??),
put the library under doocRoot/js, also the CSS one, since the dataTable plugin has its own folder structure (would it be ok anyway, or the fact that I don't put the CSS under doocRoot/css might create issue?). Also I can see the reference to CSS and JS within the <head> tag of my portlets.

Any help would be very much appreciated, I'm stuck with this.

Regards,
Ettore.

[10年前 に Ettore Giallaurito によって更新されました。]

Ettore Giallaurito:

Hi everybody,

I know the post is a bit dated, but I'm a weird problem regarding JQuery with Spring portlet on Liferay 6.0.2 EE.

As matter of fact I'm using the dataTable JQuery plugin which works fine with Chrome and IE 8 while deployed under my local instance of Liferay Tomcat 7 bundle.
With FF 18 under the same ENV is not not working properly.

What happens is that the DataTable library seems not to be present, while browsing with FF, since by trying to call the function on a table $('#workflow_info').datatable(); I'm getting datatable() is not a function, so JQuery loaded but not the DataTable. If I only use the selector $('#workflow_info') the console will display the correct object.

In an other scenario, where there is Apache behind tomcat bundle for Liferay 6.0.2 EE, Chrome is still working properly while in this case neither FF nor IE are (even worse than in my local ENV, neither IE working).

I've properly added the javascript in the file liferay-portlet.xml for each portlet like this "<header-portlet-javascript>/js/jquery-1.4.4.min.js</header-portlet-javascript>" (is it possible to add more js library by adding multiple row of <header-portlet-javascript>??),
put the library under doocRoot/js, also the CSS one, since the dataTable plugin has its own folder structure (would it be ok anyway, or the fact that I don't put the CSS under doocRoot/css might create issue?). Also I can see the reference to CSS and JS within the <head> tag of my portlets.

Any help would be very much appreciated, I'm stuck with this.

Regards,
Ettore.

Hi Guys,

can't believe but the problem was that I was importing the DataTables plugin by using back slashes instead of the forward ones in this way:
<header-portlet-javascript>/js/DataTables-1.9.4/media/js/dataTables.js</header-portlet-javascript> Right one
<header-portlet-javascript>/js/DataTables-1.9.4/media\js\dataTables.js</header-portlet-javascript> Wrong one

The weird thing is that IE on my local was understanding the path anyway, while IE on the remote ENV was not.

Anyway all sorted.

[11年前 に Priyanka Dhingra によって更新されました。]

Here in the following link some reasons are mentioned for "letting the google host the JQuery" and where all the .js lib should be placed
http://michi-path.blogspot.in/2012/08/all-about-javascript-and-liferay.html