Forums

angle-left Back

RE: Can load js files in my portlet

MP
Martin Phee, modified 6 Years ago.

Can't load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 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.

    <portlet>
        <portlet-name>aboutBPP</portlet-name>
        <icon>/icon.png</icon>
        <friendly-url-mapper-class>com.apolloglobal.liferay.portlets.support.CarbonFriendlyURLMapper</friendly-url-mapper-class>
        <friendly-url-mapping>about</friendly-url-mapping>
        <friendly-url-routes>about-routes.xml</friendly-url-routes>
        <maximize-edit>true</maximize-edit>
        <instanceable>false</instanceable>
        <header-portlet-css>/css/lhn.css</header-portlet-css>
        <footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
    </portlet>
    <portlet>
        <portlet-name>leftNavLocations</portlet-name>
        <icon>/icon.png</icon>
        <friendly-url-mapper-class>com.apolloglobal.liferay.portlets.support.CarbonFriendlyURLMapper</friendly-url-mapper-class>
        <friendly-url-mapping>loc</friendly-url-mapping>
        <friendly-url-routes>lhn-routes.xml</friendly-url-routes>
        <maximize-edit>true</maximize-edit>
        <instanceable>false</instanceable>
        <header-portlet-css>/css/lhn.css</header-portlet-css>
        <footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
    </portlet>
Mani kandan, modified 6 Years ago.

RE: Can load js files in my portlet

Expert Posts: 492 Join Date: 9/15/10 Recent Posts
Try
<header-portlet-javascript>/js/lhn.js</header-portlet-javascript>
instead of
<footer-portlet-javascript>/js/lhn.js</footer-portlet-javascript>
MP
Martin Phee, modified 6 Years ago.

RE: Can load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 Recent Posts
Interesting. I changed both and now it loads. Why?

If I create another portlet that needs these files will it break again?
Mani kandan, modified 6 Years ago.

RE: Can load js files in my portlet

Expert Posts: 492 Join Date: 9/15/10 Recent Posts
Have a look out this blog and this blog
MP
Martin Phee, modified 6 Years ago.

RE: Can load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 Recent Posts
Doesn't answer may question as to why header works and footer doesn't.
Mani kandan, modified 6 Years ago.

RE: Can load js files in my portlet

Expert Posts: 492 Join Date: 9/15/10 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
MP
Martin Phee, modified 6 Years ago.

RE: Can load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 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, modified 6 Years ago.

RE: Can load js files in my portlet

Liferay Master Posts: 679 Join Date: 4/17/09 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
MP
Martin Phee, modified 6 Years ago.

RE: Can load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 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, modified 6 Years ago.

RE: Can load js files in my portlet

Liferay Master Posts: 679 Join Date: 4/17/09 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
MP
Martin Phee, modified 6 Years ago.

RE: Can load js files in my portlet

Junior Member Posts: 25 Join Date: 5/9/11 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.