Datepicker will generate a report

I am new to detailed Javascript with AJAX and PHP, and have been doing a lot of reading, and mostly trial-and-error at this stage, but I have run into a situation that I am not finding the Javascript and Ajax information that is pushing me in the right direction, thus I generate some bad code.

I have 2 Solar Inverters at my home, and I have a RS232 data port on each inverter that is now connected to my home network via an IP converter to upload the data to a MySQL table of the power the invertes make each hour, and display the data on a simple website I made, so I can see what is going on durring the daytime hours I am at work.

I have made a webpage with a JQuery Datepicker to generate reports of the information. I am trying to use the DatePicker as the tool to select a "Start" and "End" date of the time I want to see the power generated, then call that information from MySQL table, to then generate a form/table on the webpage that I can see and also print.

I have been trying to use AJAX to request the PHP to do this operation with no result.

I have a basic MySQL Table...

+---------+----------+------------+---------+------------+----------+ 
| UNIT ID |  Date    |    Time    |  Power  |  Volts     |  Current | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  12:00:00  |  560    |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  13:00:00  |  560 开发者_开发问答   |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  12:00:00  |  490    |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+ 

Etc....

The HTML Head code is...

//DatePicker
<script type="text/javascript"> 
$(function(){
$('input').daterangepicker({dateFormat: 'M d, yy', posX: 25, posY: '6.8em'}); 
});
</script>

//Ajax XML connect to the PHP to MySQL and back
<script type="text/javascript">
function makeReport(str)
{
if (str=="")
  {
  document.getElementById("start1").innerHTML="";
  document.getElementById("end1").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtText").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","report.php"+str,true);

xmlhttp.send();
}
</script>

Inside the Body of the page I have...

//The DatePicker
<div id="calsw"><label>
      From:   
      </label>
      <input type="text" id="start1" onchange="makeReport(this.value)"/>       
      <label>
        To:
      </label><input type="text" id="end1" onchange="makeReport(this.value)"/></div>

//Where the Report will show
<div id="textHint" align="center">Report Data will list here</div>

The PHP (report.php) is written as...

<?php
$start1=strtotime('start1');
$end1=strtotime('end1');

$con = mysql_connect('localhost', 'XXXX', 'XXXXXXXX');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("inverters", $con);

$sql='select * date, time, power, amp, current ' 
.'FROM feed AS textHint '
.'ORDER BY date,time'
.'WHERE DATE BETWEEN [start1] and [end1]';

$res = mysql_query($sql);
while ($row = mysql_fetch_assoc($res))
echo $row['textText'];
echo "<table border='1'>
<tr>
<th>Date</th>
<th>Hour</th>
<th>Power</th>
<th>Volt</th>
<th>Current</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Date'] . "</td>";
  echo "<td>" . $row['Time'] . "</td>";
  echo "<td>" . $row['Power'] . "</td>";
  echo "<td>" . $row['Volt'] . "</td>";
  echo "<td>" . $row['Current'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?> 

The more I read and the more I make different chages to the code, I feel I am not going forward at all. Any assistance with this, or a link to where I can read and educate myself to this call of data with a datepicker would be wonderful.

Thank You.

Alan

From the code in your headerblock it looks like you are trying to do all the AJAX work manually and manage all the crossbrowser implementations on your own. Before you start trying to learn AJAX, I recommend you learn about some javascript frameworks that can manage all that work for you.

The most commonly quoted on this site is jQuery, because it's got a very active community and is well developed. Otherwise, I know that wikipedia has a long list of options for various frameworks.

The key to using a framework is that it manages all the cross browser stuff for you and lets you focus on the task at hand, in this case making an AJAX request.

Another point, the name AJAX ends with X for XML, but nowadays JSON is considered the go-to wire format, because it's lighter and easier to manipulate within javascript. Just something to consider, a new thing for you to learn if you haven't already.

Try below since your code already uses jQuery based on the datepicker plugin...

• Javascript

   
  $(function(){
  $('#start1').daterangepicker({
      dateFormat: 'M d, yy',
      posX: 25, posY: '6.8em',
      onSelect: function(dateText,inst) {
          $.post("report.php",{dt_start:dateText},function(data){
              $("#textHint").html(data);
          });
      }
  });
  
  
  $('#end1').daterangepicker({
      dateFormat: 'M d, yy',
      posX: 25, posY: '6.8em',
      onSelect: function(dateText,inst) {
          $.post("report.php",{dt_end:dateText},function(data){
              $("#textHint").html(data);
          });
      }
  }); 
  });
  
  

• php side

$start1 = (isset($_POST['dt_start'])) ? date("Y-m-d",strtotime($_POST['dt_start'])) : date("Y-m-d");
$end1   = (isset($_POST['dt_end'])) ? date("Y-m-d",strtotime($_POST['dt_end'])) : date("Y-m-d");

    //code so on...

I have re-done the 2 date pickers, but still cant get the POST to function. but at least I have set the end date to be greater then the start...

Here is what is working without a POST function...

<script type="text/javascript">         
    $(function () {

        var start1 = $('#start1');
        var end1 = $('#end1');

        start1.datepicker({ onClose: clearEndDate });
        end1.datepicker({ beforeShow: setMinDateForEndDate });

        function setMinDateForEndDate() {
            var d = start1.datepicker('getDate');
            if (d) return { minDate: d }
        }
        function clearEndDate(dateText, inst) {
            end1.val('');
        }
    })

No matter how I write the GET or POST function, it does not work... What can I do to get this to work ?

Here is the new form that is showing the datepicker in the body of the page.

<body>

Start Date: End Date: