Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Ankit _
loading js issue in portlet
February 25, 2013 6:12 AM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

Hi All,

I am using liferay portal 6.2.0 M2 , and I want to call my jquery js for my portlet, for that i wrote the below line in liferay-portlet.xml
1
2<instanceable>false</instanceable>
3        <private-request-attributes>false</private-request-attributes>
4        <header-portlet-css>/css/main.css</header-portlet-css>
5        <header-portlet-javascript>/js/main.js</header-portlet-javascript>
6<!--         <footer-portlet-javascript>/js/main.js</footer-portlet-javascript> -->


I just simply wrote below in my main.js, i worte just alert into so i just want to sure that, is it working on not, i already add jquery js in theme so it should be awailable for whole portal.
1
2$(document).ready(function(){
3    alert("hiii");
4    console.log("hrms-admin");
5});


Now, when i run this code, nothing happen to me, and in chrome browser it will giving some worning like that also
'Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/css/main.css?browserId=other&themeId=demo_WAR_demotheme&minifierType=css&languageId=en_US&b=6200&t=1361801318000". admin:1
Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/js/jquery.simple.validatoin.js?browserId=other&minifierType=js&languageId=en_US&b=6200&t=1361801318000". '

rather than i write jquery functions in perticular jsp file , it is running fine, but i don't know, not loading js file.

Thanks,
Ankit
David H Nebinger
RE: loading js issue in portlet
February 25, 2013 7:01 AM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 11780

Join Date: September 1, 2006

Recent Posts

$ should be avoided. use jQuery(document).ready() instead, although there are more appropriate ways to do this in Liferay.

Note if you're using other jquery plugins, you may have to go into them and ensure they, too, are not using the $ syntax.
Hitoshi Ozawa
RE: loading js issue in portlet
February 25, 2013 2:24 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

4 <header-portlet-css>/css/main.css</header-portlet-css>
5 <header-portlet-javascript>/js/main.js</header-portlet-javascript>


Where are you loading your jquery js files?
Ankit _
RE: loading js issue in portlet
February 25, 2013 8:41 PM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

David H Nebinger:
$ should be avoided. use jQuery(document).ready() instead, although there are more appropriate ways to do this in Liferay.

Note if you're using other jquery plugins, you may have to go into them and ensure they, too, are not using the $ syntax.

Hi David, thanks for your reply. I changed the code and use just jQurey(docuement).ready() instead of older code. but still the problem is same,
If i put the jQuery code in individual jsp page then it is working, but not working in as single js file, so maybe file is not loading properly.
Ankit _
RE: loading js issue in portlet
February 25, 2013 8:46 PM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

Hitoshi Ozawa:
4 <header-portlet-css>/css/main.css</header-portlet-css>
5 <header-portlet-javascript>/js/main.js</header-portlet-javascript>


Where are you loading your jquery js files?


Hi Hitoshi, I already put my jquery js file in portal theme, and i am putting my custom js file into portlet project 's js folder it self.
i can't getting that why its not loading ?

Thanks,
Ankit
Ankit _
RE: loading js issue in portlet
February 26, 2013 1:14 AM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

Hi David and Hitoshi,

Now i remove all the other stuff of jQuery from theme and portlet, and just include jQuery at portlet level, as below
 1
 2<portlet>
 3        <portlet-name>admin</portlet-name>
 4        <icon>/icon.png</icon>
 5        <portlet-url-class>com.liferay.portal.apache.bridges.struts.LiferayStrutsPortletURLImpl</portlet-url-class>
 6        <action-url-redirect>true</action-url-redirect>
 7        <instanceable>false</instanceable>
 8        <private-request-attributes>false</private-request-attributes>
 9        <header-portlet-css>/css/main.css</header-portlet-css>
10        <header-portlet-javascript>/js/jquery-1.7.2.min.js</header-portlet-javascript>
11        <header-portlet-javascript>/js/main.js</header-portlet-javascript>
12<!--         <footer-portlet-javascript>/js/main.js</footer-portlet-javascript> -->
13    </portlet>


