Adding Javascript to every page

[Lior Hadaya, modificado hace 13 años.]

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!

[Puneet Upadhyay, modificado hace 13 años.]

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.

[Hitoshi Ozawa, modificado hace 13 años.]

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, modificado hace 13 años.]

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

[Hitoshi Ozawa, modificado hace 13 años.]

I think Puneet explained what needs to be modified in a hook.

[amit doshi, modificado hace 13 años.]

Hi,

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

Hope it helps.

Thanks & Regards,
Amit Doshi

[Lior Hadaya, modificado hace 13 años.]

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.

[amit doshi, modificado hace 13 años.]

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, modificado hace 13 años.]

Thanks Amit!

That worked for me

[Eduardo Sanfiorenzo, modificado hace 6 años.]

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.

[Ivan Zaera, modificado hace 6 años.]

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