Displaying the details of a row clicked and details fetched from database in same jsp using ajax

Question

I am new to java and jsp. I have a jsp which displays the data fetched from database in from of table and i want display the details of each row onclick of rows in same jsp. Could any one Please help on doing this.

This is my jsp code

<div class="release">
    <table>
        <% for (BuildStreamBean res : nm_release) { %>
            <tr  bgcolor=#ffffff>
                <td id="release" style="cursor: pointer" onclick="getrelease(this, <%=res.getId_release()%>);">
                    <c:out value="<%=res.getNm_release()%>" />
                </td>
            </tr>
        <% } %>
     </table>                            
 </div>

And my servlet code is

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    List<BuildStreamDetailsBean> buildStreamDet = new ArrayList<BuildStreamDetailsBean>();
    buildStreamDet = BuildStreamDAO.getBuildDetails(request.getParameter("id_release"), buildStreamDet);

    List<BuildStreamDDBean> buildStreamTp = new ArrayList<BuildStreamDDBean>();
    buildStreamTp = BuildStreamDAO.getBuildStreamTp(build_stream_tp);

    request.setAttribute("build_stream_det", buildStreamDet);
    request.setAttribute("build_stream_tp", buildStreamTp);
    RequestDispatcher view = request.getRequestDispatcher("buildStream.jsp");

    view.forward(request, response);
}

I have tried to find solutions and found that i have to use ajax function but not sure how to return the response to jsp from servlet and dislplay them in text boxes. Here i am fetching details of rows from database.

Answer 1

Since you want to show detail info in the same page,The best choice for you is using Ajax

You can try as below:

<div class="release">
    <table>
        <%for (BuildStreamBean res : nm_release) {%>
        <tr  bgcolor=#ffffff>
            <td id="release" style="cursor: pointer"
                onclick="getrelease('<%=res.getId_release()%>');" onkeyup="">
                    <c:out  value="<%=res.getNm_release()%>"/>
                    <div id="<%=res.getId_release()%>"></div>
                </td>
        </tr><%}%>
    </table>                            
</div>

make the js function getrelease() as below:

function getrelease(releaseId){
  $.ajax({
    url:"yourURL",
    type:"post",
    data:{
       id_release:id_release
    },
    success:function(data){
       $("#"+releaseId).html(data);
    }
  });
}