but still i am not able to load jquery js . It is giving the warning in Chrome browser , i checked in firefox, but its not giving any warning or error.
1
2Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/css/main.css?browserId=other&themeId=demo_WAR_demotheme&minifierType=css&languageId=en_US&b=6200&t=1361869258000". admin:1
3Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/js/jquery-1.7.2.min.js?browserId=other&minifierType=js&languageId=en_US&b=6200&t=1361869258000". admin:1
4Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/js/main.js?browserId=other&minifierType=js&languageId=en_US&b=6200&t=1361869258000".


I am really stuck in this problem, please help.

Thanks,
Ankit
Hitoshi Ozawa
RE: loading js issue in portlet
February 26, 2013 4:09 AM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

I just wrote an article on writing jquery portlet. The article is in Japanese but there's a sample code a little bit down the page. It may help you.
http://gihyo.jp/design/serial/01/liferay/0003?page=4
Ankit _
RE: loading js issue in portlet
February 26, 2013 4:28 AM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

Hitoshi Ozawa:
I just wrote an article on writing jquery portlet. The article is in Japanese but there's a sample code a little bit down the page. It may help you.
http://gihyo.jp/design/serial/01/liferay/0003?page=4


Hi Hitoshi, thanks for your reply.
Actually i can get jquery function and run successfully in individual jsp page, as i give the path in script src. but I don't want to put script on each page of portlet as i have some funcationality common in some pages, so i need to add one common file and want to give reference for that file,
If i gave reference in script src tag in jsp , or as in <header-portlet-javascript> tag in liferay-portlet.xml then it's not loading properly.

I already give reference in portal theme for jquery, so i m not including it in portlet, if i remove it from portal theme then i try to include jquery in portlet then its not working.. means nothing happening, and chrome simply said that --> Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost:8080/admin/js/jquery-1.7.2.min.js?browserId=other&minifierType=js&languageId=en_US&b=6200&t=1361881041000".
Ankit _
RE: loading js issue in portlet
February 26, 2013 10:52 PM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

Hi All,
I change with fresh portlet setup, I already put the jquery.js file in portal theme,
Now i put the jquery.js file and my custom js file in js folder and added in liferay-portlet.xml file as below
1
2<header-portlet-javascript>/js/jquery-1.7.2.min.js</header-portlet-javascript>
3<header-portlet-javascript>/js/main.js</header-portlet-javascript>


but its not loading,

As i saw in network tab in browser
1
2main.js?browserId=other&minifierType=js&languageId=en_US&b=6200&t=1361943550000      /admin/js  GET  200 OK   text/plain       admin:1  Parser       358B     0B 106ms 104ms


so maybe its loading with text/plain mime type, rather then text/javascript ....
please help

Thanks in advance
Ankit
Riddhi Shah
RE: loading js issue in portlet
February 27, 2013 4:51 AM
Answer

Riddhi Shah

Rank: Junior Member

Posts: 25

Join Date: March 6, 2012

Recent Posts

Hi Ankit,

Could you try replacing your code with below code.

1<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>


Load jquery-1.7.2.min.js from theme only as you were doing it earlier and in your liferay-portlet.xml, put above code for your main.js file.
What i doubt is that as you are loading main.js in header section, so it might happen that by that time, jquery of theme is not available.

As such its best practise to keep all js files in footer section.
Hitoshi Ozawa
RE: loading js issue in portlet
February 27, 2013 6:27 AM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

I change with fresh portlet setup, I already put the jquery.js file in portal theme,
Now i put the jquery.js file and my custom js file in js folder and added in liferay-portlet.xml file as below


You're not making any sense! If you are putting jquery.js in your portal theme, why are you adding it again in the portlet's liferay-portlet.xml file?

I just included jquery in the jsp file because the article is for beginners and I didn't want to overburden with explanation of liferay-portlet.xml file.
In my portlets, I have them in the xml file and I have it working without problem.

Try undeploying your portlet, shutting down your liferay and deleting temp and work directories, and then deploying your portlet.
Ankit _
RE: loading js issue in portlet
February 27, 2013 9:52 PM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

