在ajax调用后div重新加载错误

Question

我有一个用于添加和删除表中的条目的脚本。它使用ajax来调用一个php脚本。成功时，它应该重新加载包含表格的div。目前它只是清空div。

这里是我的javascript

$(document).ready(function(){ 

    $("#add_height_weight").click(function(){ 
     var corp_hw_name = $("#corp_hw_name").val(); 
     var corp_hw_height = $("#corp_hw_height").val(); 
     var corp_hw_weight = $("#corp_hw_weight").val();  
     var client_id = $("#cient_id").val(); 
     var ff_id = $("#ff_id").val(); 
     var task = "add"; 

     var dataString = "task=" + task + "&client_id=" + client_id + "&ff_id=" + ff_id + "&corp_hw_name=" + corp_hw_name + "&corp_hw_height=" + corp_hw_height + "&corp_hw_weight=" + corp_hw_weight; 

     $.ajax({ 
      type:"POST", 
      url:"/organiseit/fact_finds/processors/corp_health.php", 
      data: dataString, 
      success: function(){ 
       alert("Height/Weight Updated"); 
       $("input,textarea,option").css("background-color","#fff"); 
       $("#height_weight_table").load(" #height_weight_table"); 
      } 
     }); 
    }); 

}); 

而这里的div的内容

<div id="height_weight_table"> 
    <table> 
     <tr> 
      <td>Name</td><td>Height</td><td>Weight</td><td>Delete</td> 
     </tr> 
    <?php 
    $ff_height_weight = fetch_all("SELECT * FROM ff_height_weight WHERE ff_id='$ff_id'"); 
    foreach($ff_height_weight as $entry){ 
    ?> 
     <tr> 
      <td><?php echo $entry['name']; ?></td> 
      <td><?php echo $entry['height']; ?></td> 
      <td><?php echo $entry['weight']; ?></td> 
      <td><button class="delete_act" onclick="delete_height_weight('<?php echo $entry['id']; ?>')">X</button></td> 
     </tr> 
    <?php } ?> 
     <tr> 
      <td><input type='text' id="corp_hw_name"></td> 
      <td><input type='number' id="corp_hw_height"></td> 
      <td><input type='number' id="corp_hw_weight"></td> 
      <td><button class='new_note_submit' id="add_height_weight">+</button></td> 
     </tr> 
    </table> 
</div> 

任何人都不会有为什么这会重新加载一个空div有什么建议？

我在项目的其他地方运行了类似的代码，用于从笔记表中添加/删除。下面的代码工作完美，但我不能看到它从上面的代码有什么不同：

的JavaScript

if(proceed === "TRUE"){ 
     $.ajax({ 
      type:"POST", 
      url:"/organiseit/clients/update_client_notes.php", 
      data: noteString, 
      success: function(){ 
       alert("data submitted"); 
       $("#notes_table").load(" #notes_table"); 
       $("#new_note").css("background-color","#fff"); 
      } 
     }); 

格的页面

<div class="notes_area" id="notes_area"> 
<table class="notes_table" id="notes_table"> 
    <tr> 
     <td class="note_body"><strong>Note</strong></td> 
     <td><strong>Created by</strong></td> 
     <td><strong>Created for</strong></td> 
     <td><strong>Date Created</strong></td> 
     <td><strong>Completion by</strong></td> 
     <td><strong>Delete</strong></td> 
    </tr> 
    <?php 
    if(!empty($id)){ 
     $get_note = fetch_all("SELECT * FROM client_notes WHERE client_id=$id ORDER BY id DESC"); 
     foreach($get_note as $note){?> 
     <tr> 
      <td><?php echo $note["note"];?></td> 
      <td><?php echo $note["created_by"];?></td> 
      <td><?php echo $note["note_for"];?></td> 
      <td><?php echo $note["date"];?></td> 
      <td><?php echo $note["completion_by"];?></td> 
      <td style="text-align:center;"><button class="delete_note" onclick="delete_note(<?php echo $id.",".$note["id"];?>)"><strong>X</strong></button></td> 
     </tr> 
     <?php 
     } 
    } 
    ?> 
</table> 
</div> 

Answer 1

对你不加载接收到的数据在div。您必须在success函数中声明和使用该数据。试试这个...

$.ajax({ 
    type:"POST", 
    url:"/organiseit/fact_finds/processors/corp_health.php", 
    data: dataString, 
    dataType: 'html', 
    success: function(data) { 
     alert("Height/Weight Updated"); 
     $("div#height_weight_table").replaceWith(data); 
     $("input,textarea,option").css("background-color","#fff"); 
    } 
}); 

我希望它能帮助

Answer 2

在你的第二个例子，（工作一个），你的目标具有的"#notes_table"的id表。这就是为什么ajax请求成功找到表。

//What you are targeting in AJAX request 
$("#notes_table").load(" #notes_table"); 

//the actual markup for the page is correct for the request 
<div class="notes_area" id="notes_area"> 
    <table class="notes_table" id="notes_table"> 

在你的第一个例子中，你的目标父DIV，而不是表本身，你的Ajax请求，试图让整个DIV不表：

//What you are targeting in AJAX request 
$("#height_weight_table").load(" #height_weight_table"); 

//here you are actually targeting the parent div not the table 
<div id="height_weight_table"> 
    <table> 

尝试切换id为<div>到<table>元素。

<div> 
    <table id="height_weight_table">