Vue combinée Vue Plate Arborescence
Sujets [ Précédent | Suivant ]
toggle
Ankit _
loading js issue in portlet
25 février 2013 06:12
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
25 février 2013 07:01
Réponse

David H Nebinger

Community Moderator

Rang: Liferay Legend

Publications: 12124

Date d'inscription: 1 septembre 2006

Publications Récentes

$ 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
25 février 2013 14:24
Réponse

Hitoshi Ozawa

Rang: Liferay Legend

Publications: 7949

Date d'inscription: 23 mars 2010

Publications Récentes

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
25 février 2013 20:41
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
25 février 2013 20:46
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
26 février 2013 01:14
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
26 février 2013 04:09
Réponse

Hitoshi Ozawa

Rang: Liferay Legend

Publications: 7949

Date d'inscription: 23 mars 2010

Publications Récentes

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
26 février 2013 04:28
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
26 février 2013 22:52
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
27 février 2013 04:51
Réponse

Riddhi Shah

Rang: Junior Member

Publications: 25

Date d'inscription: 6 mars 2012

Publications Récentes

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
27 février 2013 06:27
Réponse

Hitoshi Ozawa

Rang: Liferay Legend

Publications: 7949

Date d'inscription: 23 mars 2010

Publications Récentes

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
27 février 2013 21:52
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
6 mars 2013 02:01
Réponse

Ankit _

Rang: Junior Member

Publications: 46

Date d'inscription: 18 octobre 2012

Publications Récentes

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
12 septembre 2013 14:15
Réponse

John Nguyen

Rang: New Member

Publications: 21

Date d'inscription: 16 juillet 2012

Publications Récentes

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
16 septembre 2013 05:18
Réponse

David H Nebinger

Community Moderator

Rang: Liferay Legend

Publications: 12124

Date d'inscription: 1 septembre 2006

Publications Récentes

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
2 avril 2014 12:51
Réponse

Paul Allain

Rang: Junior Member

Publications: 39

Date d'inscription: 3 septembre 2013

Publications Récentes

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
3 avril 2014 06:39
Réponse

David H Nebinger

Community Moderator

Rang: Liferay Legend

Publications: 12124

Date d'inscription: 1 septembre 2006

Publications Récentes

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.