javascript

[John Nguyen, geändert vor 11 Jahren.]

I've read so many threads about methods to include javascripts to the site; however I am unable to do this successfully. I've tried it through the liferay-portlet.xml as well as the portal_normal.vm and its not working.

For liferay-portlet.xml, I'm adding this:

<header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js</header-portlet-javascript>

I'm not quite sure where it is I need to add it in this file, but I've added right before the

For portal_normal.vm, I added:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

before the

Any help would be great,

Thanks!

[Hitoshi Ozawa, geändert vor 11 Jahren.]

Just download the js file and put it in your js directory instead of trying to get it from the web site.

[Andrew Jordan, geändert vor 8 Jahren.]

Yes - but what about CDN's? Where do we place these for say a single portlet?

[David H Nebinger, geändert vor 8 Jahren.]

Hmm, reviving the dead thread for an off-topic discussion, nice one...

CDN is not involved. If you've put the the scripts/css in the portlet war and referenced via the liferay-portlet.xml file, the CDN is never involved. The portal will be aggregating those files into the whole portal page for eventual return. The CDN would not be referenced by default.

Either move the content to the theme (so you can externalize) or try a caching appliance such as a Varnish server to manage active caching.

[Vishal Panchal, geändert vor 11 Jahren.]

Hi John Nguyen,

As per your post I think u want to add .js file in theme and wanted to use it in your portal_normal.vm file .
If I got you right than following r the steps you may follow.
1) Download the js file
2) in my-theme/docroot/_diffs/js folder, added the file
3) In protal_normal.vm file you can access the js file using following tag
<script src="$javascript_folder/jquery.min.js.js" type="text/javascript" ></script>


Hope It would be helpful to you...


Thanks & Regards,
Vishal R. Panchal

[Priyanka Dhingra, geändert vor 11 Jahren.]

Hi John Nguyen,
You can keep the file in your portlet also
under the docroot->js folder
and use it as

<script type="text/javascript" src="/xxx-portlet/js/jquery.min.js"></script>

[David H Nebinger, geändert vor 11 Jahren.]

Priyanka Dhingra:

Hi John Nguyen,
You can keep the file in your portlet also
under the docroot->js folder
and use it as

<script type="text/javascript" src="/xxx-portlet/js/jquery.min.js"></script>

Wrong wrong wrong. If you have multiple copies of your portlet on a page, each copy is going to load the script. That is why you put it into the liferay-portlet.xml file, because Liferay will ensure only one copy of the script is loaded on the page, regardless of what portlets on the page are using it.

[Priyanka Dhingra, geändert vor 11 Jahren.]

Thanks David for correcting me.
But one ques.....Keeping in liferay-portlet.xml is better or keeping in a jsp page like init.jsp...
Since we have many portlets under one project all including the init.jsp.
so, putting in liferay-portlet.xml for each portlet is better or in a common init.jsp of the project???

[David H Nebinger, geändert vor 11 Jahren.]

in liferay-portlet.xml. When the page is being rendered, all of the entries are checked and only one script include will be on the rendered page. Putting it in init.jsp still means that every portlet instance (which has init.jsp pulled in) would still try to reference the same script.

[Priyanka Dhingra, geändert vor 11 Jahren.]

Thanks David and Hitoshi for sapring a minute to explain and enlightening upon a very basic but frequently usable concept.

[Hitoshi Ozawa, geändert vor 11 Jahren.]

What David is saying is this, putting it in init.jsp is the same thing as putting it in each of your jsp file because you're actually just including it. If the portlet is instanceable (that is, something like web content portlet that can be placed several times in a page), each instance of that portlet is going to try to load the js file.
If you put it in the liferay-portlet.xml file, liferay will only load the js file once. Thus, the page is going to load faster.

[Vishal Panchal, geändert vor 11 Jahren.]

Hi Hitoshi Ozawa,

Thanks I was much explaining.
I Got it perfectly.


Thanks & Regards,
Vishal R. Panchal

[Priyanka Dhingra, geändert vor 11 Jahren.]

David H Nebinger:

Priyanka Dhingra:

Hi John Nguyen,
You can keep the file in your portlet also
under the docroot->js folder
and use it as

<script type="text/javascript" src="/xxx-portlet/js/jquery.min.js"></script>

Wrong wrong wrong. If you have multiple copies of your portlet on a page, each copy is going to load the script. That is why you put it into the liferay-portlet.xml file, because Liferay will ensure only one copy of the script is loaded on the page, regardless of what portlets on the page are using it.

I have 5 portlets and all of them are using almost 5 js files. If I'll keep in theme will that be better than keeping in liferay-portlet.xml ??? keeping in theme does'nt make it reload every time and make it slow??

[David H Nebinger, geändert vor 11 Jahren.]

Priyanka Dhingra:

I have 5 portlets and all of them are using almost 5 js files. If I'll keep in theme will that be better than keeping in liferay-portlet.xml ??? keeping in theme does'nt make it reload every time and make it slow??

You should put JS requirements into the theme only when they are site-wide requirements (because they will load on every page, regardless if one of your 5 portlets is on the page or not).

You could overcome this by creating a special theme for the page(s) the portlets are on, one that declares your normal theme as the parent in it's build.xml file. You'd have only one override in _diffs (to include the javascript files) plus the JS files. This has a maintenance impact though (when you make changes to the normal theme, you must build and deploy both themes (so the special theme will include the changes from normal theme)).

If you don't want to use the JS on all pages and you don't want to maintain a special theme, then putting the JS in liferay-portlet.xml is the way to go.

[Jay Patel, geändert vor 11 Jahren.]

I know that keeping this in liferay-portlet.xml is always a good practice. But what I am not sure of is can we have multiple declaration of JS files in <header-portal-javascript>
OR <header-portlet-javascript> using comma or something. Does in latest version of Liferay, do they have this provision? Because often that it the case that one portlet may require multiple JS files & they may not required in the whole portlet & hence not required to keep in Theme.

-Jay.

[David H Nebinger, geändert vor 11 Jahren.]

According to the code in PortletLocalServiceImpl._readLiferayPortletXML(), you use multiple <header-portlet-javascript /> tags in liferay-portlet.xml and they will each be used.

Same thing w/ the header-portal-javascript, header-portal-css, header-portlet-css and the associated footer-* entities.

Oops, I guess you can infer the same thing by actually reading the liferay-portlet-app DTD...

[Jay Patel, geändert vor 11 Jahren.]

Thanks David, I had ignored DTD

[Hitoshi Ozawa, geändert vor 11 Jahren.]

Example loading jquery:

<header-portlet-css>/css/main.css</header-portlet-css>
<header-portlet-css>/css/ui-lightness/jquery-ui-1.8.17.custom.css</header-portlet-css>
<header-portlet-javascript>/js/jquery-1.7.1.min.js</header-portlet-javascript>
<footer-portlet-javascript>/js/jquery-ui-1.8.17.custom.min.js</footer-portlet-javascript>

[Priyanka Dhingra, geändert vor 11 Jahren.]

Thanks David.

[Priyanka Dhingra, geändert vor 11 Jahren.]

Hi,
I have tried to sum up everything in the following. hope It may be helpful to anyone facing the basic problems related to js files
http://michi-path.blogspot.in/2012/08/all-about-javascript-and-liferay.html