Question posted in 
I am creating a page which displays some records from the database (please refer to the screen shots). Each row has an edit button which opens up a bootstrap modal for inputing comments and changing the user’s status. On clicking the done button, I have to update the changes in the database preferably using AJAX. However it’s not properly working. I can’t seem to understand what’s going wrong.
This is my jsp page…
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.util.ArrayList"%>
<%@ 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 lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<%
String loginIdEdit = "";
%>
**<script>
$(function() {
//twitter bootstrap script
$("button#save").click(function(e) {
$.ajax({
type : "POST",
url : "defaulterUpdater.jsp",
data : $('form.contact').serialize(),
success : function(msg) {
},
error : function() {
alert("Failed");
}
});
});
});
</script>**
<script type="text/javascript">
function myFun() {
alert("welcome");
var demo = document.createElement('div');
demo.innerHTML = demo.innerHTML
+ "<tr><input type='text' name='mytext'><tr>";
}
</script>
</head>
<body>
<div class="container">
<form method="post" action="RegistrationServlet">
<%
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
Connection con = null;
con = DBManager.getConnection();
Statement st = con.createStatement();
String userName = "";
ArrayList<AutoDefaulterVO> defaulterList = null;
HttpSession session2 = request.getSession();
if (session2.getAttribute("first_name") == null) {
out.println("Your session expired.....");
%>
<a href="Home.jsp">Please Login Again to continue</a>
<%
} else {
defaulterList = (ArrayList<AutoDefaulterVO>) session2
.getAttribute("autoDefaulterList");
userName = session2.getAttribute("first_name").toString();
%>
<form action='LogoutServlet' method=POST>
<table align="right" style="width: 100%">
<tr>
<td align="left"><input type="submit" name="logout"
value="Home" onclick="form.action='AdminHome';">
</td>
<td align="right"><input type="submit" name="logout"
value="Logout" onclick="form.action='LogoutServlet'">
</td>
</tr>
</table>
</form>
<h3 align="center">Auto Defaults</h3>
<table border="1" style="width: 100%">
<br>
<br>
<h3 align="center">
Welcome
<%=userName%></h3>
<table border="1" style="width: 100%" class="table table-hover">
<tr>
<th>Default Status</th>
<th>Borrower Name</th>
<th>Borrower Rating</th>
<th>Accural Status</th>
<th>Bank Number</th>
<th>Account Number</th>
<th>Days Past Due</th>
<th>Comments</th>
</tr>
<%
for (int i = 0; i < defaulterList.size(); i++) {
AutoDefaulterVO defaulter = new AutoDefaulterVO();
defaulter = defaulterList.get(i);
loginIdEdit = defaulter.getDefaulterLoginID();
System.out.println("Printing only auto defaulter in jsp ");
%>
<tr>
<%-- <td><%=defaulter.getDefaultStatus()%></td> --%>
<td>Auto Defaulter</td>
<td><%=defaulter.getBorrowerName()%></td>
<td><%=defaulter.getBorrowerRating()%></td>
<td><%=defaulter.getAccuralStatus()%></td>
<td><%=defaulter.getBankNumber()%></td>
<td><%=defaulter.getAccountNumber()%></td>
<td><%=defaulter.getDaysPastDue()%></td>
<%-- <td><%=loginIdEdit%></td> --%>
<td>
<%
ResultSet rs = st
.executeQuery("select * from aip_comments");
while (rs.next()) {
System.out.println("Auto defaulter loginId printing-->"
+ defaulter.getDefaulterLoginID());
String loginId = rs.getString("login_id");
System.out.println("databse loginId printing-->"
+ rs.getString("login_id"));
if (defaulter.getDefaulterLoginID().equals(
rs.getString("login_id"))) {
%> <%=rs.getString("comments")%> <%
}
}
%>
</td>
<td>
<!-- <form name="editForm" action="edit.jsp">
<button type="button" data-toggle="modal" class="btn btn-default" data-target="#myModal">Edit</button>
-->
<form class="contact">
<button href="#edit-modal" type="button" data-toggle="modal"
class="btn btn-default" data-target="#<%=loginIdEdit %>">Edit</button>
<!-- <a data-toggle="modal" data-target="#<%=loginIdEdit%>" href="#">Edit</a> -->
<!-- <input type="submit" name="editButton" value="Edit"> -->
<!--<input type="hidden" id="edit" name="edit" value="<%=loginIdEdit%>" />-->
</td>
<div class="modal fade" id="<%=loginIdEdit%>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
Edit status and add comment for
<%=defaulter.getBorrowerName()%></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="sel1"><span></span>Select status:</label> <select
class="form-control" id="sel1" name="sel1">
<option>Validate Error</option>
<option>Auto Weaver</option>
<option>ReDefault</option>
</select>
</div>
<div class="form-group">
<label for="defaultercomment"><span></span>Add
comment:</label> <input type="text" class="form-control"
name="defaultercomment" id="defaultercomment"<%-- value="<%=loginIdEdit%>" --%>>
</div>
</div>
<div class="modal-footer">
<button type="button" id="save" name="save"
class="btn btn-default" data-dismiss="modal" align="centre">Done</button>
</div>
</div>
</div>
</div>
</form>
<%
}
%>
</tr>
</table>
<%
}
%>
</body>
</html>
ajax URL redirects to below jsp page,defaulterUpdater.jsp where I only print the values to see if they’re correctly retrieved.
<%@ 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>
</head>
<body>
<% String selection = request.getParameter("sel1");
String comment = request.getParameter("defaultercomment");
System.out.println("selection-"+selection+"comment--"+comment);
%>
</body>
</html>
The values are accepted only for the first row..For rest of the rows null values are being printed. Any help will be appreciated. Thanks!
2
Answers
I got the code working. Basically needed an unique identifier for "done" button as is rule of javascript. Hence it was not working for all rows. I gave unique id's to the form and by submitting called the onclick method.. onClick="callAjax(this.form)"
So now it's working. Thank you all for your help!
You are putting the modal wrong inside the table. By table syntax it is wrong. You must put this modal out from the table and call ajax inside the shown.bs.modal event of bootstrap.
As you need to repeat buttons. Keep a hardwired id of the button which will open the modal, also keep an data-attribute-id to uniquely identify the button clicked which will help you to get details about which button clicked in the list(as buttons are repeating for each row, your data-attribute-id will be loginid of the row).
Then write jquery with event shown.bs.modal, like
I have posted a similer answer previously in asp.net mvc but you will have idea as situation is similer to you.
Please visit my answer on question dynamically created bootstrap3 modals do not work
Hope it will help to get idea to resolve this.
@Update Section Removed your some code for clean view