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

    }
}

ただし、これにより、要素がページに 2 回表示されるだけです (ただし、新しい要素は更新されます)。これを正しく行う、または元の要素を削除するにはどうすればよいですか?

ありがとう

編集：要素と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

0

.remove() を使用した AJAX 更新で、jQuery を使用した最初のレンダリング呼び出しによってレンダリングされた元の DOM 要素を削除する必要があると思います。

于 2013-10-25T22:26:19.543 に答える