CODEWITHSUNDEEP
javajavascriptjqueryjspstruts2
Gaurav Kumar
Gaurav Kumar

Reputation: 1091

struts 2 jquery plugin not working

I have jsp loginSuccess.jsp as follows:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>

<head>
<s:head />
<sj:head />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<title>Login</title>
</head>
<body>
    <div id="MainPage">
        <jsp:include page="header.jsp"></jsp:include>
        <jsp:include page="menubaruser.jsp"></jsp:include>
        <div id="mainContent" >
           <div style="width:898px"><br><center>Welcome Mr. <b><s:property value="#session.name"/> </b></center> </div> 
           <div id="ajaxdiv">
            <div id="ContentLeft">
                <jsp:include page="search.jsp"></jsp:include>
            </div>
            <div id="contentRight">
                <jsp:include page="topdeals.jsp"></jsp:include>
            </div>
           </div>
            <br>
            <div>
                <jsp:include page="userHistoryWidget.jsp"></jsp:include>
            </div>
        </div>      
        <jsp:include page="footer.jsp"></jsp:include>
    </div>
</body>
</html>

This page include many widgets , two of which are search.jsp and userHistoryWidget.jsp. Now when i run this page, everything is fine but the jquery datepicker tag doesn't work.I mean the calender doesn't show up. If i remove the head tag from loginSuccess.jsp, then the datepicker starts working but then the submit button that are coded to send asynchronous request in userHistoryWidget.jsp stops working. They don't respond to clicks. userHistoryWidget.jsp is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:head />
<sj:head />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>


    <div id="searchHeaderHistory">User History</div>



    <div class="CSSTableGenerator">
        <table>
            <colgroup>
                <col span="1" style="width: 5%;">
                <col span="1" style="width: 10%;">
                <col span="1" style="width: 8%;">
                <col span="1" style="width: 15%;">
                <col span="1" style="width: 15%;">
                <col span="1" style="width: 6%;">
                <col span="1" style="width: 6%;">
                <col span="1" style="width: 17%;">
                <col span="1" style="width: 18%;">
            </colgroup>

            <tr>
                <td>Ticket ID</td>
                <td>Booking Date</td>
                <td>Flight ID</td>
                <td>From</td>
                <td>To</td>
                <td>Total Fare</td>
                <td>Net Fare</td>
                <td></td>
                <td></td>
            </tr>

            <s:iterator value="ticketsList" var="ticket" status="stat">

                <tr>
                    <td align="center"><s:property value="#ticket.tid" /></td>
                    <td align="center"><s:property value="#ticket.bookingdate" /></td>
                    <td align="center"><s:property
                            value="#ticket.scheduleDetails.flightDetails.fid" /></td>

                    <s:if test="#ticket.flag==3">
                        <td><s:property
                                value="#ticket.scheduleDetails.flightDetails.routeDetails.via" /><br>
                            <s:property value="#ticket.scheduleDetails.via_dep_date" />&nbsp;<s:property
                                value="#ticket.scheduleDetails.via_dep_time" />hrs</td>
                    </s:if>
                    <s:if test="#ticket.flag==1 ||#ticket.flag==2||#ticket.flag==4">
                        <td><s:property
                                value="#ticket.scheduleDetails.flightDetails.routeDetails.source" /><br>
                            <s:property value="#ticket.scheduleDetails.source_dep_date" />&nbsp;<s:property
                                value="#ticket.scheduleDetails.source_dep_time" />hrs</td>
                    </s:if>
                    <s:if test="#ticket.flag==1 ||#ticket.flag==2||#ticket.flag==3">
                        <td><s:property
                                value="#ticket.scheduleDetails.flightDetails.routeDetails.destination" /><br>
                            <s:property value="#ticket.scheduleDetails.dest_arr_date" />&nbsp;<s:property
                                value="#ticket.scheduleDetails.dest_arr_time" />hrs</td>
                    </s:if>
                    <s:if test="#ticket.flag==4">
                        <td><s:property
                                value="#ticket.scheduleDetails.flightDetails.routeDetails.via" /><br>
                            <s:property value="#ticket.scheduleDetails.via_arr_date" />&nbsp;<s:property
                                value="#ticket.scheduleDetails.via_arr_time" />hrs</td>
                    </s:if>
                    <td align="center"><s:property value="#ticket.fare" /></td>
                    <td align="center"><s:property value="#ticket.dealFare" /></td>
                    <td style="width: 150px" align="center">
                        <s:url  id="getPassengers" value="/getPassengers.action">
                            <s:param name="Tid" value="#ticket.tid" />
                        </s:url>
                         <sj:a id="link_%{#stat.index}" href="%{getPassengers}" targets="ajaxdiv" cssClass="orangebuttonsmall">
                                View Details    
                         </sj:a>
                    </td>
                    <td style="width: 150px" align="center">
                        <s:a action="cancel" id="button1" style="float:left" cssClass="orangebuttonsmall">Cancel Ticket
                             <s:param name="Tid" value="#ticket.tid"></s:param>
                        </s:a>
                    </td>
                </tr>
            </s:iterator>

        </table>
    </div>
</body>
</html>

search.jsp is as follows:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:head />
<sj:head />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
        $("#datepicker").datepicker();
    });
</script>


<title>Search</title>
</head>
<body>
    <s:form action="searchFlight" method="post" theme="css_xhtml" cssClass="form1small">
        <div class="searchHeadersmall">Search Flight</div>
        <div id="searchForm1">
            <s:select list="cityList" headerValue="--------Select--------" headerKey="-1"
                name="searchFlightDetails.from" label="Leaving From"></s:select>
            <s:select list="destlist" headerValue="---------Select-------" headerKey="-1"
                name="searchFlightDetails.to" label="Going To"></s:select>
            <s:textfield label="Date" name="searchFlightDetails.date_of_travel"
                id="datepicker" />
            <s:select list="#{'1':'1','2':'2','3':'3','4':'4','5':'5'}"
                headerValue="" headerKey="-1"
                name="searchFlightDetails.no_of_passengers" label="No of tickets"
                style="width:50%; float:left"></s:select>
            <div class="inputsmall nobottombordersmall">
                Type &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                <s:radio label="Type" name="searchFlightDetails.nonstop"
                    list="#{'Y':'NonStop','N':'Normal'}" theme="simple" />
            </div>
            <div id="submitdivid1">
                <sj:submit id="submitsearch" value="Show Flights" targets="mainContent"/>
            </div>
        </div>
    </s:form>
</body>
</html>

Can somebody help me solve this problem? Thanks in advance..

Upvotes: 0

Views: 3397

Answers (1)

coding_idiot
coding_idiot

Reputation: 13714

  1. If your intention is just to include the JSPs in other pages to form a complete page, then I suggest remove the repeated part (html, head, body & other similar tags) and contain only specific part, so that the resulting html contains only ONE html, head & body tag.

  2. Secondly, sj plugin requires <sj:head jqueryui="true"/> for the UI components to work. Looking at your code, it appears the the parent page is loginSuccess.jsp & hence, it's <head> should contain this sj:head definition.

Try removing the redundant code and hopefully, it should work.

Upvotes: 2

Related Questions