Forums de discussion

loading js issue in portlet

Ankit _, modifié il y a 11 années.

loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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

<instanceable>false</instanceable>
		<private-request-attributes>false</private-request-attributes>
		<header-portlet-css>/css/main.css</header-portlet-css>
		<header-portlet-javascript>/js/main.js</header-portlet-javascript>
<!-- 		<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.

$(document).ready(function(){
	alert("hiii");
	console.log("hrms-admin");
});


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
thumbnail
David H Nebinger, modifié il y a 11 années.

RE: loading js issue in portlet

Liferay Legend Publications: 14914 Date d'inscription: 02/09/06 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.
Ankit _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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.
thumbnail
John Nguyen, modifié il y a 10 années.

RE: loading js issue in portlet

New Member Publications: 21 Date d'inscription: 16/07/12 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:

(function($){
  $(function() {
    // you can use $ here without any issues...
  });
})(jQuery);
thumbnail
David H Nebinger, modifié il y a 10 années.

RE: loading js issue in portlet

Liferay Legend Publications: 14914 Date d'inscription: 02/09/06 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, modifié il y a 9 années.

RE: loading js issue in portlet

Junior Member Publications: 77 Date d'inscription: 03/09/13 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*...
thumbnail
David H Nebinger, modifié il y a 9 années.

RE: loading js issue in portlet

Liferay Legend Publications: 14914 Date d'inscription: 02/09/06 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.
thumbnail
Hitoshi Ozawa, modifié il y a 11 années.

RE: loading js issue in portlet

Liferay Legend Publications: 7942 Date d'inscription: 24/03/10 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 _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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 _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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

<portlet>
		<portlet-name>admin</portlet-name>
		<icon>/icon.png</icon>
		<portlet-url-class>com.liferay.portal.apache.bridges.struts.LiferayStrutsPortletURLImpl</portlet-url-class>
		<action-url-redirect>true</action-url-redirect>
		<instanceable>false</instanceable>
		<private-request-attributes>false</private-request-attributes>
		<header-portlet-css>/css/main.css</header-portlet-css>
		<header-portlet-javascript>/js/jquery-1.7.2.min.js</header-portlet-javascript>
		<header-portlet-javascript>/js/main.js</header-portlet-javascript>
<!-- 		<footer-portlet-javascript>/js/main.js</footer-portlet-javascript> -->
	</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.

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/css/main.css?browserId=other&amp;themeId=demo_WAR_demotheme&amp;minifierType=css&amp;languageId=en_US&amp;b=6200&amp;t=1361869258000". admin:1
Resource 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&amp;minifierType=js&amp;languageId=en_US&amp;b=6200&amp;t=1361869258000". admin:1
Resource interpreted as Script but transferred with MIME type text/plain: "http://localhost:8080/admin-0.0.1/js/main.js?browserId=other&amp;minifierType=js&amp;languageId=en_US&amp;b=6200&amp;t=1361869258000". 


I am really stuck in this problem, please help.

Thanks,
Ankit
thumbnail
Hitoshi Ozawa, modifié il y a 11 années.

RE: loading js issue in portlet

Liferay Legend Publications: 7942 Date d'inscription: 24/03/10 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 _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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 _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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

<header-portlet-javascript>/js/jquery-1.7.2.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/main.js</header-portlet-javascript> 


but its not loading,

As i saw in network tab in browser

main.js?browserId=other&amp;minifierType=js&amp;languageId=en_US&amp;b=6200&amp;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
R S, modifié il y a 11 années.

RE: loading js issue in portlet

New Member Publications: 24 Date d'inscription: 06/03/12 Publications récentes
Hi Ankit,

Could you try replacing your code with below code.

<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.
Ankit _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 Publications récentes
R S:
Hi Ankit,

Could you try replacing your code with below code.

<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 _, modifié il y a 11 années.

RE: loading js issue in portlet

Junior Member Publications: 46 Date d'inscription: 18/10/12 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
thumbnail
Hitoshi Ozawa, modifié il y a 11 années.

RE: loading js issue in portlet

Liferay Legend Publications: 7942 Date d'inscription: 24/03/10 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.