【问题标题】:jquery datepicker refreshing data on pagejquery datepicker在页面上刷新数据
【发布时间】:2013-07-28 00:59:41
【问题描述】:

这是一个双重问题。更改日期选择器时如何更新页面上的数据(无需重新加载页面)? 另外,如何在我的 sql 语句中将选定的日期传递给 dtpickerdate? 这是我的示例代码

<html>
<head>
<link href="../css/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="../js/jquery-1.9.1.js"></script>
  <script src="../js/jquery-ui.js"></script>
</head>
<body>
<?php include("../navbar.php"); ?>
<p>Date: <input type="text" id="datepicker" value="<?php echo date("m/d/Y"); ?>" /></p>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker();
});
</script>
<table>
<?php 

$sqltext = "SELECT * FROM data where startdate=dtpickerdate";

$result = $mysqli->query($sqltext);
while($row = $result->fetch_assoc()) {
  echo "<tr><td>".$key."</td>";
  echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td><td>".$row['wed']."</td><td>".
          $row['thurs']."</td><td>".$row['fri']."</td><td>&nbsp".$row['sat']."</td>";

}}
?>
</table>
</body>
</html>

【问题讨论】:

    标签: php jquery mysql datepicker


    【解决方案1】:

    您需要 AJAX,首先使用您的查询函数创建一个新的 php 文件,该文件将接收带有 datepicker 值的 $_POST 参数:

    getData.php

    <?php 
        $dtpickerdate = isset($_POST['dtpickerdate']) ? $_POST['dtpickerdate'] : NULL
        $sqltext = "SELECT * FROM data where startdate = $dtpickerdate";
    
        $result = $mysqli->query($sqltext);
        while($row = $result->fetch_assoc()) {
          echo "<tr><td>".$key."</td>";
          echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td> <td>".$row['wed']."</td><td>".$row['thurs']."</td><td>".$row['fri']."</td><td>&nbsp".$row['sat']."</td>";
        }
    ?>
    

    现在你在你的输入上监听 change 事件并使用 AJAX 调用你的 PHP,当调用完成时你更新你的表:

    $('#datepicker').change(function(){
        $.post('getData.php',{dtpickerdate : $(this).val()}, function(response){
            $('table').html(response);
        });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-03
      • 1970-01-01
      • 1970-01-01
      • 2012-05-25
      • 2018-06-24
      • 2014-04-29
      相关资源
      最近更新 更多