Question

我已经建立了一个日历约会脚本，并希望在Google地图和下面的表格上显示任何给定日期的结果，而不必刷新整个页面。当前，使用ajax，地图可以完美刷新，但表格却不能。

在日历中单击日期后，将通过javascript将其写入到一个隐藏的表单字段中，然后在单击“更新”按钮（提交）时，头部的ajax在后台提交该表单以覆盖$ updatedate变量，刷新地图div和表div。

当前，变量在会话中得到更新，脚本运行以更新xml文件，日历成功刷新以显示该xml数据。但是，表div不会刷新。如果我手动刷新整个页面，则会成功显示新结果，因此它将获取更新的变量，但不会通过ajax刷新。

我意识到这可能是由于ajax是客户端和php服务器端，因此php查询并未运行，但我也尝试在div中使用file_get_contents（适用于xml生成脚本）来运行这些查询没有加载整个页面，但这什么也没显示，所以我想我缺少了一些基本的内容，而且可能非常简单！

--------- ajax in head to run update script and reload divs --------

<!-- silently submit the updatedate form to update the session variable.
Then reload the map and table divs using this new variable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(function () {
    $('#update').on('submit', function (e) {
      // stop the page from reloading
      e.preventDefault();
      // but submit the form
      $.ajax({
        type: 'post',
        url: 'actions/updatedate.php',
        data: $('#update').serialize(),
        success: function () {
          $("#map-outer").load("../map.php");
          $("#tbl-outer").load("../table.php");
        }
      });
    });
  });
</script> 


--------- main page --------

<div>calendar content here</div>

<div>customer details form here</div>

<div class="clear" style="text-align: left;">
    <!-- set default then let script overwrite -->
    <?php $updatedate = date('Y-m-d'); ?>
    <!-- run form (via ajax in head) to update variable and write to session -->
    <form id="update" method="post">
        <input type="hidden" name="updatedate" id="updatedate" />
        <input type="submit" name="submit" value="update map and table" />
    </form>
    <!-- update variable form session -->
    <?php $updatedate = $_SESSION['updatedate']; ?>
    <br />
</div>

<div id="map-outer" class="twocol1">
    <?php include "../map.php" ?>  <!-- this page runs a script to pull the db values and write them to xml, then displays google map code -->
    <br /><br />
</div>

<div id="tbl-outer" class="twocol2">
    <?php include "../table.php" ?> <!-- this page pulls the db values and display them in a table -->
</div>



--------- map.php page --------

<?php
// silently run the db to xml script before loading the map //
file_get_contents("admin/actions/dbtoxml.php");
?>

<div id="map"></div>
<script> .....  script to show google map with custom markers .....  </script>



--------- table.php page --------

<h2>Morning</h2>

<?php
    $sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Morning' AND block = 0 AND completed = 0 ORDER BY date ASC";
    $result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>

<br /><br />

<h2>Afternoon</h2>

<?php
    $sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Afternoon' AND block = 0 AND completed = 0 ORDER BY date ASC";
    $result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>

有人能指出我正确的方向吗？

非常感谢，海伦

Answer 1

我现在已解决此问题。 table.php页面未使用现有的mysql db连接加载，因此我不得不使用其他连接。

谁能告诉我使用之间的区别 $ connection =新的mysqli（DB_HOST，DB_USER，DB_PASS，DB_NAME）; 和 $ connection = mysqli_connect（DB_HOST，DB_USER，DB_PASS）; $ db_selected = mysqli_select_db（$ connection，DB_NAME）;

如何使用Ajax刷新包含PHP查询的多个div

1 个答案: