I am trying to display comments on the modal for different posts. When I click the comment button of first post. It shows the comments related to that post but for second post when I click comment button it is showing the comments of first post.
Here is the code
<!-- The Modal -->
<!-- Modal content -->
<div id="myC" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<%
PreparedStatement ps2 = null;
ResultSet rs2 = null;
String sql2 = "select * from comment where post_id=? ";
ps2 = con.prepareStatement(sql2);
ps2.setInt(1, rs.getInt("post_id"));
rs2 = ps2.executeQuery();
while (rs2.next()) {
%>
<p style="background-color: #e3f2fd; padding: 10px; margin: 10px;" id="com" ><%= rs2.getString("comment")%></p>
<script>
$(document).ready(function() {
$(".c").click(function() {
$("#myC").modal('show');
var com = document.getElementById("com");
com.textContent = this.content;
});
});
</script>
<% }
%>
<p id="print" ></p>
<textarea class="comment" name="comment" id="comment" style="padding: 10px; margin: 5px; "></textarea><br>
<!--<a href="AddComment.jsp?to_user=">-->
<input type="hidden" value="<%=rs.getInt("post_id")%>" name="post_id" id="post_id">
<button type="button" class="btn btn-dark" style="width: 50%; margin-bottom : 12px; margin-left: 120px;" onclick="loadAjax()">Post Comment</button>
</div>
</div>
</div>
I use loadAjax() method to store the comments in database without refreshing the page.
'''
<script type="text/javascript">
function loadAjax() {
var comment = document.getElementById("comment").value;
var post_id = document.getElementById("post_id").value;
// if (username.trim() == "" || email.trim() == "" || topic.trim() == "" || comment.trim() == "") {
// alert("All fields are Required");
// return false;
// }
var url = "AddComment.jsp?post_id=" + post_id + "&comment=" + comment;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = sendInfo;
request.open("POST", url, true);
request.send();
} catch (e) {
document.write(e);
}
}
function sendInfo() {
var p = document.getElementById("print");
if (request.readyState == 1) {
var text = request.responseText;
p.innerHTML = "Please Wait...";
console.log("1");
}
if (request.readyState == 2) {
var text = request.responseText;
console.log("2");
}
if (request.readyState == 3) {
var text = request.responseText;
console.log("3");
}
if (request.readyState == 4) {
var text = request.responseText;
p.innerHTML = text;
}
}
</script>
''' AddComment.jsp :
<%@page import="dao.Methods"%>
<%@page import="myconnection.MyCon"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import ="java.sql.*"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add Comment</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<%
String comment = request.getParameter("comment");
int post_id = Integer.parseInt(request.getParameter("post_id"));
HttpSession session2 = request.getSession();
int by_user= Integer.parseInt(session2.getAttribute("user_id").toString());
try {
Methods method = new Methods();
if (method.addComment(by_user, post_id, comment)) {
%>
<div class="panel-body">
<%=comment%>
</strong>
</div>
</div>
</div>
<%
}
} catch (Exception e) {
out.println(e);
}
%>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>