struts 2 jquery plugin not working - java

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" /> <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" /> <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" /> <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" /> <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
<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..

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.
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.

Related

how to send data from table to jsp

I want to get table data from table to new database through jsp servlet this is my sample code in jsp this table contains database elements
I struggled for a week. Please help me.
I want to get table data from table to new database through jsp servlet this is my sample code in jsp this table contains database elements
<%#page import="java.sql.Connection"%>
<%#page import="java.sql.PreparedStatement"%>
<%#page import="Servlets.Db"%>
<%#page import="java.sql.ResultSet"%>
<%# 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h1>Place your Order</h1>
<div class="jumbotron">
<form action="order" method="post">
<!--
<label>name</label>
<input class="form-control" name="name" type="text" >
<label>Member Id</label>
<input class="form-control" name="memberid" type="text" >
<label>Orders</label>
<div class="container">
<div class="row">
<div class="jumbotron">
-->
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>quantity</th>
</tr>
<%
Connection con=Db.getCon();
String sql="SELECT * FROM drugs";
PreparedStatement ps=con.prepareStatement(sql);
ResultSet rs=ps.executeQuery();
while(rs.next()) {
%>
<tr>
<td><input type="text" name="id" value="<%=rs.getInt("id") %>"></td>
<td><input type="text" name="name" value="<%=rs.getString("name") %>"></td>
<td><input type="text" name="quntity"></td>
</tr>
<%
}
%>
</table>
<input type="submit" value="submit order">
</form>
</div>
</div>
<div class="row">
<%# include file="WEB-INF/Footer.jsp" %>
</div>
</div>
</body>
</html>
The work you done is get data from database and show data in jsp,if you want to put data into database,you should change sql to "add" and jsp to "input".

Some other way to display data from sql table on jsp

I have used jstl to display particular data from table named status(all columns are string type) on found.jsp. In my table I have entered 1 and 0 under status column where 1 is for IN and 0 is for OUT.
found.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%# page import="java.io.*,java.util.*,java.sql.*"%>
<%# page import="javax.servlet.http.*,javax.servlet.*" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Found page</title>
<style>
header {
background-color:teal;
color:white;
text-align:center;
padding:5px;
}
section {
height:270px;
width:1050px;
float:right;
padding:87px;
}
footer {
background-color:black;
float:bottom;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body style="background-color:lightsteelblue;">
<header><h3>File Status!!</h3>
<br>
</header>
<font color="black">back</font>
<form action=" LogoutServlet" method="post">
<input type="submit" value="Logout" >
</form>
<form method="POST">
File Number:<input type="text" name="status" value="" size="20" />
<input type="submit" value="submit" name="submit" />
</form>
<br>
<section>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/login"
user="root" password="root"/>
<sql:query dataSource="${snapshot}" var="result">
SELECT * from status where fname="${param.status}";
</sql:query>
<table border="1" width="100%">
<tr>
<th>File Number</th>
Below is the column where 1 and 0 are shown under
<th>File Status(IN=1 and OUT=0)</th>
<th>File Department</th>
<th>Date and Time</th>
</tr>
<c:forEach var="row" items="${result.rows}">
<tr>
<td><c:out value="${row.fname}"/></td>
value comes from here
<td><c:out value="${row.fstatus}"/></td>
<td><c:out value="${row.department}"/></td>
<td><c:out value="${row.datetime}"/></td>
</tr>
</c:forEach>
</table>
</section>
<footer>
Copyright 2016 NSIC. All right reserved.
</footer>
</body>
</html>
I don't want 1 and 0 to be shown instead i want IN and OUT to be shown under the column and I don't want to change the database table entery from 1 and 0 to IN and OUT Is there a way I can do this?
you can do it with <c:choose> tag
<c:choose>
<c:when test="${row.fstatus=='1'}">
IN
</c:when>
<c:otherwise>
OUT
</c:otherwise>
</c:choose>

css included in JSP is not working across browser

I have an issue where my CSS is not getting picked up in chrome and firefox but works well in IE8. I didn't check in higher versions of IE though.
below is the code where you can see Soo.css is included in the top and I'm trying to access the CSS for class="TableHeader" in the 2nd td in the table.
I can see the hyperlink for 'Home' in IE8 but not in chrome and firefox. But if I remove the clas="tableheader", I can see the hyperlink for "Home" in both the browser.
I don't see why it shouldn't work across browser. What is the right way to include. I have so many pages where it just works fine. below is the code snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%# taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%# taglib uri="/WEB-INF/abc.tld" prefix="abc" %>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<%# page import="java.util.*" %>
<%# page import="java.text.*" %>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="IBM WebSphere Studio">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/theme/Soo.css"/>
<%
Locale locales = Locale.US;
SimpleDateFormat SFormatDate;
DateFormat CurrentYear;
CurrentYear = DateFormat.getDateInstance(DateFormat.LONG, locales);
Date today = new Date();
SFormatDate = new SimpleDateFormat("MM/dd/yyyy", locales);
CurrentYear = new SimpleDateFormat("yyyy ", locales);
String flag = "N";
%>
<center>
<table width="100%" border="1" cellpadding="0" cellspacing="0" summary="Table used for formatting.">
<tbody>
<tr>
<td colspan="3">
<a href="http://www.abc" target="_blank" title="www.abc">
<img src="<%=request.getContextPath()%>/images/p1_abc_logo.gif" width="157" height="25" border="0" alt="Click here to go to www.abc.">
</a>
</td>
<td align="right" colspan="1">
<img alt="Skip Repetitive Navigation Links" border="0" src="<%=request.getContextPath()%>/images/test_blank.gif">
<span style="color: gray">|</span>
<a href="<%=request.getContextPath()%>/../../../pol1/i2_chgrequest.cfm"
style="color: black"
target="system_feedback"
title="Feedback">Feedback</a>
<span style="color: gray">|</span>
<a href="<%=request.getContextPath()%>/../../../pol1/profile/index.cfm?fa=profile"
title="Click for Personal Profile"
style="color: black">Personal Profile</a>
<span style="color: gray">|</span>
<a href="<%=request.getContextPath()%>/../../../pol1/logout.cfm"
style="color: black"
title="Logout">Logout</a>
<span style="color: gray">|</span> <a name="skipnav1"></a>
</td>
</tr>
<!-- Side Bar -->
<tr valign="top">
<td nowrap width="12%" class="TableHeader" colspan="1">
<img alt="Skip Repetitive Navigation Links" border="0" src="<%=request.getContextPath()%>/images/test_blank.gif"> <br>
<br>
<p style="margin-left: 1em; margin-right: 1em">
<!-- remove href before code freeze -->
<!--a href="<%=request.getContextPath()%>/test.jsp" style="text-decoration: none; color: white"> Back to Main Menu </a-->
<a href="<%=request.getContextPath()%>/../../../pol1/viewer001/i3_menu.cfm?fa=account_menu&group=BMEU&toplevelpage=true"
title="Message Center"
style="text-decoration: none; color: white">Home</a>
</p>
</td>
</tr>
</tbody>
</table>

Enabling back button with Ajax

Following is my index.jsp:
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<s:head/>
<sj:head/>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<title>My Air - Home</title>
</head>
<body>
<div id="MainPage">
<jsp:include page="header.jsp"></jsp:include>
<div id="mainContent">
<jsp:include page="menubar.jsp"></jsp:include>
<div id="mainContentTop">
<div id="ContentLeft">
<jsp:include page="search.jsp"></jsp:include>
</div>
<div id="contentRight">
<jsp:include page="topdeals.jsp"></jsp:include>
</div>
</div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</div>
</body>
</html>
Following is my search.jsp:
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>\
<s:form action="searchFlight" theme="css_xhtml" cssClass="form1small" name="searchFlightForm">
<div class="searchHeadersmall">Search Flight</div>
<div id="searchForm1">
<s:actionerror/>
<s:select list="#application.cityList" headerValue="--------Select--------" headerKey="select" name="searchFlightDetails.from" label="Leaving From"></s:select>
<s:select list="#application.destlist" headerValue="---------Select-------" headerKey="select" name="searchFlightDetails.to" label="Going To"></s:select>
<sj:datepicker id="date0" label="Date" name="searchFlightDetails.dateoftravel" readonly="true" minDate="0"/>
<s:select list="#{'1':'1','2':'2','3':'3','4':'4','5':'5'}" headerValue="" headerKey="" name="searchFlightDetails.noofpassengers" label="No of tickets" style="width:50%; float:left"></s:select>
<div class="inputsmall nobottombordersmall">
<s:radio label="Type" name="searchFlightDetails.nonstop"
list="#{'Y':'NonStop','N':'Normal'}"/>
</div>
<div id="submitdivid1">
<sj:submit value="Show Flights" targets="mainContent"/>
</div>
</div>
</s:form>
When form is submitted the following searchFlightSuccess.jsp is loaded in mainContent <div>:
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<s:if test="#session.username!=null">
<jsp:include page="menubaruser.jsp"></jsp:include>
</s:if>
<s:if test="#session.username==null">
<jsp:include page="menubar.jsp"></jsp:include>
</s:if>
<div id="searchHeaderHistory">Search Results</div>
<div class="CSSTableGenerator">
<table>
<colgroup>
<col span="1" style="width: 5%;">
<col span="1" style="width: 10%">
<col span="1" style="width: 15%">
<col span="1" style="width: 10%">
<col span="1" style="width: 15%">
<col span="1" style="width: 15%">
<col span="1" style="width: 15%">
<col span="1" style="width: 5%">
<col span="1" style="width: 10%">
</colgroup>
<thead>
<tr>
<td colspan="9">From:<s:property
value="searchFlightDetails.from" />
To:<s:property value="searchFlightDetails.to" /></td>
</tr>
</thead>
<tbody>
<tr>
<td>Flight ID</td>
<td>Provider</td>
<td>Departure Source</td>
<td>Via</td>
<td>Via Arrival</td>
<td>Via Departure</td>
<td>Destination Arrival</td>
<td>Fare</td>
<td></td>
</tr>
<s:iterator value="searchedFlightsList" var="flights">
<tr>
<td align="center"><s:property
value="#flights.flightDetails.fid" /></td>
<td align="center"><s:property
value="#flights.flightDetails.providerDetails.pname" /></td>
<td align="center"><s:property value="#flights.sourcedepdate" />,<s:property
value="#flights.sourcedeptime" /> hrs</td>
<td align="center"><s:property
value="#flights.flightDetails.routeDetails.via" /></td>
<td align="center"><s:property value="#flights.viaarrdate" />,<s:property
value="#flights.viaarrtime" />hrs</td>
<td align="center"><s:property value="#flights.viadepdate" />,<s:property
value="#flights.viadeptime" />hrs</td>
<td align="center"><s:property value="#flights.destarrdate" />,<s:property
value="#flights.destarrtime" />hrs</td>
<td width="5%" align="center"><s:property
value="#flights.flightDetails.fares2d" /></td>
<td width="5%" align="center">
<s:form
action="passengerDetailsLink" method="get" theme="simple"
id="passengerDetailsLink_%{#flights.sid}">
<s:hidden value="%{#flights.sid}" name="sid" />
<s:hidden value="%{#flights.flightDetails.fares2d}" name="fare" />
<s:hidden value="%{searchFlightDetails.from}" name="from" />
<s:hidden value="%{searchFlightDetails.to}" name="to" />
<s:hidden value="%{searchFlightDetails.noofpassengers}"
name="passengers" />
<s:hidden value="1" name="flag" />
<sj:submit value="Book" targets="mainContent"
cssClass="orangebuttonsmall" />
</s:form></td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
The scenario is as follows:
I entered some values in search.jsp. I submitted the form, and accordingly some results got loaded into the mainContent <div>. Since form was submitted using Struts 2 jQuery plugin submit , the URL remains the same and hence browser back button doesn't work. If I want to go back, how can I do that.
I read about some hash technique but , I am not able to apply it to this.
In the header tag of Struts2 jQuery use ajaxhistory attribute. Setting this attribute to true enabled browser history for Ajax requests. For details see wiki of header tag.

Call external javascript function frm JSP

I'm brand new to the javascript. I'm trying to call a javaScript function from my jsp.Its not working. I was trying to debug it through bugzila. It saying "No Javascript on this page"
<%# 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">
<html>
<script type="text/javascript" src="ajaxs.js"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<%
out.println("Bismillahir Rahmanir Rahim");
%>
<jsp:useBean id="numBean" class="beans.NumberBean">
<jsp:setProperty name="numBean" property="*" />
</jsp:useBean>
<form action="index.jsp" method="post">
<table>
<tr>
<td>Enter Integers:</td>
<td><input type="text" id="inputString" name="inputString"
value="<jsp:getProperty name="numBean" property="inputString" />"
/> </td>
<td>(Use semi-colon to separate number)</td>
</tr>
<tr>
<td>M - number of largest element to find.:</td>
<td>
<input type="text" id="nthHighest" name="nthHighest"
value="<jsp:getProperty name="numBean" property="nthHighest" />" />
</td>
</tr>
</table>
<input type="submit" value="Identify" onclick="ajaxFunction()" />
<div id="result"></div>
</form>
</body>
</html>
I'm trying to call "ajaxFunction()" on onclick event.
I included js file as following at the top:
<script type="text/javascript" src="ajaxs.js"></script>
can u pls help me to identify what I'm doing wrong here...
Thanks in advance
Try with including script tag with "src="ajaxs.js" (your current script that including "src="ajaxs.js") within head tag.The contents within head tag load at the loading page .
thanks....

Categories