Ajax call onchange of date

Question

Я использую daterangepicker.js, при замене даты мне нужно позвонить методу getchart , когда я меняю дату, мне нужно позвонить getchart(), может ли кто-нибудь помочь мне в этом здесь мой код:

$(document).ready(function() { 
     $('#dateRangeSelector').daterangepicker(); //textbox id 
     var start = Date.today().setTimeToNow(); 
     var end = Date.today().setTimeToNow(); 
     var displayValue = start.toString("yyyy/MM/dd") + " - " + end.toString("yyyy/MM/dd"); 
     $('#dateRangeSelector').val(displayValue); 

     var host = '<?=$host ?>' 
     var dateRangeSelector = $("#dateRangeSelector").val(); 
     var dates = dateRangeSelector.split(" - "); 
     var value = "'"+dates.join("' , '")+"'"; 
     var array = value.split(','); 
     var startTime = array[0]; 
     var endTime = array[1]; 

     $.get(SITE_URL + 'admin/SystemMonitor/charts/getChartsData', {'host' : host,'startTime' : startTime,'endTime' : endTime}, function(response){ 
      console.log("viewCharts", response); 
      obj = response; 
      //bootbox.alert(obj.status, obj.label); 
      if (obj.status == 'OK') { 
       $('.one_half').show(); 
       showMonitoringServer(host, obj); 

      } else { 
       show_message('Show Chart Error -' +host, 'Unexpected error occured! Please try again later!', 'error'); 
      } 
     }, "json"); 
     }); 

Answer 1

Вы пробовали мероприятие onChange?

$('#dateRangeSelector').daterangepicker({ 
    onChange: function(){     
     //do ajax stuff 
    } 
); 

Там, кажется, известная проблема с onChange вызывался дважды. Если он не был установлен в вашей версии, вы всегда можете использовать:

$('#dateRangeSelector').on('blur', function(){ 
    //do ajax stuff 
}); 

Я добавил функцию обратного вызова для OnChange теперь, когда вы могли бы использовать. Имейте в виду, что он может не соответствовать вашим потребностям именно потому, что он срабатывает при КАЖДОМ изменении, которое происходит во входе. Ярлыки с одним щелчком мыши на самом деле запускают 2 обращения к обратным вызовам, потому что этот плагин просто запускает изменения даты на каждом параметре даты, по одному за раз. После того, как этот плагин будет принят пользовательским интерфейсом jQuery, я уверен, что мы будем работать над этой частью, и в качестве одного виджета будут задействованы события выбора диапазона. На данный момент вам нужно настроить свою страницу с учетом этой проблемы.

Answer 2

Попробуйте это.

$(document).ready(function() { 
     $('#dateRangeSelector').change(function(){ 
     $.get(SITE_URL + 'admin/SystemMonitor/charts/getChartsData', {'host' : host,'startTime' : startTime,'endTime' : endTime}, function(response){ 
      console.log("viewCharts", response); 
      obj = response; 
      //bootbox.alert(obj.status, obj.label); 
      if (obj.status == 'OK') { 
       $('.one_half').show(); 
       showMonitoringServer(host, obj); 

      } else { 
       show_message('Show Chart Error -' +host, 'Unexpected error occured! Please try again later!', 'error'); 
      } 
     }, "json"); 

}); 
     }); 

Answer 3

Вы можете использовать

$("#dateRangeSelector").change(function() { 
    alert("Handler for .change() called."); 
}); 

Вы также можете посмотреть на JQuery API: http://api.jquery.com/change/

Answer 4

Из самой документации показывает:

Follow this link of documentation

$('#dp5').datepicker().on('changeDate', function(ev){ 
    if (ev.date.valueOf() < startDate.valueOf()){ 
     .... 
    } 
}); 

так что вам нужно сделать так:

$('#dateRangeSelector').datepicker().on('changeDate', function(ev){ 
    $.get(SITE_URL + 'admin/SystemMonitor/charts/getChartsData', {'host' : host,'startTime' : startTime,'endTime' : endTime}, function(response){ 
     console.log("viewCharts", response); 
     obj = response; 
     //bootbox.alert(obj.status, obj.label); 
     if (obj.status == 'OK') { 
      $('.one_half').show(); 
      showMonitoringServer(host, obj); 

     } else { 
      show_message('Show Chart Error -' +host, 'Unexpected error occured! Please try again later!', 'error'); 
     } 
    }, "json"); 
});