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？

我在项目的其他地方运行类似的代码，用于在notes表中添加/删除。以下代码完美无缺，但我无法看到它与上述代码的区别：

的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

在第二个示例中，（工作的）您将定位id "#notes_table"的表格。这就是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的{{1}}切换为<div>元素。

<table>

Answer 2

您未在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");
    }
});

我希望它有所帮助

ajax调用后{div}重新加载错误

2 个答案: