Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Martin Phee
Can't load js files in my portlet
October 27, 2011 7:32 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

The portlet leftNavLocations loads the file /js/lhn.js, but the aboutBPP porlet won't even though their configured exactly alike. What's up? I've been having this issue with numerous portlets and resort to linking to them directly.

This also goes for the css file defined below. I've commeted out the portlet that works, I've deleted the page and recreated, I've restarted, cleared the work area.

 1    <portlet>
 2        <portlet-name>aboutBPP</portlet-name>
 3        <icon>/icon.png</icon>
 4        <friendly-url-mapper-class>com.apolloglobal.liferay.portlets.support.CarbonFriendlyURLMapper</friendly-url-mapper-class>
 5        <friendly-url-mapping>about</friendly-url-mapping>
 6        <friendly-url-routes>about-routes.xml</friendly-url-routes>
 7        <maximize-edit>true</maximize-edit>
 8        <instanceable>false</instanceable>
 9        <header-portlet-css>/css/lhn.css</header-portlet-css>
10        <footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
11    </portlet>
12    <portlet>
13        <portlet-name>leftNavLocations</portlet-name>
14        <icon>/icon.png</icon>
15        <friendly-url-mapper-class>com.apolloglobal.liferay.portlets.support.CarbonFriendlyURLMapper</friendly-url-mapper-class>
16        <friendly-url-mapping>loc</friendly-url-mapping>
17        <friendly-url-routes>lhn-routes.xml</friendly-url-routes>
18        <maximize-edit>true</maximize-edit>
19        <instanceable>false</instanceable>
20        <header-portlet-css>/css/lhn.css</header-portlet-css>
21        <footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
22    </portlet>
Manikandan S
RE: Can load js files in my portlet
October 26, 2011 10:33 PM
Answer

Manikandan S

Rank: Expert

Posts: 492

Join Date: September 15, 2010

Recent Posts

Try
1<header-portlet-javascript>/js/lhn.js</header-portlet-javascript>
instead of
1<footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
Martin Phee
RE: Can load js files in my portlet
October 27, 2011 7:34 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

Interesting. I changed both and now it loads. Why?

If I create another portlet that needs these files will it break again?
Manikandan S
RE: Can load js files in my portlet
October 27, 2011 9:22 PM
Answer

Manikandan S

Rank: Expert

Posts: 492

Join Date: September 15, 2010

Recent Posts

Have a look out this blog and this blog
Martin Phee
RE: Can load js files in my portlet
October 28, 2011 4:57 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

Doesn't answer may question as to why header works and footer doesn't.
Manikandan S
RE: Can load js files in my portlet
October 28, 2011 5:12 AM
Answer

Manikandan S

Rank: Expert

Posts: 492

Join Date: September 15, 2010

Recent Posts

Generally we used to put javascript in <head></head> along with title and css.. but now to make render faster javascript is put into footer. Its your choice where u want to put. See this and you will know more here
Martin Phee
RE: Can load js files in my portlet
October 28, 2011 6:42 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

Mani kandan:
Generally we used to put javascript in <head></head> along with title and css.. but now to make render faster javascript is put into footer. Its your choice where u want to put. See this and you will know more here


Yes, I know. Did you read the thread?
Sagar A Vyas
RE: Can load js files in my portlet
October 28, 2011 6:51 AM
Answer

Sagar A Vyas

Rank: Liferay Master

Posts: 657

Join Date: April 17, 2009

Recent Posts

Martin Phee:

Interesting. I changed both and now it loads. Why?

If I create another portlet that needs these files will it break again?


Hi Martin,

As per best practices : "If you want to use some js file in more than one portlet then it would be better to keep your js file in theme which will make it globally for all "

Note : You can keep it in portal_normal.vm file of theme.

let me know if you would like to know more on this emoticon

Thanks,
Sagar Vyas
Martin Phee
RE: Can load js files in my portlet
October 28, 2011 6:59 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

Two portlets out of 50 need this. Seems foolish to put it in the theme. I already have the common js in there. This should only be loaded when needed. Hence the parameters in the the liferay-portlet.xml, but one works for both portlets while the other only works for one.

Just trying to figure out why it randomly works and will it stop working? This is becoming a large app and I can't just dump everything into the theme.
Sagar A Vyas
RE: Can load js files in my portlet
October 28, 2011 7:30 AM
Answer

Sagar A Vyas

Rank: Liferay Master

Posts: 657

Join Date: April 17, 2009

Recent Posts

Martin Phee:
Interesting. I changed both and now it loads. Why?

If I create another portlet that needs these files will it break again?


Hi Matin,

In order to answer of you Question :

All js files are depends of master js file (i.e. jquery-1.5.1.min.js) ignore version in this case.

Now lets take a example you are using js1 which is your own portlet js file.

Now at the time of loading when some function make use of js1 file and your master js file is not loaded yet then it will not able to run.

And your function will not work and it seems that js1 file is not loaded.

In this case you need to make sure that your Master js file should load first before any js load or use.

So, Generally we recommend keep your master js file on theme so it will load very first before any other js are loaded.

Now in your case even if you kept your js file into footer it was not working , and when you kept in header its work as you expected.

Reason could be like your are using some function which are try to access this js file which is not loaded yet cause it is at footer.

so when you keep it at header it will be available early at you page but it will increase load on page.

Conclusion "You should keep your own porlet js at footer but make sure some function will use that js after js loaded and Master js file should be loaded on early base"

Thanks,
Sagar Vyas
Martin Phee
RE: Can load js files in my portlet
November 5, 2011 7:05 AM
Answer

Martin Phee

Rank: Junior Member

Posts: 25

Join Date: May 9, 2011

Recent Posts

? I already understand javascript...

Now my js and css aren't loading again... Any other ideas besides including them in the theme? This is really becoming a PITA.