how to create pop window on text box click in jsp page using jquery

Question

I have created jsp page to display all surveys from database mysql and display in tabular form.When click on textfield it should show popup with full detail of that survey clicked.

jsp page

   <sql:setDataSource var="myDS" driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost/survey" user="root" password="root" />
    <sql:query var="listUsers"   dataSource="${myDS}">
        SELECT * FROM surveydetail
    </sql:query>
    <div align="center">
        <table border="1" cellpadding="5" class="tableview">
            <h2>List of Survey</h2>
            <tr>
                <th>ID</th>
                <th>Question</th>
            </tr>
            <c:forEach var="user" items="${listUsers.rows}">
                <tr>
                    <td><input type="text" value="<c:out value="${user.questionId}" />" readonly></td> 
                    <td><input type="text" value="<c:out value="${user.questionName}"/>" class="open" name="questionname" readonly> </td>
                     <c:set var="questionid" value="${user.questionId}"/>
                </tr>
            </c:forEach>
        </table>
    </div>
    
    <div class="popup-overlay">
        <div class="popup-content">
            <h2>Pop-Up</h2>
            <sql:query var="SingleUser"   dataSource="${myDS}">
                SELECT * FROM surveydetail where questionId=?
                 <sql:param value="${questionid}" /> 
            </sql:query>
            
                    <c:if  test="${SingleUser.selectType}=='multiple'">
                    <label><c:out value="${SingleUser.surveyTitle}" /></label> <br>
                    <label><c:out value="${SingleUser.questionName}" /></label> <br>
                    <input type="checkbox" name="check1"><input type="text" id="t1" name="txt1" value=<c:out value="${SingleUser.optionOne}" />readonly><br>
                    <input type="checkbox" name="check2"><input type="text" id="t2" name="txt2" value=<c:out value="${SingleUser.optionTwo}" />readonly><br>
                    <input type="checkbox" name="check3"><input type="text" id="t3" name="txt3" value=<c:out value="${SingleUser.optionThree}" />readonly><br>
                    <input type="checkbox" name="check4"><input type="text" id="t4" name="txt4" value=<c:out value="${SingleUser.optionFour}" />readonly>
                    </c:if >
            
                    <c:if  test="${SingleUser.selectType}=='single'">
                    <label><c:out value="${SingleUser.surveyTitle}" /></label> <br>
                    <label><c:out value="${SingleUser.questionName}" /></label> <br>
                    <input type="radio" id="r1" name="radioval"><input type="text" id="t1" name="txt1" value=<c:out value="${SingleUser.optionOne}" />readonly> <br>
                    <input type="radio" id="r2" name="radioval"><input type="text" id="t2" name="txt2" value=<c:out value="${SingleUser.optionTwo}" />readonly> <br>
                    <input type="radio" id="r3" name="radioval"><input type="text" id="t3" name="txt3" value=<c:out value="${SingleUser.optionThree}" />readonly> <br>
                    <input type="radio" id="r4" name="radioval"><input type="text" id="t4" name="txt4" value=<c:out value="${SingleUser.optionFour}" />readonly>
                    </c:if >
            
                    <c:if test="${SingleUser.selectType}=='short'">
                    <label for="title"><c:out value="${SingleUser.surveyTitle}" /></label> <br>
                    <label for="title"><c:out value="${SingleUser.questionName}" /></label> <br>
                    <input type="text" id="txt1" value=<c:out value="${SingleUser.shortAnswer}" />readonly>
                </c:if> 
            
            <input type="button" class="close" value="Close">  
        </div>
        </div>
<form method="post" action="CreateSurveyView.jsp">
        <div>
            <input type="submit" id="addDetail" name="add" value="Create New Survey" >
        </div>
    </form>

css file I created 2 div by default they are hidden when click on text box should enable div

.popup-overlay {
visibility:hidden;
}

.popup-content {
visibility:hidden;
}
.popup-overlay.active{
visibility:visible;
}

.popup-content.active {
visibility:visible;
}

jquery: on open and close class

