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

<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関数で宣言して使用する必要があります。私はそれはあなたが"#notes_table"のidを持つテーブルをターゲットにしている（作業1）、2番目の例では

Answer 2

を役に立てば幸い

$.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"); 
    } 
}); 

...これを試してみてください。これが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"> 

あなたは、あなたのAjaxのリクエストがないテーブル全体のdivを取得しようとしている、いないテーブル自体、親の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">