1

まず、javascript の確認は、私がここで探しているものではありません。いっぱい読んでください。つまり、通常のシステム ダイアログ ボックスを警告することによってユーザーを確認する関数が渡されたすべてのリンクに onClick 属性を配置することは、私が望むものではありません。

システムが提供する通常のダイアログ ボックスではなく、ブートストラップのダイアログ ボックスを使用しました。

ここには、さまざまなアイテムのいくつかの削除ボタンがあります

<a href="www.mysite.com/product/1" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/2" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/3" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

以下は、Bootstrap を使用してモーダルを表示するためのマークアップです。

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger" data-dismiss="modal">Delete</button>
  </div>
</div>

ダイアログボックスは正しく表示されていますが、ダイアログボックスの削除ボタンを押した後、上記のリンクに対応するページにリダイレクトできません。モーダルはリダイレクトせずに消えます。

4

3 に答える 3

2

ブートストラップ マークアップでデータ属性を追加し、サーバーに ajax リクエストを送信して、その場でページを更新せずに項目を削除できるようにします。

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
    <a class="btn btn-danger" data-action="delete-item" data-item="XXX" data-dismiss="modal">Delete</a>
  </div>
</div>

data-itemそして今、jqueryまたはjavascriptを使用して、サーバーにリクエストを送信して、指定したものの削除操作を実行できますXXX。

また、次のようなjavascriptメソッドを使用してデータアイテムを生成すると、データアイテムの動的な追加が簡単になります-

function show_dialog_for(item_id)
{
   //your code here to generate and show the model
   //Bind the ajax method to send the delete request for the item_id
   $("a[data-action]").bind( "click", function() {
      //Send request for deletion
   });
}

次に、そのリンクのクリックイベントでバインドする必要があります。これは、次のように簡単に実行できます-

$(".remove-item").bind( "click", function() {
   show_dialog_for($this.prop("data-item"));
});

次のリンクの場合-クラスプロパティ「remove-item」とdata-item with XXXを追加しました

<a href="www.mysite.com/product/1" class="remove-item" data-item="XXX" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

これがあなたを助けることを願っています。

于 2013-09-22T09:52:41.307 に答える