在进行AJAX调用时,不是从PHP创建的DIV

时间:2014-10-14 18:46:14

标签: javascript php jquery html ajax

我试图在我的主PHP文件中调用PHP脚本.Below是主要php文件的Jquery / Ajax部分。 display_stationinfo.php应该在main中创建DIV但不是。

这是我到目前为止所尝试的,我是Jquery和AJAX的新手。提前谢谢!

工作小提琴http://jsfiddle.net/52n861ee/ 这就是我想要做的事情但是当我点击desk_box DIV时,我的display_stationinfo.php脚本没有创建切换station_info DIV。

当我查看源代码时,两个DIV应该已经创建但只有desk_box是..我做错了什么?

JQuery / AJAX部分:

<div id="map_size" align="center">
    <script type="text/javascript">
        //Display station information in a hidden DIV that is toggled
        //And call the php script that queries and returns the results LIVE
        $(document).ready(function() {
            $(".desk_box").click(function() {
                alert("before toggle");
                var id = $(this).attr("data")
                alert(id);
                alert($(this));
                $("#station_info_"+id).toggle();
                alert("after toggle");
                $.ajax({
                    url: 'display_stationinfo.php',
                    type: 'GET',
                    success: function(result) {
                        alert("before result");
                        $("#station_info_"+id).html(result);
                        alert("result: " + result); //it shoes every DIV being created and not the one that I clicked on
                        alert("after result");
                    }
                });//end ajax
            });//end click
        });//end ready
    </script>
</div> <!-- end map_size -->

display_station.php(我要调用的脚本):

<?php
include 'db_conn.php';
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);

//see if query is good
if ($station_result === false) {
    die(mysqli_error()); 
}


//Display workstations information in a hidden DIV that is toggled
while ($row = mysqli_fetch_assoc($station_result)) {
    //naming values
    $id       = $row['coordinate_id'];
    $x_pos    = $row['x_coord'];
    $y_pos    = $row['y_coord'];
    $sec_name = $row['section_name'];
    //display DIV with the content inside
    $html = "<div class='station_info_' id='station_info_".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
    echo $html;
}//end while loop for station_result
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

&GT;

1 个答案:

答案 0 :(得分:0)

"SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";

从表格坐标中获取每一行,这是你想要做的吗?或者您只想返回具有用户点击的ID的行?

的jQuery

$.ajax({
  url: 'display_stationinfo.php',
  data: { 'id': id },
  type: 'POST',
  success: function(result) {}
});

php

$id = $_POST['id']
"SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates WHERE coordinate_id == " $id;

看着你example,我还猜测问题可能是你正在返回一个字符串并将它放在目标div中,这样完成的div看起来像这样:

<div class="station_info_" id="station_info_84" style="position: absolute; left: 20px; top: 90px; display: block;">
  <div class="station_info_" id="station_info_84" style="position:absolute;left:20px;top:90px;">
    Hello the id is:84<br>
    Section:Section B<br>
  </div>
</div>

您可以返回一个json对象,只将数据附加到目标div

,而不是返回一个字符串

PHP

while ($row = mysqli_fetch_assoc($station_result)) {
    $id       = $row['coordinate_id'];
    $x_pos    = $row['x_coord'];
    $y_pos    = $row['y_coord'];
    $sec_name = $row['section_name'];

    $result = array('id' => $id, 'x_pos' => $x_pos, 'y_pos' => $y_pos, 'sec_name' => $sec_name);
    echo json_encode($array);
}

的jQuery

$.ajax({
  url: 'display_stationinfo.php',
  data: { 'id': id },
  type: 'POST',
  dataType: "json",
  success: function(json) {
    $("#station_info_"+id)
      .css({'left':json.x_pos ,'top': json.y_pos})
      .append('<p>Hello the id is:'+ json.id +'</br>Section:'+ json.sec_name +'</p>');
  }
});