struts 2 jquery插件无法正常工作

时间:2013-10-12 08:03:42

标签: java javascript jquery jsp struts2

我有jsp loginSuccess.jsp,如下所示:

    <%@ 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>

此页面包含许多小部件,其中两个是search.jsp和userHistoryWidget.jsp。现在当我运行这个页面时,一切都很好,但是jquery datepicker标签不起作用。我的意思是日历没有显示出来。如果我从loginSuccess.jsp中删除head标签,那么datepicker开始工作,但是编码为在userHistoryWidget.jsp中发送异步请求的提交按钮停止工作。他们不回应点击。 userHistoryWidget.jsp如下:

    <!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如下:

    <%@ 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>

有人可以帮我解决这个问题吗?提前谢谢..

1 个答案:

答案 0 :(得分:2)

  1. 如果你的意图只是将JSP包含在其他页面中以形成一个完整的页面,那么我建议删除重复的部分(html,head,body和其他类似的标签)并仅包含特定的部分,所以生成的html仅包含ONE html,head&amp;身体标签。

  2. 其次,sj plugin需要<sj:head jqueryui="true"/>才能使UI组件正常工作。查看您的代码,显示父页面为loginSuccess.jsp&amp;因此,它<head>应包含此sj:head定义。

  3. 尝试删除冗余代码,希望它可以正常工作。