0

テーブルがあり、各行に削除ボタンがあります。その削除ボタンが押されると、確認を求めるモーダルが表示されます。

ここでの問題は、ページを初めてロードするときに、(必要な削除ボタンで) 2 回クリックしてモーダルを表示する必要があることです。一度それをしたら、次に任意の行の削除ボタンを押すと、モーダルがすぐに表示されます...ワンクリックが必要です。

原因と修正方法を教えていただきたいです。

意見：

<!-- 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">Eliminar</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 -->

js ファイル:

function callToModal(data){
 $('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?');

  $('.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');
  // alert(id);
  $.ajax({
    url: "deleteFrontUser",
    type: 'POST',
    data: 'id='+id,
      success: function(html){
        // alert(html);
        $('[data-id='+id+']').parents('tr').remove();
        $('#myModal3').modal('hide');
      }      
    });
   return false;
  });
};
4

2 に答える 2

1

問題は、私が関数を呼び出していて（ワンクリック）、何もトリガーされなかったことです。コードを変更したところ、非常にうまく機能しています。ここでチェックアウトできます：

http://bootply.com/97366

意見：

私の質問と同じですが、モーダル名を「myModal」に変更しただけです。

Js ファイル:

$('#myModal').on('show', function() {
 var id = $(this).data('id'),
 username = $(this).data('usern');

 $('#myModal .modal-body p').html("Desea eliminar al usuario " + '<b>' + username + '</b>' + ' ?');
})

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

  var id = $(this).data('id');
  var user = $(this).data('title');

  $('#myModal').data('id', id).modal('show');
  $('#myModal').data('usern', user).modal('show');
});

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

$.ajax({
  url: 'deleteFrontUser',
  type: 'POST',
  data: 'id='+id,
  success: function(html){

    $('[data-id='+id+']').parents('tr').remove();
    $('#myModal').modal('hide');
  }      
});
return false;
});

私もやったのは、次のようにhtmlに「data-title」属性を追加することでした：

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

data-title はユーザー名を保存するため、jquery は後でユーザー名を削除できます。smarty テンプレート エンジンを使用していることに注意してください。

これが私のような初心者に役立つことを願っています:)

于 2013-11-28T18:26:30.773 に答える
0

そこに渡すID（リスト内のユーザーのIDだと思います）をグローバル変数に保存してみてください。グローバル変数は、削除ボタンを押した対応する行の最後のIDで常にオーバーライドされます。

そして、次のようにモーダルを呼び出すことができます：

 $('#myModal3').modal('show');

この後、グローバル変数から ID を取得し、それを ajax ポストに渡すことができます

于 2013-11-28T16:17:42.100 に答える