jquery - ドロップダウン選択ボックスの変更イベントでAjaxとjQueryを使用してサーブレットを呼び出す方法は?

Question

私は JSP とサーブレットのページネーションコードに取り組んでいます。これで、従業員のリストを表示したいと思います。MVC パターンを使用してこれを設計しようとしています。

次のコードを呼び出す手順:

ブラウザで dispEmployee.jsp ページを呼び出します。
その中のリストハイパーリンクをクリックします。EmpServlet.java サーブレットを呼び出します。
選択ボックスからページ番号を選択して、ページ間を移動します。

質問：

ここで、上記の手順に従って進みます。step2までは問題なく動いています。ステップ3を呼び出そうとすると、つまり、選択ボックスから別のページ番号を選択すると、選択したページの情報が表示されますが、その後、選択ボックスから他のページを選択するたびに変更イベントが呼び出されません

私の ajax と jQuery コードの何が問題なのか教えてください。

以下のコードを参照してください。ここでは、DAO および Bean コードは指定されていません。

dispEmployee.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employees</title>
<script type="text/javascript" src="js/stdlib/jquery-1-4-2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
alert("this is test");
// var link= $('#id_pageselect');
var selpage=$('#id_pageselect').val();
$("#id_pageselect").change(function(){
    alert("this is test1"); 
/*  $.ajax({
     type:"Post",
     url:"/EmpServletSnipet",
     data:"page=" + selpage,
     success:function(content){
                alert("test2"); 
                $('#display').empty();
                $('#display').append(content);
            }
     });*/
     //I have updated code by commenting the $.ajax method.and by writing following lines. 

   //I have also removed the '/' forward slash before EmpServletSnipet in following lines of code. 

    //Its working for fine but only for first chage event of select box after that when

    //I try to change the page from newly rendered select box Its not even invoke change event.

      $('#display').empty;
      $('#display').load('EmpServletSnipet',{page:$("#id_pageselect").val()});       
});
});
</script>

</head>
<body>
<div id="display" style="position:static; left:1003px; top:602px; width:500px; height:600px; z-index:10; overflow: scroll;">
<a href="http://localhost:8080/webdynamic/EmpServlet?page=1">List</a>
<select name="pageselect" id="id_pageselect">
<c:forEach begin="1" end="${noOfPages}" var="i">
            <c:choose>
                <c:when test="${currentPage eq i}">
                    <option value="${i}" selected>${i}</option>
                </c:when>
                <c:otherwise>
                    <option value="${i}">${i}</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
</select>
    <table border="1" cellpadding="5" cellspacing="5">
<tr>
        <th>Emp ID</th>
        <th>Emp Name</th>
        <th>Salary</th>
        <th>Dept Name</th>
    </tr>
    <c:forEach var="employee" items="${employeeList}">
        <tr>
            <td>${employee.employeeId}</td>
            <td>${employee.employeeName}</td>
            <td>${employee.salary}</td>
            <td>${employee.deptName}</td>
        </tr>
    </c:forEach>
</table>
</div>

EmpServlet.java サーブレットはコントローラーとして機能します。このサーブレットは、jsp ファイルからページリクエストを取得し、DAO から従業員レコードを取得します。doGet メソッドと doPost メソッドのみが提供されます。

EmpServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int page = 1;
    int recordsPerPage = 5;
    if(request.getParameter("page") != null)
        page = Integer.parseInt(request.getParameter("page"));
    EmployeeDAO dao = new EmployeeDAO();
    List<Employee> list = dao.viewAllEmployees((page-1)*recordsPerPage,
                             recordsPerPage);
    System.out.println("Employee list : "+list.size());
    int noOfRecords = dao.getNoOfRecords();
    int noOfPages = (int) Math.ceil(noOfRecords * 1.0 / recordsPerPage);
    request.setAttribute("employeeList", list);
    request.setAttribute("noOfPages", noOfPages);
    request.setAttribute("currentPage", page);
    RequestDispatcher view = request.getRequestDispatcher("displayEmp.jsp");
    view.forward(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request,response);
}

EmpServletSnipet.java サーブレットは、ajax リクエストで選択したページのレコードをフェッチし、いくつかのコードスニペットを ajax レスポンスとして送信するために使用されます。

id を表示としてレンダリングされます。doGet メソッドと doPost メソッドのみが提供されます。

EmpServletSnipet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("This is EmpServletSnipet");
int page = 1;
    int recordsPerPage = 5;
    if(request.getParameter("page") != null)
    page = Integer.parseInt(request.getParameter("page"));
    EmployeeDAO dao = new EmployeeDAO();
    List<Employee> list = dao.viewAllEmployees((page-1)*recordsPerPage,recordsPerPage);
    System.out.println("Employee list : "+list.size());
    int noOfRecords = dao.getNoOfRecords();
    int noOfPages = (int) Math.ceil(noOfRecords * 1.0 / recordsPerPage);
    PrintWriter pw=response.getWriter();

    response.setContentType("text/html");
    response.setHeader("Cache-control", "no-cache, no-store");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "-1");

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    response.setHeader("Access-Control-Max-Age", "86400");

    pw.println("<a href=\"http://localhost:8080/webdynamic/EmpServlet?page=1\">List</a>");
    pw.println("<select name=\"pageselect\" id=\"id_pageselect\">");
        for(int i=1;i<=noOfPages;i++){
            if(i==page){
                pw.println("<option value="+ i +" selected>"+ i +"</option>");
            }else{
                pw.println("<option value="+ i +">"+ i +"</option>");
            }
        }

    pw.println("</select>");

    pw.println("<table border=\"1\" cellpadding=\"5\" cellspacing=\"5\">" +
            "<tr>" +
            "<th>Emp ID</th>" +
            "<th>Emp Name</th>" +
            "<th>Salary</th>" +
            "<th>Dept Name</th>" +
            "</tr>");
    Employee emp=null;
    for(int j=0;j<list.size();j++){
        emp=list.get(j);
        pw.println("<tr>" +
                "<td>"+emp.getEmployeeId()+"</td>" +
                "<td>"+emp.getEmployeeName()+"</td>" +
                "<td>"+emp.getSalary()+"</td>" +
                "<td>"+emp.getDeptName()+"</td>" +
                "</tr>");
    }

    pw.println("</table>");
    pw.println("<td><a href=\"EmpServlet?page="+(page-1)+"\" id=\"prevpg\">Previous</a></td>");
    pw.println("<td><a href=\"EmpServlet?page="+(page+1)+"\" id=\"nextpg\">Next</a></td>");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request,response);
}

この問題で私を導いてください。

score 0 · Accepted Answer

試す

<script type="text/javascript">
function attach(){
    $('#id_pageselect').on('change',function(){
       $('#display').load('/EmpServletSnipet',{page:$(this).val()});
       // attach again, because the old #id_pageselect is lost!
       attach();
    });
}
$(function(){
    attach();
})
</script>

jquery - ドロップダウン選択ボックスの変更イベントでAjaxとjQueryを使用してサーブレットを呼び出す方法は?

1 に答える 1

Related

Reference