AUI is not defined and Liferay is not defined error in jsp page?

Question

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>

Answer 1

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.