1

2日間の調査の後、先に進むことができないため、助けを求めることにしました。

サイトにユーザー テーブルを表示します。各行には、ユーザーのデータとユーザーの削除ボタンがあります。

削除ボタンを押すと、その特定のユーザーを削除するかどうかを尋ねるモーダルが表示されます。そのため、ユーザー名であるパラメーターを送信する必要があります。

そのモーダルは、凡例の確認モーダルです: //username// を削除してもよろしいですか?

問題は、パラメーターの送信方法は知っていますが、jquery 削除機能と統合できないことです。また、私はjsとjqueryの初心者なので、行を削除する方法について明確な考えがありません。

これまでのところ、これは私が持っているものです（Smartyテンプレートエンジンを使用していることに注意してください）：

<tbody>
    {foreach $frontusers as $frontuser}
    <tr>
    {if $frontuser->frontavatar_id eq null}
       <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
       {else}
       <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
    {/if}
    <td class="hidden-phone">{$frontuser->username}</td>
    <td>{$frontuser->name}</td>
    <td>{$frontuser->lastname}</td>
    <td class="hidden-phone">{$frontuser->email}</td>
    <td class="hidden-phone">{$frontuser->state}</td>
    <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>

    {if $frontuser->status eq 2}
       <td ><span class="label label-success">Activo</span></td>
    {else}
       <td ><span class="label label-warning">No Activo</span></td>
    {/if}

    <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Modificar</a></td>

    <td><a href="#" data-id="{$frontuser->id}" class="btn mini red-stripe confirm-delete" role="button">Delete</a></td>
    </tr>

    <!-- modal -->
    <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
       <h3 id="myModalLabel3">Delete</h3>
    </div>
    <div class="modal-body">
       <p>Are you sure you want to delete user ....?</p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button data-dismiss="modal" class="btn red" id="btnYes">Confirm</button>
    </div>
    </div>
    <!-- end modal -->

    {foreachelse}
<tr>
       <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
     </tr>
    {/foreach}
</tbody>

これは私のjsファイルです（このリンクから取得しました）

$('#myModal3').on('show', function() {
var id = $(this).data('id'),
    removeBtn = $(this).find('.red');
})

$('.confirm-delete').on('click', function(e) {
e.preventDefault();

var id = $(this).data('id');
$('#myModal3').data('id', id).modal('show');
  });

$('#btnYes').click(function() {
// handle deletion here
var id = $('#myModal3').data('id');
$('[data-id='+id+']').remove();
$('#myModal3').modal('hide');
   });

要約すると、次のようにコードを調整する必要があります。

  1. ユーザー名をパラメーターとしてモーダルに送信します
  2. 確認ボタンが押された場合、行全体を削除します

アップデート：

モーダルは機能しています。つまり、開いたり閉じたりします。モーダルの確認ボタンは、行全体ではなく、行から「削除ボタン」のみを削除します。

4

1 に答える 1

3

最後にそれを機能させることができました。ここでは、これの短いバージョン (ajax とスマートでハードコードされたユーザーなし) がオンラインで動作しています:

http://bootply.com/97366

意見：

<tbody>
{foreach $frontusers as $frontuser}
   <tr>
    {if $frontuser->frontavatar_id eq null}
    <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
    {else}
    <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
    {/if}
    <td class="hidden-phone">{$frontuser->username}</td>
    <td>{$frontuser->name}</td>
    <td>{$frontuser->lastname}</td>
    <td class="hidden-phone">{$frontuser->email}</td>
    <td class="hidden-phone">{$frontuser->state}</td>
    <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>

    {if $frontuser->status eq 2}
    <td ><span class="label label-success">Activo</span></td>
    {else}
    <td ><span class="label label-warning">No Activo</span></td>
    {/if}

    <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Edit</a></td>

    //here in data-title i store the username so later i can "catch it" in the jquery function
    <td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Delete</a></td>
    </tr>

    <!-- modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
      <h3 id="myModalLabel3">Delete</h3>
    </div>
    <div class="modal-body">
      <p></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
      <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button>
    </div>
   </div>                    
  <!-- end modal -->

  {foreachelse}
  //no users are in the db
  <tr>
    <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
  </tr>
 {/foreach}
 </tbody>

Js ファイル:

//after first function is triggered, modal shows and this function runs
$('#myModal').on('show', function() {
 //catch the id for later deletion, and username to display on modal
 var id = $(this).data('id'),
 username = $(this).data('usern');

 $('#myModal .modal-body p').html("Do you want to delete user: " + '<b>' + username + '</b>' + ' ?');
 })

//when clicking "delete" button from a row, this is the first function that runs
$('.confirm-delete').on('click', function(e) {
 e.preventDefault();
 //catch the user id and username
 var id = $(this).data('id');
 var user = $(this).data('title');

 //assign to the modal id and username
 $('#myModal').data('id', id).modal('show');
 $('#myModal').data('usern', user).modal('show');
});

$('#btnYes').click(function() {
 var id = $('#myModal').data('id');

 //sending to php the row to be deleted from the db
 $.ajax({
  url: 'deleteFrontUser',
  type: 'POST',
  data: 'id='+id,
  success: function(html){

 //removing entire row
 $('[data-id='+id+']').parents('tr').remove();
 $('#myModal').modal('hide');
 }      
 });
return false;
});
于 2013-11-28T18:42:00.613 に答える