JQuery Events from datepicker

Question

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

У меня есть один встроенный datepicker. У меня есть так, что выбранная дата будет отображаться в 3 DIV. Один за день («DD, d»), другой за месяц («ММ»), а затем Год («yy»).

<script type="text/javascript"> 
     $(document).ready(function() { 
     $("#datepicker").datepicker({ 
      onSelect: function(dateText, inst) { 
//formatDate Requires a new date object to work 
     var myDate = new Date(dateText); 
     var myDate2 = new Date(dateText); 
     var myDate3 = new Date(dateText); 
//Set a new var with different format to use 
     var newFormat = $.datepicker.formatDate("DD, d", myDate); 
     var newFormat2 = $.datepicker.formatDate("MM", myDate2); 
     var newFormat3 = $.datepicker.formatDate("yy", myDate3); 
//Choose the div you want to replace 
     $("#apDiv1").html(newFormat); 
     $("#apDiv5").html(newFormat2); 
     $("#apDiv7").html(newFormat3); 
    } 
    }); 
}); 
</script> 

Я не могу показаться, чтобы получить его так, что, когда дата изменения в DIV, что 2 события будут призваны размещать в другой DIV .. Позвольте мне сосредоточиться только на День ("DD, d ") DIV .. (# apDive1).

Когда дата выбрана на datepicker, дата будет отображаться в (# apDiv1) в формате «DD, d». поэтому, когда это «изменение» произойдет, оно опубликует эту дату в «daypower.php», чтобы отобразить значение суммы этого дня в (# apDiv2) .... И такое же изменение также опубликует «daygraph.php», чтобы вернуться данные в (# apDive4).

Все, что я сделал, потерпело неудачу ... Я вернусь только к дате ... вы можете взглянуть на the page to visually see what I am trying to do.

Я попытался перенести дату на страницу, и этот dateText обеспечит правильное событие, но не приведет к результату. Я не уверен в это время, поэтому вернусь на первый план с чистым списком, который вы видите выше.

Спасибо,

Алан

Я вернулся к очень простой структуре, которая должна получить результаты без каких-либо ошибок (из моего понимания).

$(document).ready(function() { 
     $('#datepicker').datepicker({onSelect: function(dateText) { 
      var myDate = $(this).datepicker('getDate'); 
      $('#apDiv1').html($.datepicker.formatDate('DD, d', myDate)); 
      $('#apDiv5').html($.datepicker.formatDate('MM', myDate)); 
      $('#apDiv7').html($.datepicker.formatDate('yy', myDate)); 
      $.post('dayPower.php', {choice: dateText.val}, function(data) { 
       $('#apDiv2').html(data).show(); 
      }); 
      $.load('dayGraph', {choice: dateText.val}, function(data) { 
        $('#apDiv4').html().show(); 
      }); 
      $.post('monthPower.php', {choice: dateText.val}, function(data) { 
       $('#apDiv6').html(data).show(); 
      }); 
      $.load('monthGraph', {choice: dateText.val}, function(data) { 
        $('#apDiv9').html().show(); 
      }); 
      $.post('yearPower.php', {choice: dateText.val}, function(data) { 
       $('#apDiv8').html(data).show(); 
      }); 
      $.load('yearGraph', {choice: dateText.val}, function(data) { 
        $('#apDiv10').html().show(); 
      }); 
     }}); 
}); 

Это тогда вызывает вопросы с PHP, которые должны работать, но НЕТ ... Возьмите dayPower.php как пример ...

<? 
if(isset($_POST['choice'])) 
$choice = (isset($_POST['choice'])) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d"); 
$con = mysql_connect("localhost","inverters","XXXXXX"); 
if (!$con) { 
die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db("inverters", $con); 

$sql = 'SELECT date, sum(power/1000) AS power '   
.'FROM feed '  
.'WHERE date = $choice'; 
$res = mysql_query($sql) or die('sql='.$sql."\n".mysql_error()); 
$row = mysql_fetch_assoc($res); 
echo $row['power'], '<br />'; 
mysql_close($con); 
?> 

РНР должен получить дату в формат, который mysql будет читать четко, а затем получить значения SUM для даты и эхо в div ... но нет такой удачи ... Я не понимаю, почему.

Алан

Answer 1

Если вы хотите выполнить некоторые другие стороны сервера операций (выглядит как у вас есть некоторые связанные графика функций), вы можете проверить следующий код, чтобы увидеть, как отправить, возвращение: -

<script type="text/javascript"> 
      $(document).ready(function() { 
      $("#datepicker").datepicker({ 
       onSelect: function(dateText, inst) 
       { 


      //Do AJAX post to daypower.php if you need to perform some server side operation 
      $.ajax({ 
       type: "POST", 
       url: "/path/to/daypower.php", // The actual path to the PHP file which will handle the AJAX request 
       data: { selected_date: dateText}, 
       dataType: "json", 
       success: function(json_data) 
       { 
            //Here json_data.result can be used. 
        //formatDate Requires a new date object to work 
           var myDate = new Date(dateText); 
           var myDate2 = new Date(dateText); 
           var myDate3 = new Date(dateText); 
           //Set a new var with different format to use 
           var newFormat = $.datepicker.formatDate("DD, d", myDate); 
           var newFormat2 = $.datepicker.formatDate("MM", myDate2); 
           var newFormat3 = $.datepicker.formatDate("yy", myDate3); 
           //Choose the div you want to replace 
           $("#apDiv1").html(newFormat); 
           $("#apDiv5").html(newFormat2); 
           $("#apDiv7").html(newFormat3); 

       }, 
       beforeSend: function() 
       { 
        //display loading etc... 
       }, 
       error: function() 
       { 
        //do something to handle error 
       } 
      }); 

     } 
     }); 
    }); 
    </script> 

в конце логики на стороне сервера в файле daypower.php, эхо в json_encoded массив результата, как: -

echo json_encode(array("result"=>$result)); 

И вы будете иметь возможность получить результат внутри события success сообщения AJAX как json_data.result. Если вы хотите иметь две отдельные сообщения AJAX для двух ваших файлов, вы можете иметь вложенные сообщения AJAX, как это: -

    //Do AJAX post to daypower.php 
       $.ajax({ 
       type: "POST", 
       url: "/path/to/daypower.php", // The actual path to the PHP file which will handle the AJAX request 
       data: { selected_date: dateText}, 
       dataType: "json", 
       success: function(json_data) 
       { 
        //another AJAX call to a separate php file 
        $.ajax({ 
         type: "POST", 
         url: "/path/to/daygraph.php", // The actual path to the PHP file which will handle the AJAX request 
         data: { selected_date: dateText}, 
         dataType: "json", 
         success: function(json_data) 
         { 
          //Finally perform display changes here 

         }, 
         beforeSend: function() 
         { 
          //display loading etc... 
         }, 
         error: function() 
         { 
          //do something to handle error 
         } 
        }); 
       }, 
       beforeSend: function() 
       { 
        //display loading etc... 
       }, 
       error: function() 
       { 
        //do something to handle error 
       } 
      }); 

Но было бы лучше, чтобы выполнить все на стороне сервера операций в одном вызове AJAX, потому что каждый вызов является отдельным запросом HTTP и требует дополнительного времени для обработки.

Проверьте jQuery Ajax Post для получения более подробной информации.

Update

Вложенные почтовые запросы, как вам нужно: -

$.post('dayPower.php', {daDate: textDate.val() } 
        , 
        function(data1) 
        { 
         $.post(baseUrl+"/ajax/add_credit", {daDate: textDate.val() } 
         , 
         function(data2) 
         { 
         //Update both the results at a time (after both requests have responded - there will be synchronism in updation) 
          $('#apDiv2').html(data1).show(); 
          $('#apDiv4').html(data2).show(); 
         },"json"); 
        },"json");