1. Home
  2. Development
  3. RE: Adding Javascript to every page

RE: Adding Javascript to every page

Lior Hadaya, modified 13 Years ago.
Adding Javascript to every page
Regular Member Posts: 138 Join Date: 1/24/12 Recent Posts
Hi,
I'm using Liferay EE version 6.1.10.
I've been searching for a way to add my own custom Javascript (also include for external JS files) to every page in the portal. I want to have a way to add JS that will affect all pages, whenever the need arises.

I tried to follow this tutorial http://www.liferay.com/web/samuel.kong/blog/-/blogs/adding-a-javascript-to-every-page and though it looked promising it didn't work for me unless I changed use-default-template to true in liferay-portlet.xml and manually added the portlet to the page. The trick there with setting layout.static.portlets.all in the properties file seemed to have no effect for me.

Any help on how to accomplish this would be greatly appreciated, thanks!
thumbnail
Puneet Upadhyay, modified 13 Years ago.
RE: Adding Javascript to every page
Regular Member Posts: 234 Join Date: 10/22/11 Recent Posts
Hi Lior,

Add your java script code to init.jsp which is reside at /html/portal/init.jsp.
It will reflect on every jsp of the portal.
thumbnail
Hitoshi Ozawa, modified 13 Years ago.
RE: Adding Javascript to every page
Liferay Legend Posts: 7942 Join Date: 3/24/10 Recent Posts
Add your java script code to init.jsp which is reside at /html/portal/init.jsp.
It will reflect on every jsp of the portal.


This will require a hook. Probably easier to use a theme here in case there's another hook.
Lior Hadaya, modified 13 Years ago.
RE: Adding Javascript to every page
Regular Member Posts: 138 Join Date: 1/24/12 Recent Posts
Hitoshi Ozawa:
Add your java script code to init.jsp which is reside at /html/portal/init.jsp.
It will reflect on every jsp of the portal.


This will require a hook. Probably easier to use a theme here in case there's another hook.


Hi, can you explain about the required hook? I don't want to place logic in my theme.

Thanks
thumbnail
Hitoshi Ozawa, modified 13 Years ago.
RE: Adding Javascript to every page
Liferay Legend Posts: 7942 Join Date: 3/24/10 Recent Posts
I think Puneet explained what needs to be modified in a hook.
thumbnail
amit doshi, modified 13 Years ago.
RE: Adding Javascript to every page
Liferay Master Posts: 550 Join Date: 12/29/10 Recent Posts
Hi,

Add that JavaScript file in theme(portal_normal.vm).

Hope it helps.

Thanks & Regards,
Amit Doshi
Lior Hadaya, modified 13 Years ago.
RE: Adding Javascript to every page
Regular Member Posts: 138 Join Date: 1/24/12 Recent Posts
Thanks for the quick replies!

Puneet - your idea definitely works, which is great but I see that the JS code is executed several times when the page loads. I added a 
<script src="my_javascript_file.js" type="text/javascript"></script>
at the top of init.jsp and I see that it gets included like 10 times (when viewing the loaded scripts in the browser). Why is that?

Amit, I am trying not to place logic in my theme since themes can change.
thumbnail
amit doshi, modified 13 Years ago.
RE: Adding Javascript to every page (Answer)
Liferay Master Posts: 550 Join Date: 12/29/10 Recent Posts
Hi Lior,

I also have the same requirement as you have.
So for that reason i made one hook and we have changed the top_js-ext.jspf file.
Here I am specifying with the code of liferay-hook.xml and also the code in the top_js.ext.jspf

In liferay-hook.xml


<!--?xml version="1.0"?-->


<hook>
	<custom-jsp-dir>/WEB-INF/jsp</custom-jsp-dir>
</hook>


In jsp make the folder structure as html/common/themes/top_js-ext.jspf same as we have inside ROOT Folder
and then written the below code to include js file in it.


<script type="text/javascript" src="/html/js/jquery/jquery-1.7.1.min.js"></script>


It will add js file only one time, not 10 times. Please check it and let me know.

Thanks & Regards,
Amit Doshi
Lior Hadaya, modified 13 Years ago.
RE: Adding Javascript to every page
Regular Member Posts: 138 Join Date: 1/24/12 Recent Posts
Thanks Amit!

That worked for me emoticon
Eduardo Sanfiorenzo, modified 7 Years ago.
RE: Adding Javascript to every page
New Member Posts: 11 Join Date: 8/17/18 Recent Posts

Hi, Im looking for help for adding js libraries on multiple pages. Specifically moment.js. Have read multiple forum posts and the official guide for my Liferay version(7.0ga7) but none of them have been of any help. please guide me on the current practical way of adding js libraries across multiple pages please.

thumbnail
Ivan Zaera, modified 7 Years ago.
RE: Adding Javascript to every page
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

Hi Eduardo:

 

As of 7.1, we have included a new functionality that allows declaring resources to be included in every page in your bnd.bnd file. You can see an example of its use in this file -> https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-js/frontend-js-web/bnd.bnd

 

Basically you have two headers: Liferay-JS-Resources-Top-Head-Authenticated and Liferay-JS-Resources-Top-Head. The first one included the latter so, if you put a resource in Liferay-JS-Resources-Top-Head, you don't need to relist it in Liferay-JS-Resources-Top-Head-Authenticated.

The paths are relative to the web context path of the module, so just place your JS files inside the META-INF/resources folder of your JAR and write paths starting at that folder.

Hope this helps,

Ivan