Datepicker會生成一個報告

我是AJAX和PHP的新手，詳細介紹Javascript，並且在這個階段做了大量的閱讀工作，大部分是反覆試驗，但是我遇到了一個情況，那就是我沒有找到正在將我推向正確方向的Javascript和Ajax信息，因此我生成了一些不好的代碼。Datepicker會生成一個報告

我在家裏有2個太陽能逆變器，每個逆變器上都有一個RS232數據端口，現在通過IP轉換器連接到我的家庭網絡上傳數據到逆變器每個電源的MySQL表小時，並將數據顯示在我製作的簡單網站上，以便我可以在白天工作時看到發生了什麼。

我製作了一個帶有JQuery Datepicker的網頁來生成信息報告。我試圖使用DatePicker作爲工具來選擇我想查看生成的電源的時間的「開始」和「結束」日期，然後從MySQL表中調用該信息，然後在網頁上生成表格/表格我可以看到並打印。

我一直在嘗試使用AJAX來請求PHP執行此操作而沒有任何結果。

我有一個基本的MySQL表...

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

等....

的HTML代碼頭是...

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

頁的體內我有......

//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 P HP（report.php）寫爲...

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

我閱讀和更多的我做出不同chages的代碼越多，我覺得我不會向前所有。任何與此有關的幫助，或者是我可以閱讀和教育我自己使用日期選擇器進行這種數據調用的鏈接將是美好的。

謝謝。

艾倫

來源

2010-11-08 Alan

你有沒有得到這個成功解決？你還需要幫助嗎？ – jcolebrand 2010-12-14 04:03:35

從您headerblock代碼它看起來像你正在嘗試做所有的AJAX手動工作和管理自己所有的跨瀏覽器的實現。在開始嘗試學習AJAX之前，我建議您瞭解一些可以管理所有適用於您的JavaScript框架。

本網站上最常用的引用是jQuery，因爲它有一個非常活躍的社區並且發展良好。否則，我知道維基百科有很多不同框架的選項。

使用框架的關鍵在於它爲您管理所有跨瀏覽器的東西，並讓您專注於手頭的任務，在這種情況下提出AJAX請求。

還有一點，這個名字AJAX X提供XML結束，但現在JSON被認爲是去到線格式，因爲它更輕，更容易在JavaScript中操縱。只是需要考慮的一件事，如果你還沒有學習，那麼你需要學習新的東西。

來源

2010-11-08 05:09:16 jcolebrand

請嘗試以下內容，因爲您的代碼已經使用基於datepicker插件的jQuery ...

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

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

來源

2010-11-08 05:33:46 SlamDunk

我已經重新做了2個日期選擇器，但不能仍然得到POST的功能。但至少我已經設定結束日期必須大於開始...

這裏是什麼工作沒有POST功能...

<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(''); 
     } 
    })

不管我怎麼寫GET或POST函數，它不起作用...我能做些什麼才能使它起作用？

這是在頁面正文中顯示日期選擇器的新窗體。

<body>

開始日期：結束日期：

來源

2010-11-14 05:15:41 Alan

Datepicker會生成一個報告

回答

相關問題