I am using my custom portlet in liferay. but somehow when i run my portlet i m having following error in error console
Timestamp: 12/10/2012 12:33:19 PM
Error: ReferenceError: AUI is not defined
Source File: http://localhost:8080/eMenuAdvertise-portlet/js/jquery.min.js
Line: 4
Timestamp: 12/10/2012 12:34:21 PM
Error: ReferenceError: Liferay is not defined
Source File: http://localhost:8080/eMenuAdvertise-portlet/js/jquery.min.js
Line: 3
So why this error comes in my jsp page for some jquery?
<%@ page import="net.sf.jasperreports.engine.JRException" %>
<%@ page import="net.sf.jasperreports.engine.JasperExportManager" %>
<%@ page import="net.sf.jasperreports.engine.JasperFillManager" %>
<%@ page import="net.sf.jasperreports.engine.JasperPrint" %>
<%@ page import="net.sf.jasperreports.engine.JasperPrintManager" %>
<%@page import="com.liferay.portal.model.Role"%>
<%@ include file="/init.jsp"%>
<%@page import="com.liferay.portal.model.Organization"%>
<%@page import="com.liferay.portal.util.PortalUtil"%>
<style>
.borderColor{border: 1px solid #C62626;}
</style>
<portlet:renderURL var="ajaxaddnewrestURL">
<portlet:param name="jspPage" value="/jsps/ajaxnewrest.jsp" />
</portlet:renderURL>
<portlet:renderURL var="editrestURL">
<portlet:param name="jspPage" value="/jsps/Ajax_editrest.jsp" />
</portlet:renderURL>
<portlet:renderURL var="restListURL">
<portlet:param name="jspPage" value="/jsps/rest.jsp" />
</portlet:renderURL>
<portlet:renderURL var="reportURL">
<portlet:param name="jspPage" value="/htmlreport/report.html" />
</portlet:renderURL>
<portlet:renderURL var="renderURL ">
<portlet:param name="param-name" value="param-value" />
</portlet:renderURL>
<%-- <portlet:resourceURL var="ReportId" id="generate_report"></portlet:resourceURL> --%>
<portlet:resourceURL var="addToDo" id="generate_report"></portlet:resourceURL>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/south-street/ui.all.css" type="text/css">
<script src="<%=request.getContextPath()%>/js/datepickernew/jquery-1.8.3.js"></script>
<script src="<%=request.getContextPath()%>/js/datepickernew/jquery-ui.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/lib/chosen/chosen.jquery.min.js"></script>
<%
System.setProperty("java.awt.headless", "true");
System.out.println(java.awt.GraphicsEnvironment.isHeadless());
String loading_img_path = request.getContextPath()+"/img/ajax_loader.gif";
boolean isReseller=false; ///advertiser if flag is false else Reseller
List<Role> role_list_page=themeDisplay.getUser().getRoles();
for(Role role_name:role_list_page){
if(role_name.getName().equals("Reseller")){
isReseller=true;
break;
}
}%>
<script>
</script>
<script>
$(function() {
$("#Start_validBeforeDatepicker").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
onClose: function( selectedDate ) {
$( "#End_validAfterDatepicker" ).datepicker( "option", "minDate", selectedDate );
}
});
$("#End_validAfterDatepicker").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
onClose: function( selectedDate ) {
$( "#Start_validBeforeDatepicker" ).datepicker( "option", "maxDate", selectedDate );
}
});
// $("#validBeforeDatepicker").datepicker({ minDate: 0 });
$('#Start_validBeforeDatepicker,#End_validAfterDatepicker').datepicker();
});
</script>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({
allow_single_deselect : true
});
$(document).ready(function() {
$(".ui-datepicker").css("display","none");
});
</script>
<script type="text/javascript">
function update_rest(addToDo){
var camp_ID =document.getElementById('camp_id').value;
var f_start_date =document.getElementById('Start_validBeforeDatepicker').value;
var f_end_date =document.getElementById('End_validAfterDatepicker').value;
$.ajax({
url :addToDo,
data: {"rest_name":camp_ID,
"f_start_date":f_start_date,
"f_end_date":f_end_date,
"CMD":camp_ID},
type: "GET",
timeout: 20000,
dataType: "text",
success: function(data) {
alert("");
alert ( " liferay url : "+ Liferay.PortletURL.createRenderURL());
alert( "row1: " + createRowURL(1) );
alert( "row2: " + createRowURL(2) );
$("#mydiv").load("<%=renderURL.toString()%>");
alert(data);
}
});
}
function createRowURL( row ) {
var portletURL = new Liferay.PortletURL();
portletURL.setParameter("rowNumber", row );
return portletURL.toString();
}
function createRenderURL(str) {
alert("");
var renderURL = Liferay.PortletURL.createRenderURL();
alert("hi");
renderURL .setParameter("jspPage",str);
renderURL .setPortletId("eMenuAdvertise_WAR_eMenuAdvertiseportlet");
// i.e. your-unique-portlet-id can be like "helloworld_WAR_helloworldportlet"
}
</script>
<nav>
<div id="jCrumbs" class="breadCrumb module">
<ul>
<li><a href="#"><i class="icon-home"></i></a></li>
<li><a href="#">Reseller</a></li>
<li>Restaurants</li>
</ul>
</div>
</nav>
<div class="row-fluid">
<div class="span12">
<div id="successMsg" style='display:none;' class="alert alert-success"></div>
<div id="errorMsg" style='display:none;' class="alert alert-error"></div>
<h3 class="heading">
Statistics
</h3>
<%String restId = request.getParameter("hide1");%>
<portlet:actionURL name="generateReport" var="reportURL"></portlet:actionURL>
</div>
<div class="">
<div class="">
<div class="">
<div style="float: right">
<p>
<label style="width: 100px"><b>Campaign</b></label>
</p>
<select id="camp_id" name="camp_id"
data-placeholder="- Select Restaurants -" class="chzn-select"
multiple><%
String status = null;
List<campaign> camp_listObj;
if(isReseller)
{
camp_listObj= campaignLocalServiceUtil.getAllCampaignByOrganizations(themeDisplay);
}
else
{
camp_listObj = campaignLocalServiceUtil.getAllCampaignByOrganizationId(themeDisplay);
}
for (int i = 0; i < camp_listObj.size(); i++) {
%>
<option value=<%=camp_listObj.get(i).getPrimaryKey()%>><%=camp_listObj.get(i).getName().toString()%></option>
<%
}
%>
</select>
</div>
<div style="float: left;">
<p>
<button onclick="update_rest('<%=addToDo%>');" class="btn btn-success">GenerateReports</button>
</p>
<b>Start Date</b> <input type="text" style="width: 100px"
id="Start_validBeforeDatepicker" name="validTodayDatepicker"
readonly="true"> <b>End Date</b> <input type="text"
readonly="true" style="width: 100px" id="End_validAfterDatepicker"
name="validAfterDatePicker">
</div>
</div>
</div>
<div style="visibility: hidden;">
<input type="hidden" name="report_path" id="report_path" value="">
</div>
<%
System.setProperty("java.awt.headless", "true");
System.out.println(java.awt.GraphicsEnvironment.isHeadless());
%>
</div>
</div>
<div class="bordercolor" id="mydiv">
</div>
<script type="text/javascript">
function editrestaurant(id){
$(".span12").html("<img class='ajax-loader' src='<%=loading_img_path%>'/>");
$.ajax({
type:'post',
url:'<%=editrestURL.toString()%>',
data:{restId:id},
success:function(data){
$(".main_content").html(data);
}
});
}
function newrestaurant(){
$(".span12").html("<img class='ajax-loader' src='<%=loading_img_path%>'/>");
$.ajax({
type:'post',
url:'<%=ajaxaddnewrestURL.toString() %>',
data:{},
success:function(data){
$(".main_content").html(data);
}
});
}
</script>
portlet.vm
#set ($portlet_display = $portletDisplay)
#set ($portlet_id = $htmlUtil.escapeAttribute($portlet_display.getId()))
#set ($portlet_title = $portlet_display.getTitle())
#set ($portlet_back_url = $htmlUtil.escapeAttribute($portlet_display.getURLBack()))
<section id="portlet_$portlet_id">
$portlet_display.writeContent($writer)
</section>
portal_normal.vm
#parse ($init)
<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
<head>
</head>
<body class="$css_class">
<div id="wrapper">
<div id="content">
$theme.wrapPortlet("portlet.vm", $content_include)
</div>
</div>
</body>
$theme.include($bottom_include)
</html>
portal_popup.vm
<!DOCTYPE html>
#parse ($init)
<html dir="#language ("lang.dir")" lang="$w3c_language_id">
<head>
<title>$the_title</title>
$theme.include($top_head_include)
</head>
<body class="portal-popup $css_class">
$theme.include($content_include)
$theme.include($bottom_ext_include)
</body>
</html>
navigation.vm
<nav class="$nav_css_class" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</nav>
In the <script>
you have two javascript functions - createRowURL
and createRenderURL
which make use of the Alloy UI scripts as follows:
function createRowURL( row ) {
var portletURL = new Liferay.PortletURL(); // this is the line using AUI
portletURL.setParameter("rowNumber", row );
return portletURL.toString();
}
function createRenderURL(str) {
alert("");
var renderURL = Liferay.PortletURL.createRenderURL(); // this is the line using AUI
alert("hi");
renderURL .setParameter("jspPage",str);
renderURL .setPortletId("eMenuAdvertise_WAR_eMenuAdvertiseportlet");
// i.e. your-unique-portlet-id can be like "helloworld_WAR_helloworldportlet"
}
So I would suggest instead of using the <script> ... </script>
tag use <aui:script> ... </aui:script>
tags (this loads all the AUI
and Liferay
modules), for using this tag you would need to define the taglib in your jsp like:
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>`
Edit (after seeing the theme templates):
I can see that in your portal_normal.vm
you have removed the following lines from <head>
and <body>
tags respectively:
$theme.include($top_head_include) <!-- this statement is removed from <head> -->
$theme.include($body_top_include) <!-- this statement is removed from <body> -->
Please include these statements back in the theme templates and your scripts would work. The statement $theme.include($top_head_include)
this is responsible to include all the AUI
related stuff (javascripts, functions etc) and also some variables in the request attribute.
Note: Please always be careful while removing anything from themes and hooks. You should always know what is the purpose of the statements you are removing or modifying.
Hope this helps.