R S:
Hi Ankit,

Could you try replacing your code with below code.

1<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>


Load jquery-1.7.2.min.js from theme only as you were doing it earlier and in your liferay-portlet.xml, put above code for your main.js file.
What i doubt is that as you are loading main.js in header section, so it might happen that by that time, jquery of theme is not available.

As such its best practise to keep all js files in footer section.


Hi thanks for your reply R S and Hitoshi,

I am loading jquery in theme only... and i tried to add only my js file in <footer-portlet-javascript> also, but still can't getting it.
I redeploy my portlet, removed all from temp and work also.. still not getting my main.js file functionality,

I can see my main.js file in HTML element in browser "<script src="http://localhost:8080/admin/js/main.js?browserId=other&amp;minifierType=js&amp;languageId=en_US&amp;b=6200&amp;t=1362025683000" type="text/javascript"></script>"

but still not calling the jquery funcations.... If i remove the code from main.js and embed the js code in jsp pages directly, then it is running..

Thanks,
Ankit
Ankit _
RE: loading js issue in portlet
March 6, 2013 2:01 AM
Answer

Ankit _

Rank: Junior Member

Posts: 46

Join Date: October 18, 2012

Recent Posts

I am still not loading the custom js file for portlet in 6.2.0 CE M2
I am working in ubuntu 12.10 environment, and i found something old issue in liferay,
http://issues.liferay.com/browse/LPS-16396

that stated that this issue resolved in liferay 6.2.0 CE M2 that i am using..

meanwhile i downloaded the liferay 6.2.0 CE M3 portal , and same portlet put in M3, and its working fine for me.
but can't figure it out for M2...

Thanks,
Ankit
John Nguyen
RE: loading js issue in portlet
September 12, 2013 2:15 PM
Answer

John Nguyen

Rank: New Member

Posts: 21

Join Date: July 16, 2012

Recent Posts

David H Nebinger:
$ should be avoided. use jQuery(document).ready() instead, although there are more appropriate ways to do this in Liferay.

Note if you're using other jquery plugins, you may have to go into them and ensure they, too, are not using the $ syntax.



David, not sure if it is efficient to make sure every single plugin uses $.

The approach I would take is:

1(function($){
2  $(function() {
3    // you can use $ here without any issues...
4  });
5})(jQuery);
David H Nebinger
RE: loading js issue in portlet
September 16, 2013 5:18 AM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 11780

Join Date: September 1, 2006

Recent Posts

The problem with that approach is that you've now stripped out the $ function definition for AUI, which is what the core of the portal uses.

My post said to avoid the $ syntax, not use it explicitly. $ fails when you have multiple JS libraries in play, as you would with both AUI and jQuery...
Paul Allain
RE: loading js issue in portlet
April 2, 2014 12:51 PM
Answer

Paul Allain

Rank: Junior Member

Posts: 25

Join Date: September 3, 2013

Recent Posts

So I am having the same sort of problems on Liferay 6.2.0 GA2 and if I understand correctly we have to rewrite all JQuery code that uses $ because Alloy UI is using it? If my understanding is correct then that's simply a ridiculous solution to a problem that should never have happened.

just imagine all the JQuery goodness that we either have to rewrite or refrain from using.

Since Liferay developers decided to integrate a subset version of Alloy then they should be the ones using a different syntax and save the rest of us lots of headaches.

I strongly believe that going for Alloy UI instead of JQuery in Liferay is a *very bad mistake*...
David H Nebinger
RE: loading js issue in portlet
April 3, 2014 6:39 AM
Answer

David H Nebinger

Community Moderator

Rank: Liferay Legend

Posts: 11780

Join Date: September 1, 2006

Recent Posts

jquery has problems in the portal realm which was why it was dumped. Not understanding that, it's easy to throw around statements like "choosing alloy over jquery was a mistake".

Most of the jquery extensions that I've seen never use the $ syntax, so it is typically only in your own code that the $ syntax is a problem. This is easily resolved using a find/replace and is not worth getting your feathers riled up over.