Commom javascript for 2 portlet

[Ajeykumar HB, módosítva 11 év-val korábban]

Hi all,

is it possible 2 portlet having common javascript file, in that file can we write script that is used in 2 portlets. if is possible please tell me how, if not tell me the other way to achive this.

Thanks and regards
Ajeykumar.

[Sagar A Vyas, módosítva 11 év-val korábban]

Ajeykumar HB:

Hi all,

is it possible 2 portlet having common javascript file, in that file can we write script that is used in 2 portlets. if is possible please tell me how, if not tell me the other way to achive this.

Thanks and regards
Ajeykumar.

Hi Ajeykumar ,

Yes it is possible.

You can use single js file at global level.

You need to put that js file in theme/js/ folder which will load that js file at global level.

Step 1 ) Put respective js file into theme/js/

Step 2 ) Include it in portal_normal.vm file

E.x <script type="text/javascript" src="$javascript_folder/custom.js"></script>

Hope this clear.

Thanks,
Sagar Vyas

[Jitendra Rajput, módosítva 11 év-val korábban]

You can also try with below approach .

Adding a JavaScript to Every Page

Hope this Helps ..!!
Jitendra

[DarshanKumar N Bhatia, módosítva 11 év-val korábban]

Hi,

If u want to apply JavaScript to portlet only then better to defined /call then within portlet.

Using :

<portlet>
<portlet-name>Test</portlet-name>
<icon>/icon.png</icon>
<instanceable>false</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
<header-portal-javascript>............. </header-portal-javascript>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>Test-portlet</css-class-wrapper>
</portlet>

if u want to share a common JavaScript among two/more portlet using theme :
If both portlets (or multiple instance of same portlets ) are in same page ..and they are calling same common function (with parameter )
defined in js file then conflicts may occurs. ( particular when there is hide or show of div by Id.... )


Another solution is : defined ur javascript fuction in jsp file :
like :

<script>
function <portlet:namespace />myFunction() {
alert("<portlet:namespace />myButton was clicked" );
}
</script>

<input type="button" id="<portlet:namespace />myButton" onclick="<portlet:namespace />myFunction();">

This way your java-script function will be only portlet specific .

In common.jsp , I have all my JavaScript function and used to include in portlet by <%@ include file="/html/comman.jsp" %>

So this way u can share JavaScript function among many portlet ,either at same page or different page .

Uniqueness of Javascript function among different portlet is maintained by <portlet:namespace />

See Also http://www.liferay.com/community/wiki/-/wiki/Main/Portlet+namespace

[Sagar A Vyas, módosítva 11 év-val korábban]

Agree with DarshanKumar.

Loading js file at global level is not good idea for everytime. cause it will load on every page in background.

But if js file you are going to use in 2 to 3 pages then I would recommend to put in theme.

Thanks,
Sagar Vyas

[Lam Le, módosítva 10 év-val korábban]

Hi mate,
I have the opposite issue with javascript, I use some js UI library in one portlet and it interferes with other portlets or even the whole portal. Is there a way in liferay which I can specify the JS file to be used locally in one portlet only?
Thanks,Lam

[Sagar A Vyas, módosítva 10 év-val korábban]

Lam Le:

Hi mate,
I have the opposite issue with javascript, I use some js UI library in one portlet and it interferes with other portlets or even the whole portal. Is there a way in liferay which I can specify the JS file to be used locally in one portlet only?
Thanks,Lam

Hi Lam,

If I understand your requirement correctly then here is your ans.

You can load your js at portlet level ,you just need to import it either on header or footer level inyour portlet's liferay-portlet.xml

<liferay-portlet-app>
	<portlet>
		<portlet-name>XYZ</portlet-name>
		<icon>/icon.png</icon>
		<instanceable>false</instanceable>
		<private-request-attributes>false</private-request-attributes>
		<private-session-attributes>false</private-session-attributes>
		<requires-namespaced-parameters>false</requires-namespaced-parameters>
		[b]<header-portlet-css>/css/main.css</header-portlet-css>
		<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>[/b]
	</portlet>
<liferay-portlet-app>
</liferay-portlet-app></liferay-portlet-app>

Thanks,
Sagar Vyas

[Lam Le, módosítva 10 év-val korábban]

Hi Sagar,
Thank you for your help.
That was what I did but I still run into problem.
I used a mobile js library in one portlet using similar config you posted and that library was applied to the whole portal, affecting its layout, animation, etc.

My question is whether there is a "sandbox" implementation in liferay which will isolate portlet js files, restrict their scope so that they will not affect other portlets or portal.
Thanks, Lam

[Sagar A Vyas, módosítva 10 év-val korábban]

Best of my knowledge if a js file which is included in portlet level will remain to portlet scope/ page scope only.

It will be not at portal level.

Thanks,
Sagar Vyas