Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 8, 2012 4:43 PM
RE: Trouble moving javascript to js folder and letting Liferay load it Siby Mathew November 9, 2012 9:30 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 9, 2012 9:47 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Roberto Díaz November 9, 2012 10:10 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 9, 2012 10:12 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 9, 2012 10:18 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Sushil Saini November 9, 2012 11:12 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 9, 2012 11:20 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Sushil Saini November 9, 2012 2:04 PM
RE: Trouble moving javascript to js folder and letting Liferay load it Sushil Saini November 9, 2012 2:08 PM
RE: Trouble moving javascript to js folder and letting Liferay load it gordon daniels November 10, 2012 5:55 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Sushil Saini November 11, 2012 1:00 AM
RE: Trouble moving javascript to js folder and letting Liferay load it Bob McDermott November 10, 2012 12:22 PM
RE: Trouble moving javascript to js folder and letting Liferay load it Hitoshi Ozawa November 10, 2012 7:32 PM
Bob McDermott
Trouble moving javascript to js folder and letting Liferay load it
November 8, 2012 4:43 PM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

Hi Folks,

I'm having some trouble trying to move some javascript from my JSP page, into an the main.jsp file in the js subdirectory of the docroot of my portlet. The details are below but the essence of the problem, is that when I move the javascript to main.jsp, it stops working. The javascript is the AlloyUI date picker which I am using to populate two input boxes "startdate" and "enddate". As I understand it, Liferay best practice is to put these scripts in the js subdirectory as I have secribed above and not have them in the jsp file itself (or even just refernced from the JSP). I did just add them to the main.jsp file that was already there, as it was empty anyway.

Everything works when the scripts are in the JSP, when moved out the date picker does not appear when clicking on the input box.


Here is the javascript as it appears in my JSP file:

 1<aui:script>
 2    AUI().use('aui-datepicker', function(A) {
 3
 4       var simpleDatepicker1 = new A.DatePicker({
 5
 6         trigger: '#<portlet:namespace />startdate',
 7
 8       }).render('##<portlet:namespace />startDatePicker');
 9
10    });
11</aui:script>
12
13<aui:script>
14    AUI().use('aui-datepicker', function(A) {
15
16       var simpleDatepicker2 = new A.DatePicker({
17
18        trigger: '#<portlet:namespace />enddate',
19        dates: [ '01/01/2012' ],
20        dateFormat : '%Y-%m-%d',
21        setValue: true,
22        showToday: false
23
24       }).render('##<portlet:namespace />endDatePicker');
25
26    });
27</aui:script>


When I move it to main.jsp, I remove the <aui-script> tags. main.js is refernced in my liferay-portlet.xml file. In this copy I have it loaded in the header, but I have also tried it in the footer.

 1
 2<?xml version="1.0"?>
 3<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.1.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_1_0.dtd">
 4
 5<liferay-portlet-app>
 6    <portlet>
 7        <portlet-name>selectDates</portlet-name>
 8        <icon>/icon.png</icon>
 9        <instanceable>false</instanceable>
10        <header-portlet-css>/css/main.css</header-portlet-css>
11        <header-portlet-javascript>/js/main.js</header-portlet-javascript>
12        <css-class-wrapper>selectDates-portlet</css-class-wrapper>
13    </portlet>
14    <role-mapper>
15        <role-name>administrator</role-name>
16        <role-link>Administrator</role-link>
17    </role-mapper>
18    <role-mapper>
19        <role-name>guest</role-name>
20        <role-link>Guest</role-link>
21    </role-mapper>
22    <role-mapper>
23        <role-name>power-user</role-name>
24        <role-link>Power User</role-link>
25    </role-mapper>
26    <role-mapper>
27        <role-name>user</role-name>
28        <role-link>User</role-link>
29    </role-mapper>
30</liferay-portlet-app>

Here is my whole JSP file with the scripts in-line:
 1
 2<%@page contentType="text/html"%>
 3<%@page pageEncoding="UTF-8"%>
 4
 5<%@ page import="javax.portlet.*"%>
 6<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
 7
 8<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
 9
