How to display content on modal from database?

Viewed 84

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>
0 Answers
Related