Jquery Confirmation Modalを追加するには

Question

jqueryを使用してデータベースからデータを削除しようとしていました。今私はそれが最終的にそれを削除する前に、jquery確認モーダル（YES：NO）を表示したいと思います。私はそれをする方法を学ぶためにいくつかのチュートリアルを行ったが、私はそれらの仕事を私のためにすることができなかった

私は親切に確認モーダルを追加する方法を教えてください。

おかげ

<script> 

$(function(){ // added 
      $('a.delete').click(function(){ 
       var a_href = $(this).attr('href'); 
    $.ajax({ 

    type: "POST", 
    url: "<?php echo base_url(); ?>batchlist/delete", 
    data: "id="+a_href, 
    success: function(server_response){ 

       if(server_response == '1') 
          { alert('MSG');} else {$("#trid_"+a_href).hide('slow'); } 

            }    

    }); //$.ajax ends here 

       return false 
    });//.click function ends here 
    }); // function ends here   


</script         

これは、あなたがこれを行うにはjQueryを必要としない私の削除アンカー

<a href="<?php echo $row['studentid']; ?>" title="Delete" class="delete" ><img src="<?php echo base_url(); ?>support/images/icons/cross.png" alt="Delete" /></a>    

Answer 1

です。 Javascriptがちょうどlovelylyこれを行います。これを行うには

if (confirm("Are you sure you want to contiune with this request?")) { 
    //Do stuff 
} 

シンプル:)

Answer 2

最も簡単な方法は、基本的なJavaScriptです。

右AJAX呼び出しの前に、彼らは衰退のであれば、それだけでAJAXを気にしないこの

if(!confirm('Are you sure you want to delete this?') { 
    return false; 
} 

を置きます。

Answer 3

私は、モーダルダイアログにjqueryウィジェットを使用し、削除/キャンセルボタンを処理するのが便利だと思います。

$(document).ready(function() { 

     $("#sampleDeleteConfirmation").confirmDialog({ 
      url: '/DeleteUrl', 
      postParamName: 'canChangeThisIfNeeded', 
      elements: $(".confirmThis"), 
      afterDelete: function (event, response) { 
       //callback after delete 
      } 
     }); 

    }); 

：確認ダイアログショーをトリガすべき要素を渡し、

<div title="Delete confirmation" id="sampleDeleteConfirmation" 
    style="display: none;"> 
</div> 

をして、このdiv要素にウィジェットを適用します。

(function ($) { 
     $.widget('my.confirmDialog', { 
      options: { 
       url: null, 
       elements: null, 
       postParamName: 'id', 
       afterDelete: null 
      }, 
      _create: function() { 
       var that = this; 
       var options = that.options; 
       that.element.dialog({ 
        resizable: false, 
        autoOpen: false, 
        modal: true, 
        buttons: { 
         "Delete": function (e, ui) { 
          $(this).dialog("close"); 
          $.post(options.url, that.postData, function (resp) { 
           that._trigger('afterDelete', e, resp); 
          }); 
         }, 
         "Cancel": function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
       options.elements.live('click', function (event, ui) { 
        that.askConfirmation(this); 
       }); 
      }, 
      askConfirmation: function (askElem) { 
       var that = this; 

       var confirmationText = $(askElem).attr("data-confirmation"); 
       that.element.text(confirmationText); 

       var postData = {}; 
       postData[that.options.postParamName] = $(askElem).attr("data-value"); 
       that.postData = postData; 

       that.element.dialog("open"); 
      }, 
      destroy: function() { 
       this.element.dialog("destroy"); 
       $.Widget.prototype.destroy.apply(this, arguments); 
      } 

     }); 

    } (jQuery)); 

使い方が本当に簡単です、あなただけの確認ダイアログのためのdivを作成します

また、私は、テキストを変更するためのモーダルダイアログを表示するボタンのデータ属性を使用し、アクションを削除するためのポスト値を渡します。

  <button type="button" class="confirmThis" data-value="123" data-confirmation="Delete item 123?"> 
       Delete 
      </button> 
      <button type="button" class="confirmThis" data-value="567" data-confirmation="Delete item 567?"> 
       Delete 
      </button> 

、すべてのthats）