2016-03-07 100 views
1

我正在編寫一個程序,其中有一個表格可以在有日期變更時創建。但是這裏的問題,首先在選擇日期時創建表,但是當我開始更改日期時表不會創建,並且在控制檯中沒有錯誤。以下是我的代碼。jquery datepicker只能在頁面刷新後才能工作

table.jsp

<html> 
<head> 
<link rel="stylesheet" 
    href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="jbPivot.min.js"></script> 
<link rel="stylesheet" href="jbPivot.css"> 


</head> 
<body> 
    <marquee> 
     <h1>This is an example of ajax</h1> 
    </marquee> 

    <p> 
     Date: <input type="text" id="startDatePicker"> 
    </p> 
    <p> 
     Date: <input type="text" id="endDatePicker"> 
    </p> 
    <span id="somediv"> <span id="err">Select Correct Dates</span> 
    </span> 
    <script type="text/javascript" src="tableGenerator.js"></script> 

</body> 
</html> 

tableGenerator.js

var startDate = $("#startDatePicker").datepicker({ 
    dateFormat : 'yy-mm-dd', 
    onClose : function(selectedDate) { 
     $("#endDatePicker").datepicker("option", "minDate", selectedDate); 
    } 
}); 
var endDate = $("#endDatePicker").datepicker({ 
    dateFormat : 'yy-mm-dd', 
    onClose : function(selectedDate) { 
     $("#startDatePicker").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
$(document).on('change', '#startDatePicker,#endDatePicker', function() { 
    $('#somediv > table').remove(); 
    $.getJSON('Controller', { 
     'startDate' : startDate.val(), 
     'endDate' : endDate.val() 
    }, function(searchList) { 
     console.log(JSON.stringify(searchList)); 
     if (searchList.length < 1) { 
      $('#err').show(); 
      $('#err').text("No Records found in Specified Dates"); 
     } else { 
      $("#somediv").jbPivot({ 
       fields : { 
        caseOwner : { 
         field : 'caseOwner', 
         sort : "asc", 
         showAll : true, 
         agregateType : "distinct" 
        }, 
        finalStatus : { 
         field : 'finalStatus', 
         sort : "asc", 
         showAll : false, 
         agregateType : "distinct" 
        }, 
        status : { 
         field : 'status', 
         sort : "asc", 
         showAll : false, 
         agregateType : "distinct" 
        }, 
        Count : { 
         agregateType : "count", 
         groupType : "none" 
        }, 
       }, 
       xfields : [ "caseOwner" ], 
       yfields : [ "finalStatus" ], 
       statfields : [ "status" ], 
       zfields : [ "Count" ], 
       data : searchList 
      }); 

     } 

    }); 
}); 

控制器

import java.io.IOException; 
import java.text.SimpleDateFormat; 
import java.util.ArrayList; 
import java.util.Date; 

import javax.servlet.ServletException; 
import javax.servlet.annotation.WebServlet; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import org.bean.UserBean; 

import com.dao.DataDao; 
import com.google.gson.Gson; 

@WebServlet("/Controller") 
public class Controller extends HttpServlet { 
    private static final long serialVersionUID = 1L; 

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     try { 
      /* Date Start */ 
      String startDateStr = request.getParameter("startDate"); 
      String endDateStr = request.getParameter("endDate"); 
      System.out.println("Start date got is " + startDateStr + " and end date is " + endDateStr); 
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); 
      SimpleDateFormat print = new SimpleDateFormat("yyyy-MM-dd"); 
      Date startParsedDate = null, endParsedDate = null; 
      String startDate = null, endDate = null; 
      if (startDateStr != null && !startDateStr.equals("")) { 
       startParsedDate = sdf.parse(startDateStr); 
       startDate = print.format(startParsedDate); 
      } 
      if (endDateStr != null && !endDateStr.equals("")) { 
       endParsedDate = sdf.parse(endDateStr); 
       endDate = print.format(endParsedDate); 
      } 

      System.out.println(startDate + " value and " + endDate); 
      /* Date End */ 
      DataDao dataDao = new DataDao(); 
      ArrayList<UserBean> list = dataDao.getFrameWork(startDate, endDate); 
      String searchList = new Gson().toJson(list); 
      response.setContentType("application/json"); 
      response.setCharacterEncoding("UTF-8"); 
      response.getWriter().write(searchList); 
      System.out.println("servlet Done"); 
     } catch (Exception e) { 
      System.err.println(e.getMessage() + " servlet Errotr"); 
     } 
    } 
} 

DataDAO.java

package com.dao; 

import java.sql.Connection; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.util.ArrayList; 

import org.bean.UserBean; 

public class DataDao { 
    private Connection connection; 

    public DataDao() throws Exception { 
     connection = DBUtility.getConnection(); 
    } 

    public ArrayList<UserBean> getFrameWork(String startDate, String endDate) throws SQLException { 
     String startDateFromController = startDate; 
     String endDateFromController = endDate; 
     System.out.println("DAO VAlues are " + startDateFromController + " and " + endDateFromController); 
     ArrayList<UserBean> list = new ArrayList<UserBean>(); 
     PreparedStatement ps = null; 
     try { 
      String query; 

      if (!(startDateFromController == null) && endDateFromController == null) { 
       System.out.println("first block imvoked"); 
       query = "select * from StatusTable where convert(date, [Start Time]) >= ?"; 
       ps = connection.prepareStatement(query); 
       ps.setString(1, startDateFromController); 
      } else if (startDateFromController == null && !(endDateFromController == null)) { 
       System.out.println("end date is " + endDateFromController); 
       System.out.println("second"); 
       query = "select * from StatusTable where convert(date, [Start Time]) <= ?"; 
       ps = connection.prepareStatement(query); 
       ps.setString(1, endDateFromController); 
      } else if (startDateFromController == null && endDateFromController == null) { 
       System.out.println("Thuird block"); 
       query = "select * from StatusTable where [Start Time] Is NOT NULL"; 
       ps = connection.prepareStatement(query); 
      } else { 
       System.out.println("Forth block"); 
       query = "select * from StatusTable where convert(date, [Start Time]) between ? and ?"; 
       ps = connection.prepareStatement(query); 
       ps.setString(1, startDate); 
       ps.setString(2, endDate); 
      } 
      ResultSet rs = ps.executeQuery(); 
      if (!rs.next()) { 
       System.out.println("No records found"); 
      } else { 
       do { 
        UserBean userBean = new UserBean(); 
        userBean.setCaseNumber(rs.getString("Case Number")); 
        userBean.setCaseOwner(rs.getString("Case Owner")); 
        userBean.setStatus(rs.getString("Status")); 
        userBean.setIssue(rs.getString("Issue")); 
        userBean.setReason(rs.getString("Reason")); 
        userBean.setDateOpened(rs.getString("Date/Time Opened")); 
        userBean.setAge(rs.getInt("Age")); 
        userBean.setFinalStatus(rs.getString("Final Status")); 
        list.add(userBean); 
       } while (rs.next()); 
      } 
     } catch (Exception e) { 
      System.out.println(e + " DAO Error"); 
     } 
     return list; 
    } 
} 

請讓我知道我能做到這一點。我應該在不刷新頁面的情況下獲取數據。即一旦我改變日期,改變應該是反映。

感謝

+0

嗨@Arkantos,感謝您的快速編輯。 – user3872094

+0

我認爲你可以刪除你的'DBUtility'代碼。回到你的問題,你是否檢查了你在更改日期時所做的AJAX調用的響應?打開開發工具(F12)並查看網絡選項卡,並查看響應是否按預期進行 – Arkantos

+0

是的,我做過了,它與json的響應相同。我的意思是沒有錯誤或這樣的事情,JSON數據顯示在日誌中。 – user3872094

回答

0

我在你的代碼中看到的問題是,你總是試圖初始化somediv元素上的數據透視表部件。我認爲數據透視表小部件不會更新表格,如果您嘗試使用不同的數據一次又一次地在同一元素上初始化小部件。根據文檔here,如果您想要替換表格數據,則應該獲得對數據透視表對象的引用,並使用新列表調用insertRecords()

var $data = $("#pivot1").data('jbPivot'); 
$data.reset(); 
$data.insertRecords([--your-new--array--]); 

下面是一個示例pen的行動。

+0

嗨Arkantos,抱歉的延遲答覆,是控制檯中的數據每次我選擇一個日期 – user3872094

相關問題