2

我正在尝试渲染一个元素并刷新它。因此，当用户单击一个按钮时，它会调用一个调用 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：

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);
        }

    });
}
4

2 回答 2

1

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

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

我认为这是点它混乱。

于 2013-11-01T07:09:31.707 回答
0

我认为您需要在使用 .remove() 进行 AJAX 更新时删除由 jQuery 的第一次渲染调用渲染的原始 DOM 元素。

于 2013-10-25T22:26:19.543 回答