来自日期选择器的 Jquery 事件

Question

我的最新任务很难让我听到...我在这里没有找到一个线索来让我在我的情况下走上正确的道路。

我有一个内联日期选择器。我有它，所以选定的日期将显示在 3 个 DIV 中。一个代表日（“DD，d”），另一个代表月（“MM”），然后是年（“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 中发布。让我只关注 Day ("DD, d") DIV ..(#apDive1).

当在日期选择器上选择一个日期时，日期将显示在 (#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);
?>

PHP 应该以 mysql 可以清楚读取的格式获取 DATE，然后获取日期的 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));

您将能够在 AJAX 帖子的success 事件中以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了解详情。

更新

您需要的嵌套帖子请求：-

$.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");