DIV不是从PHP做AJAX调用时创建是从、DIV、AJAX、PHP

2023-09-10 22:10:00 作者:陌上人如玉

我想打电话给我的PHP主file.Below一个PHP脚本的主要php文件的jQuery的/ Ajax的一部分。该display_stationinfo.php应该建立在主要的DIV,但它不是。

这是我试过到目前为止,即时通讯新jQuery和AJAX。在此先感谢!

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

当我查看源代码code两者的DIV都应该是已经创建的,但只有desk_box是..我究竟做错了什么?

的JQuery / AJAX部分:

 < D​​IV ID =map_sizeALIGN =中心>
    <脚本类型=文/ JavaScript的>
        是切换在一个隐藏的DIV //显示站信息
        //并调用PHP脚本,查询并返回结果LIVE
        $(文件)。就绪(函数(){
            $(desk_box)。点击(函数(){
                警报(之前切换);
                VAR ID = $(本).attr(数据)
                警报(ID);
                警报($(本));
                $(#station_info _+ id)的.toggle();
                警报(之后拨动);
                $阿贾克斯({
                    网址:display_stationinfo.php,
                    键入:GET,
                    成功:函数(结果){
                        警报(之前的结果);
                        $(#station_info _+编号)。html的(结果);
                        警报(结果:+结果); //这鞋正在创建的每个DIV,而不是我点击了一
                        警报(后的结果);
                    }
                }); //端AJAX
            }); //最后点选
        }); //最后准备
    < / SCRIPT>
< / DIV> <  - !结束map_size  - >
 
ajax怎么动态添加div

display_station.php(脚本,我要打电话):

 < PHP
包括db_conn.php;
//查询,以显示工作站/桌从DB的课桌信息
$ station_sql =SELECT coordinate_id,x_coord,y_coord,SECTION_NAME从坐标;
$ station_result = mysqli_query($康恩,$ station_sql);

//看看查询是好的
如果($ station_result === FALSE){
    死亡(mysqli_error());
}


是切换在一个隐藏的DIV //显示工作站信息
而($行= mysqli_fetch_assoc($ station_result)){
    //命名值
    的$ id = $行['coordinate_id'];
    $ X_POS = $行['x_coord'];
    $ Y_POS = $行['y_coord'];
    $ sec_name = $行['SECTION_NAME'];
    //显示DIV里面的内容
    $的HTML =< D​​IV CLASS ='station_info_'ID ='。station_info _的$ id。'风格='的位置是:绝对的;左:$ X_POS像素;顶:。$ Y_POS像素; '>您好id为:$标识。< / BR>部分:。$ sec_name< / BR>< / DIV>中;
    回声$的HTML;
} //结束while循环station_result
mysqli_close($康恩); //<  - 我需要包括在这里或在我db_conn.php因为即时通讯包括最顶端?
 

?>

解决方案

 选择coordinate_id,x_coord,y_coord,SECTION_NAME从坐标;
 

时获取从表中坐标的每一行,这是你想要做什么?或者你只是想用ID的用户点击?

只返回一行

jQuery的

  $。阿贾克斯({
  网址:display_stationinfo.php,
  数据:{ID:ID},
  键入:POST,
  成功:函数(结果){}
});
 

PHP

 的$ id = $ _ POST ['身份证']
选择coordinate_id,x_coord,y_coord,SECTION_NAME从坐标WHERE coordinate_id ==$ ID;
 

看着你例如,我还猜想,这个问题可能是您正在返回一个字符串,把它的目标分区,以使成品DIV看起来像财产以后这里面的:

 < D​​IV CLASS =station_info_ID =station_info_84的风格=的位置是:绝对的;左:20像素;顶:90px;显示:块;>
  < D​​IV CLASS =station_info_ID =station_info_84的风格=的位置是:绝对的;左:20像素;顶:90px;>
    您好id为:84< BR>
    部分:第一部分B< BR>
  < / DIV>
< / DIV>
 

返回一个字符串

相反,你可以返回一个JSON对象,仅追加数据到目标分区

PHP

 而($行= mysqli_fetch_assoc($ station_result)){
    的$ id = $行['coordinate_id'];
    $ X_POS = $行['x_coord'];
    $ Y_POS = $行['y_coord'];
    $ sec_name = $行['SECTION_NAME'];

    $结果=阵列('身份证'=> $ ID,'X_POS'=> $ X_POS,'Y_POS'=> $ Y_POS,'sec_name'=> $ sec_name);
    回声json_en code($阵列);
}
 

jQuery的

  $。阿贾克斯({
  网址:display_stationinfo.php,
  数据:{ID:ID},
  键入:POST,
  数据类型:JSON,
  成功:函数(JSON){
    $(#station_info _+编号)
      的.css({'左':json.x_pos,'顶':json.y_pos})
      .append('< P>你好的id是:'+ json.id +'< / BR>部分:+ json.sec_name +'< / P>');
  }
});
 

I am trying to call a PHP script in my main PHP file.Below is the Jquery/Ajax part of the main php file. The display_stationinfo.php is supposed to create the DIVs in the main but it isnt.

this is what I tried so far, im new to Jquery and AJAX. thanks in advance!

working fiddle: http://jsfiddle.net/52n861ee/ thats what I want to do but when I click on desk_box DIV, the toggle station_info DIV is not being created by my display_stationinfo.php script.

When I view source code both DIVs are supposed to be already created but only desk_box is.. what am I doing wrong?

JQuery/AJAX part:

<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 (script that I want to call):

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

?>

解决方案

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

Is fetching every row from the table coordinates, is this what you want to do? Or do you just want to return only the row with the id the users clicked?

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;

Looking at you example, I would also guess that the problem could be that you are returning a string and putting it inside the target div so that the finished div looks somthing like this:

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

Instead of returning a string you could return a json object and append only data to the target 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>');
  }
});