Как установить параметр даты по умолчанию для передачи на ajax получить вызов в JavaScript, при выборе значения даты оно должно измениться - PullRequest
1 голос
/ 30 апреля 2020

Я пытаюсь отобразить текущую дату посещаемости при загрузке страницы, и после выбора даты я выбираю детали этой даты и отображаю ее.

Результат, который я получаю и что мне нужно:

Прямо сейчас мой результат:

  1. Если я ищу нужную дату, я получаю как данные даты по умолчанию, так и данные выбранной даты.
  2. проблема в том, что всякий раз, когда я нажимаю кнопку поиска, страница явно будет перезагружен, тогда будет работать и значение по умолчанию, поэтому я получу оба значения.

Нужное мне решение:

  1. Поскольку мне нужны данные о текущей дате, я могу ' t изменить функцию загрузки.
  2. И когда я нажимаю кнопку поиска, она должна принять желаемое значение даты, а не значение даты загрузки, чтобы я мог передать его в ajax в качестве параметра.

Давайте рассмотрим поле ввода даты и установим это поле ввода даты как значение по умолчанию ajax Параметр вызова для передачи для получения конкретных данных в соответствии с переданным параметром.

Datesearch. jsp* 102 3 *

<html><body>
<input type="text" class="form-control input-sm datepicker" id="DtPicker">
<button type="button" id="Search" onclick=SearchDate()>Search</button
</body></html>

Теперь я устанавливаю значение даты по умолчанию Onload из поля ввода даты, и при выборе нужного параметра даты из того же поля даты и при нажатии кнопки поиска он должен передать этот предпочтительный параметр параметру ajax вместо значения по умолчанию параметр.

DateSearch. js

(function () {
    $.fn.dataTable.ext.errMode = 'none';
    $( "#srchVehDtPicker" ).datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
    });

// Here i am setting default date value to var that is current date that is seeted on the input date field onload.

    var utc = new Date().toJSON().slice(0,10);
    document.getElementById("DtPicker").value =utc;

// calling ajax funtion with default parametr. 
attendance(utc);

}());

// On button click search funtion is called where selected date is collected passed to ajax as parameter
function SearchDate(){

// taking the value from input date value on button click.
    var searchdate = $("#DtPicker").val();
    var utc = searchdate.toString();

// calling ajax value with a value as a parameter.
    attendance(utc);
}

function attendance(utc){
    var url = "projecturl?utc="+utc;
        $.ajax({
            type : "GET",
            url : url,
            cache : false,  
            contentType: "text/plain",
            dataType: 'json',
            success : function(data) 
            {           
                AttendanceDetailsObj = data[0].Result;
                AttendanceList(AttendanceDetailsObj);

            }
    });
}

Attendance.java

Здесь я пытаюсь получить данные в соответствии с прошедшей датой, и я пытаюсь получить те, которые больше и равно прошедшей дате.

И если дата по умолчанию пройдена, только данные этой даты должны появляться, а не другие значения.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        JSONArray finalResultAry = new JSONArray();
        String utc = request.getParameter("utc");
        //String utc = "2020-04-29";

        JSONArray AttendanceDetailsRstAry = new JSONArray();
        JSONObject AttendanceDetailsObj = new JSONObject();
        ResultSet rs = null;
        Statement smt = null;

        try {

            DBConnect connect = new DBConnect();
            Connection connection = connect.connect();
            smt = connection.createStatement();

            String  attendanceselectallQry = "select * from Attendance where Plan_Date>='"+utc+"'";

            rs = smt.executeQuery(attendanceselectallQry);

                while (rs.next()) {
                    JSONObject AttendanceDetailsRstObj = new JSONObject();
                    AttendanceDetailsRstObj.put("Id",rs.getInt("Employee_ID"));
                    AttendanceDetailsRstObj.put("Name",rs.getString("Employee_Name"));
                    AttendanceDetailsRstObj.put("presenttype",rs.getString("Present_Type"));
                    AttendanceDetailsRstObj.put("plandate",rs.getString("Plan_Date"));
                    AttendanceDetailsRstObj.put("sanctionedon",rs.getString("Sanctioned_On"));
                    AttendanceDetailsRstObj.put("leaveot",rs.getString("Leave_OT"));
                    AttendanceDetailsRstAry.put(AttendanceDetailsRstObj);

                }
            AttendanceDetailsObj.put("Result", AttendanceDetailsRstAry);
            finalResultAry.put(AttendanceDetailsObj);

            smt.close();

        }catch (Exception e) {
            e.printStackTrace();
        }

        response.getWriter().write(finalResultAry.toString());

    }

1 Ответ

0 голосов
/ 05 мая 2020

Вы можете использовать Window.localStorage , чтобы проверить, перезагружается ли страница в первый раз или нет. При использовании этого вам нужно setItem в localStorage, который будет использоваться для проверки, если item установлен или нет в зависимости от того, что вы можете выполнить требуемую операцию.

Итак, ваш код jquery будет выглядеть следующим образом:

(function() {
  $.fn.dataTable.ext.errMode = 'none';
  $("#srchVehDtPicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  });
  if (window.localStorage) { //checking   value in local storage
    if (!localStorage.getItem('firstLoad')) {
      //settting value in localstorage
      localStorage['firstLoad'] = true;
      var utc = new Date().toJSON().slice(0, 10);
      document.getElementById("DtPicker").value = utc;
      console.log("First time load");
      // calling ajax funtion with default parametr. 
      attendance(utc);
    } else {
      //do something 
      console.log("Not loaded first time");
    }
  }

}());
...