-1

jQueryを使ってレコード削除の確認ダイアログボックスを作成する方法についてお聞きしたいです。グーグルで検索してみましたが初心者なのでよくわかりません。さらに、私はすでに Javascript アラートを実装しましたが、技術的な要件は、ネイティブ Javascript アラートの代わりに jQuery ダイアログを使用することです。助けてください。前もって感謝します。ステップバイステップのガイドがある参照リンクも高く評価されます。どうもありがとう。

以下は、更新が必要な現在のコードです。

$('.delete').click(function () {
  var pKey = $(this).parent().siblings()[0].innerText;
  //Get the Id of the record to delete
  var record_id = $(this).attr("id");
  //Get the GridView Row reference
  var tr_id = $(this).parents("#.record");
  // Ask user's confirmation before delete records
  if (confirm("Are you sure you want to delete this record?")) {
    $.ajax({
      type: "POST",
      url: '../SampleOnly.asmx/Delete',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      //Pass the selected record id
      data: "{ 'Id':'" + pKey + "'}",
      success: function (data) {
        // Change the back color of the Row before deleting
        tr_id.css("background-color", "blue");
        Do some animation effect
        tr_id.fadeOut(500, function () {
          //Remove GridView row
          tr_id.remove();
          alert(' The record has been deleted successfully');
        });
      },
4

2 に答える 2

0

ちゃんと取れてよかったです。私のような人は、今後参考にするかもしれません。以下のコードを参照してください。ありがとう！。

  $('.delete').click(function () {
 var pKey = $(this).parent().siblings()[0].innerText; 
 var record_id = $(this).attr("id");               
 var tr_id = $(this).parents(".record");     

$('<div id="dvConfirmModal"></div>').appendTo('body')
.html('<p>These item will be permanently deleted and cannot be recovered. Please confirm by clicking the OK button.</p>')
.dialog({
    modal: true,
    title: 'Delete selected item?',
    zIndex: 500,
    autoOpen: true,
    width: 'auto',
    resizable: false,
    draggable: false,
    buttons: {            
      Ok: function() {
                    $.ajax({
                           type: "POST",
                            url: '../SampleOnly.asmx/Delete',       
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            data: "{ 'Id':'" + pKey + "'}",        

                               success: function (data) {
                                tr_id.css("background-color", "red");
                                tr_id.fadeOut(500, function (){
                                tr_id.remove();
                                alert(' The record has been deleted successfully');
                                                            });
                                error: function (err) {
                                alert('Error encountered while processing your request. Try again later.');
                                                      }   
                                }                                 
                                });                                        
                $(this).dialog("close");
                      },  
      Cancel: function() {
                 $(this).dialog("close");
                         }
                      },
      close: function(event, ui) {
               $(this).remove();
                                 } 
    });
});
于 2013-08-13T04:37:13.863 に答える