I am trying to update the table on the jsp page whenever I click submit it should perform the necessary operations on the database and update them in the jsp page without refreshing the page. I have added event.preventDefault() but due to this I am not able to add another record and also the modal popup is not hiding whenever I click on Submit. What would be the appropriate solution for this.
<%@taglib uri="http://jakarta.apache.org/struts/tags-logic"
prefix="logic"%>
<%@taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ page import="com.db.UserAction"%>
<%@ page import="com.form.LoginForm"%>
<!DOCTYPE html>
<html>
<head>
<title>List of Students Records</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#table {
margin: 4px;
}
th {
text-align: center;
}
td {
text-align: center;
}
</style>
</head>
<body class="text-center">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal
title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="row g-3" action="login.do" id="myform">
<div class="col-12">
<label for="stdid" class="form-label">Student ID</label> <input
type="number" class="form-control" id="stdid"
placeholder="Enter 3 digit Student ID" name="stdid">
</div>
<div class="col-12">
<label for="stdname" class="form-label">Student Name</label> <input
type="text" class="form-control" id="stdname" name="stdname"
placeholder="John Doe">
</div>
<div class="col-md-6">
<label for="stdemail" class="form-label">Email</label> <input
type="email" class="form-control" id="stdemail" name="stdemail"
placeholder="[email protected]">
</div>
<div class="col-md-6">
<label for="stdpassword" class="form-label">Password</label> <input
type="password" class="form-control" id="stdpassword"
name="stdpassword" placeholder="Enter Password">
</div>
<div class="modal-footer">
<button id="load-table-button" type="submit"
class="btn btn-primary">Add</button>
<button type="reset" class="btn btn-warning">Reset</button>
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal
title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- //////////////////////////////Modal Code end/////////////////////////////////// -->
<div id="table-container">
<table class="table table-success table-striped-columns table-hover"
id="table">
<tr class="table-light">
<th>Index</th>
<th>Student Id</th>
<th>Student Name</th>
<th>Student Email</th>
<th>Password</th>
</tr>
<logic:iterate name="student" id="newUser" indexId="studentIndex">
<tr class="table-light">
<td><bean:write name="studentIndex" /></td>
<td><bean:write name="newUser" property="stdid" /></td>
<td><bean:write name="newUser" property="stdname" /></td>
<td><bean:write name="newUser" property="stdemail" /></td>
<td><bean:write name="newUser" property="stdpassword" /></td>
</tr>
</logic:iterate>
</table>
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">Add New Record</button>
</div>
</div>
<div id="div1"></div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#myform").submit(function(e) {
e.preventDefault();
var f = $(this).serialize();
// $("#div1").load("loadTable.jsp");
$.ajax({
url : "login.do",
type : 'post',
data : f,
success : function(data, textStatus, jqXHR) {
//$("#exampleModal").modal('hide');
getStudent();
}
})
function getStudent() {
$.ajax({
url : "first.do",
type : 'get',
success : function(data) {
$("#table-container").html(data);
}
})
}
});
});
</script>
</body>
</html>
The table in the background is updating after clicking on the Submit button. But the popup is not hiding and it is still there I have also added an action if user enter the same data it would go on the next page to state the data is entered twice. But due to prevent method it is not updating.
I have used find method to do this so it would take the response in html code. Please ignore my comments in code. The find method is in the script tag below