10<portlet:defineObjects />
11
12
13 <aui:script>
14    AUI().use('aui-datepicker', function(A) {
15
16       var simpleDatepicker1 = new A.DatePicker({
17
18         trigger: '#<portlet:namespace />startdate',
19
20       }).render('##<portlet:namespace />startDatePicker');
21
22    });
23</aui:script>
24   
25 <aui:script>
26    AUI().use('aui-datepicker', function(A) {
27
28       var simpleDatepicker2 = new A.DatePicker({
29
30        trigger: '#<portlet:namespace />enddate',
31        dates: [ '01/01/2012' ],
32        dateFormat : '%Y-%m-%d',
33        setValue: true,
34        showToday: false
35
36       }).render('##<portlet:namespace />endDatePicker');
37
38    });
39</aui:script>
40
41<%PortletPreferences prefs = renderRequest.getPreferences();%>
42
43<div>
44
45    <%-- The action name must be passed as a param, not as an actionURL attribute. Fix will come with Liferay 5.0.2 --%>
46    <form method="post"
47        action="<portlet:actionURL>
48        <portlet:param name="javax.portlet.action" value="updateDates" />
49        </portlet:actionURL>">
50            <table id="table1">
51                <tbody>
52                <tr>
53                    <th><label>Start Date:  </label></th>
54                    <td><div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">
55                    <input type="text" name="startdate" id="<portlet:namespace />startdate" size="15" />
56                    </div></td>
57                </tr>
58                <tr></tr>
59                <tr>
60                    <th><label>End Date:  </label></th>
61                    <td><div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />endDatePicker">
62                    <input type="text" name="enddate" id="<portlet:namespace />enddate" size="15" value="01/01/2012"/>
63                    </div></td>
64                </tr>
65                <tr>
66                    <td colspan="2"><input type="submit" value="Change Dates" /></td>
67                </tr>
68                </tbody>
69            </table>
70    </form>
71</div>

