如何添加Jquery確認模式

我試圖從數據庫中刪除數據使用jquery和下面的腳本幫助我這樣做。現在我想顯示一個jquery確認模式（YES：NO），然後才能刪除它。我經歷了一些教程，學習如何做到這一點，但我不能讓這些爲我工作如何添加Jquery確認模式

請親切地告訴我如何添加確認模式。

感謝

<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

這是我刪除錨點

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

來源

2011-12-23 black_belt

你並不需要jQuery來做到這一點。用JavaScript這樣做只是lovelyly：

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

簡單:)

來源

2011-12-23 14:30:09

謝謝傑米Hutber。 – 2011-12-23 14:46:58

有什麼方法可以爲您的解決方案添加一些樣式（CSS）。它看起來不太好... :)謝謝 – 2011-12-23 14:50:29

可悲的是風格是瀏覽器sepsific。如果你打算引入一個樣式化的版本，我會動態添加一個新的元素，並在那裏只有一個鏈接到刪除。刪除一旦用戶點擊它。或者看看http://jqueryui.com/demos/dialog/並把我的鏈接放在那裏，然後在你的ajax成功的情況下，我會關閉這個盒子。這樣你就知道這個盒子只會在請求成功時纔會消失。 – 2011-12-23 15:12:00

要做到這一點，最簡單的方法是用基本的JavaScript。

權的AJAX調用之前，把這個

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

所以，如果他們拒絕，它只是不與阿賈克斯打擾。

來源

2011-12-23 14:38:04 yoozer8

我發現使用jquery小部件進行模式對話並處理刪除/取消按鈕很方便。

(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：

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

和應用小工具，這個div，傳遞應觸發確認對話框中顯示的元素：

$(document).ready(function() { 

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

    });

也爲便於我使用數據屬性上的按鈕，顯示模式對話框來修改文本和傳遞值來發布刪除操作。

  <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>

和多數民衆贊成）

來源

2011-12-30 11:00:30 shkipper

如何添加Jquery確認模式

回答

相關問題