$(".open").on("click", function(e){
        $(".popup, .popup-content").addClass("active");
        });
    
    alert("popup");
    $(".close, .popup").on("click", function(){
        $(".popup, .popup-content").removeClass("active");
        });

Answer 1

You cannot directly pass the value of questionId to your second query , you either need to submit your data and use ${param.yourvalue} to access in your query or use ajax and passed the questionId to any jsp page and sent back response to show particular data under pop-up.Some changes you need to make in your code for doing same with ajax :

Your jsp page :

 <c:forEach var="user" items="${listUsers.rows}">
     <tr>
       <td>
     <!--added this hidden field which will have questionId value-->
       <input type="text" name ="qid" value="<c:out value="${user.questionId}"/>" hidden> <input type="text" value="<c:out value="${user.questionName}" />" readonly></td> 
        <td><input type="text" value="<c:out value="${user.surveyTitle}"/>" class="open" name="questionname" readonly> </td>
          </tr>
   </c:forEach>

Your pop-up should look like below :

<div class="popup-overlay">
  <div class="popup-content">
    <!--here result will come from ajax-->
  </div>
</div>

Your jquery code should be like below :

$(document).on("click", ".open", function(e) {
      //getting question id
      var qid = $(this).closest("tr").find("input[name='qid']").val();
    alert(qid);//to test
      $.ajax({
        url: "yourjsppage", //any jsp page or servlet
        data: {
          qid: qid
        }, //pass the data
        success: function(response) {
          //putting  response under div
          $(".popup-content").html(response);
          //show popup
          $(".popup, .popup-content").addClass("active");
        }

      });

Your server-side(any jsp or servlet) page :

//get qid which is passed from ajax
 String qid = (String) request.getParameter("qid");
 String query = "SELECT * FROM surveydetail where questionId=?";
 PreparedStatement ps = con.prepareStatement(query);
 ps.setString(1, qid);
 ResultSet rs = ps.executeQuery();
 //if value rlated to that id is exist
 if (rs.next()) {
  //see  the selectType
  if (rs.getString("selectType").equals("multiple")) {
   //this will go back to ajax response
   out.println("<label>" + rs.getString("surveyTitle") + "</label> <br><label>" + rs.getString("questionName") + "</label> <br>");
   out.println("<input type='checkbox' name='check1'>" + "<input type='text' id='t1' name='txt1' value=" + rs.getString("optionOne") + " readonly><br>");
   out.println("<input type='checkbox' name='check2'>" + "<input type='text' id='t2' name='txt2' value=" + rs.getString("optionTwo") + " readonly><br>");
   out.println("<input type='checkbox' name='check3'>" + "<input type='text' id='t3' name='txt3' value=" + rs.getString("optionThree") + " readonly><br>");
   out.println("<input type='checkbox' name='check4'>" + "<input type='text' id='t4' name='txt4' value=" + rs.getString("optionFour") + " readonly><br>");

  } else if (rs.getString("selectType").equals("single")) {
   //this will go back to ajax response
   out.println("<label>" + rs.getString("surveyTitle") + "</label> <br><label>" + rs.getString("questionName") + "</label> <br>");
   out.println("<input type='radio' name='r1'>" + "<input type='text' id='t1' name='txt1' value=" + rs.getString("optionOne") + " readonly><br>");
   out.println("<input type='radio' name='r2'>" + "<input type='text' id='t2' name='txt2' value=" + rs.getString("optionTwo") + " readonly><br>");
   out.println("<input type='radio' name='r3'>" + "<input type='text' id='t3' name='txt3' value=" + rs.getString("optionThree") + " readonly><br>");
   out.println("<input type='radio' name='r4'>" + "<input type='text' id='t4' name='txt4' value=" + rs.getString("optionFour") + " readonly><br>");


  } else {
   //this will go back to ajax response for short
   out.println("<label>" + rs.getString("surveyTitle") + "</label> <br><label>" + rs.getString("questionName") + "</label> <br>");
   out.println("<input type='text' id='txt1' name='txt1' value=" + rs.getString("shortAnswer") + " readonly><br>");
}
}