Jquery Events from a datepicker

My newest quest has been tough to get my hear around... I have not found a thread here to get me on the right path in my situation.

I have a single inline datepicker. I have it so the selected date will show in 3 DIV's. One for the day ("DD, d"), the other for the month ("MM"), and then the Year ("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>

I can't seem to get it so that when a date changes in the DIV, that 2 events will be called to post in a different DIV.. Let me focus on just the Day ("DD, d") DIV..(#apDive1).

When a date is selected on the datepicker, the date will show in (#apDiv1) in the format of "DD, d". so when this 'change' happens, it will post that date to "daypower.php" to display the sum value of that day in (#apDiv2).... AND the same change will also post "daygraph.php" to return the data in (#apDive4).

Everything I have done has failed... I am back to just the datepicker... you may have a look at the page to visually see what I am trying to do.

I tried to have the date first loaded in the page, and that dateText will assure the right event, but NO result. I am not sure at this time, so I am back at square one with a clean slate that you see above.

Thanks,

Alan

I have gone back to a very basic structure that should get results without any errors (from my understanding).

    $(document).ready(function () {
      $('#datepicker').datepicker({onSelect: function(dateText) {
            var myDate = $(this).datepicker('getDate');
            $('#apDiv1').html($.datepicker.formatDate('DD, d', myDate));
            $('#apDiv5').html($.datep开发者_开发百科icker.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();
            });
      }});
});

This then brings up issues from the PHP that should work, but NO... Take the dayPower.php as an example...

    <?
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);
?>

The PHP should get the DATE in a format that mysql will read clearly, and then get the SUM values for the date, and echo into the div... but no such luck... I do not understand why.

Alan

If you want to perform some other server side operations (looks like you have some graph related functionalities) you can check the following code to see how to post, return :-

<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>

At the end of server side logic in the file daypower.php, echo a json_encoded array of the result like :-

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

And you will be able to get the result inside the success event of the AJAX post as json_data.result. If you want to have two separate AJAX posts to your two files, you can have nested AJAX posts like this:-

                   //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
                }
            });

But it would be better to perform all the server side operations in a single AJAX call because every call is a separate http request and needs additional time to process.

Check jQuery Ajax Post for details.

Update

Nested post requests like you need:-

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