Can someone provide some guidance on what I'm doing wrong when I move these scripts out to main.js? I am using 6.1 GA2 EE. Also, if anyone has a good reference for the aui datepicker, that woudl be great. I'm having trouble setting it to default values (even when it's in the JSP).

Thanks,
Bob
Siby Mathew
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 9:30 AM
Answer

Siby Mathew

Rank: Expert

Posts: 267

Join Date: March 4, 2011

Recent Posts

Hi Bob,
Can you rename the main.js to a different name.

Thanks,
Siby
Bob McDermott
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 9:47 AM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

OK, I tried that. Still no luck. I am verifying through Chrome's "inspect element" that the js file is being pulled into a footer on the page. I named the file datepicker.js.

Thanks for your assistance. Any other thoughts or artifacts that might help to understand the problem?
Attachment

Attachments: liferaycode.jpg (75.4k)
Roberto Díaz
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 10:10 AM
Answer

Roberto Díaz

LIFERAY STAFF

Rank: New Member

Posts: 24

Join Date: October 30, 2012

Recent Posts

Is the js file used in another portlet that pull it into the footer?
Bob McDermott
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 10:12 AM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

Hi Roberto, No, it is not referenced in any other liferay-portlet.xml file.

Thanks,
Bob
Bob McDermott
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 10:18 AM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

and to correct myself, I said before that it is being placed in the footer, but if you look at the html I included, it is actually just at the bottom of the <body>, not actually in a <footer>. I'm assuming that is what Liferay does when you specify <footer-portlet-javascript>/js/datepicker.js</footer-portlet-javascript>.
Sushil Saini
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 11:12 AM
Answer

Sushil Saini

Rank: Regular Member

Posts: 104

Join Date: July 27, 2011

Recent Posts

Hi Bob,

You cann't move this javascript out of your jsp page. Because this javascript is attaching the datepicker function to buttons which needs to be run on load of page in browser.

If you move this java-script out of your jsp page. it doesn't get run on load of page in browser and event will attach to button and will not work.

Hope it explains your problem.

Cheers
Sushil Saini
Bob McDermott
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 11:20 AM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

Sushil, Thank you. I was thinking it might have something to do with the fact that this particular js is tied to the input field in the jsp file. So does that mean that the way those js files are referenced at the bottom of the html <body> is such that they do not load on page load? If that is true, when DO they load? Would it matter if direct Liferay to load these in the "header"? I did try that and it didn't seem to help.

This seems like a significant limitation to allowing Liferay to manage the loading of javascript. Any insight?

Thanks,
Bob
Sushil Saini
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 2:04 PM
Answer

Sushil Saini

Rank: Regular Member

Posts: 104

Join Date: July 27, 2011

Recent Posts

Hi Bob,

Yeah, you are thinking in right direction. This problem is realated to the name of the field in jsp files. I was kind of bit wrong in my earlier explantion that you can't move your javascript code out of your jsp. you can move it to the javascript file. I have tried it and it is working fine.

Problem is with the <portlet:namespace /> tag which you are using in your javascript code. Tag can be evaluated in jsp pages means you can place tag only in jsp files. If you place tag in javascript file its value can't be evaluated.

You will have set the value of portlet namespace in the javascript variable so that you can get this value in the javascript file. Add the below code in your jsp page.

1
2<script type="text/javascript">
3  var portletNameSpace = "<portlet:namespace />";
4</script>


And add the following code in your javascript file main.js

 1
 2AUI().use("aui-datepicker", function(b) {
 3    var a = new b.DatePicker({
 4        trigger : "#"+portletNameSpace+"startdate",
 5    }).render("##"+portletNameSpace+"startDatePicker")
 6});
 7
 8AUI().use("aui-datepicker", function(a) {
 9    var b = new a.DatePicker({
10        trigger : "#"+portletNameSpace+"enddate",
11        dates : [ "01/01/2012" ],
12        dateFormat : "%Y-%m-%d",
13        setValue : true,
14        showToday : false
15    }).render("##"+portletNameSpace+"endDatePicker")
16});


Now it should work fine.
Sushil Saini
RE: Trouble moving javascript to js folder and letting Liferay load it
November 9, 2012 2:08 PM
Answer

Sushil Saini

Rank: Regular Member

Posts: 104

Join Date: July 27, 2011

Recent Posts

Hi Bob,

Also attching the working demo portlet for it. I have tried this on liferay 6.1.1 CE GA2.

Please let me know if you still face any issue.

Cheers
Sushil Saini
Attachments: demo-portlet-6.1.1.1.war (26.9k)
gordon daniels
RE: Trouble moving javascript to js folder and letting Liferay load it
November 10, 2012 5:55 AM
Answer

gordon daniels

Rank: Liferay Master

Posts: 735

Join Date: August 23, 2008

Recent Posts

Sushil: thanks for going the extra effort to help this community member. We need more like you!
Bob McDermott
RE: Trouble moving javascript to js folder and letting Liferay load it
November 10, 2012 12:22 PM
Answer

Bob McDermott

Rank: Junior Member

Posts: 34

Join Date: April 30, 2012

Recent Posts

Sushil,

Thanks so much! I haven't had a chance to try it out yet, but your solution makes perfect sense as to why my code wasn't working. You've been a great help.

Bob
Hitoshi Ozawa
RE: Trouble moving javascript to js folder and letting Liferay load it
November 10, 2012 7:32 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

We normally have httpd server in front of Liferay server and I just place my js files there and exclude the directory from being passed to the liferay server. I don't have to change any codes and it also lessens traffic to the liferay server. The only drawback is that I have to upload files to the httpd server and clear the cache when I do.
Sushil Saini
RE: Trouble moving javascript to js folder and letting Liferay load it
November 11, 2012 1:00 AM
Answer

Sushil Saini

Rank: Regular Member

Posts: 104

Join Date: July 27, 2011

Recent Posts

Thanks Gordon