Question

我正在尝试渲染一个元素并刷新它。因此，当用户单击一个按钮时，它会调用一个调用php函数的ajax函数。此函数将数据添加到数据库。这一切都有效。但是，现在我想用新数据重新渲染元素。这就是我到目前为止所做的：

public function add_role() {
    $this->autoRender = false;
    if ($this->request->data['Role']) {
        $this->Role->create();
        if ($this->Role->save($this->request->data)) {
            $this->set('roles', $this->Role->find('all'));
            $this->render('/Elements/role_table');
        }else{
            return  "Failed Insert";
        }

    }
}

但这会导致元素在页面中显示两次（尽管新的元素已更新）。如何正确执行此操作或删除原始元素？

由于

编辑：添加元素和jQuery

元素：

<?php
echo'
<div style="overflow-y: auto; overflow-x: none; height: 100%; width:350px;" id="roleTable">
<table style=" border:1px solid black; width:300px;  ">
    <tr>
        <th>Id</th>
        <th>Role</th>
    </tr>
   ';

foreach ($roles as $role) {
     echo '
     <tr>
        <td>';
            echo $role["Role"]["id"];
        echo '
        </td>
        <td>';
            echo $role["Role"]["role_name"];
            echo'
        </td>

    </tr>';
}
 echo'
<tr>
    <td colspan="2" style="border-top: 1px solid black;">
        Add Role:
    </td>
</tr>
<tr>

    <td colspan="2">
        <form id="ajaxPostForm">
            <input type="text" name="data[Role][role_name]" style="width: 60%"
                   required="required" id="tbRole" >
            <input value="Save" type="button" onclick="save_role();">
        </form>

    </td>
</tr>
<tr>
    <td colspan="2">
        <div id="addRoleStatus">
        </div>
    </td>
</tr>
</table></div>';

jQuery for original insert：

function save_role() {
    var role= $('#tbRole').val();
    var base=$('#ajaxPostForm');
    var params=base.serialize();

    $.ajax({
        type: 'POST',
        url: 'Roles/add_role',
        data: params,
        cache: false,
        dataType: 'HTML',
        beforeSend: function(){
        },
        success: function (html){
             $('#addRoleStatus').html(html);       
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus); alert("Error: " + errorThrown);
        }

    });
}

Answer 1

我在这里找到了一些jQuery：$('#addRoleStatus').html(html);

您正在回应的元素也包含div#addRoleStatus，并且在您的AJAX成功中，您将echoed元素设置为相同的div#addRoldStatus。

我认为这点很混乱。

Answer 2

我认为您需要使用.remove（）在AJAX更新中使用jQuery删除第一次渲染调用所呈现的原始DOM元素。

cakephp渲染元素与数据

2 个答案: