Bagaimana cara menerapkan dialog "konfirmasi" dalam dialog Jquery UI?


148

Saya mencoba menggunakan Dialog JQuery UI untuk mengganti javascript:alert()kotak yang jelek . Dalam skenario saya, saya memiliki daftar item, dan di sebelah masing-masing individu, saya akan memiliki tombol "hapus" untuk masing-masing. pengaturan html psuedo akan menjadi sesuatu sebagai berikut:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

Di bagian JQ, pada dokumen siap, saya pertama-tama akan mengatur div menjadi dialog modal dengan tombol yang diperlukan, dan mengatur "a" untuk menjadi konfirmasi sebelum menghapus, seperti:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

Oke, ini masalahnya. selama waktu init, dialog tidak akan tahu siapa (item) akan menjalankannya, dan juga id item (!). Bagaimana saya bisa mengatur perilaku tombol konfirmasi itu untuk, jika pengguna masih memilih YA, itu akan mengikuti tautan untuk menghapusnya?


Ada plugin yang mudah digunakan untuk melakukannya di sini: stackoverflow.com/questions/6457750/form-confirm-before-submit

1
Looooong mencari solusi: stackoverflow.com/a/18474005/1876355
Pierre

Jawaban:


166

Saya hanya harus menyelesaikan masalah yang sama. Kunci untuk membuatnya berfungsi adalah bahwa dialogsebagian harus diinisialisasi dalam clickevent handler untuk tautan yang Anda ingin gunakan fungsionalitas konfirmasi dengan (jika Anda ingin menggunakan ini untuk lebih dari satu tautan). Ini karena URL target untuk tautan harus dimasukkan ke dalam event handler untuk klik tombol konfirmasi. Saya menggunakan kelas CSS untuk menunjukkan tautan mana yang harus memiliki perilaku konfirmasi.

Inilah solusi saya, disarikan untuk menjadi contoh.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Saya percaya ini akan bekerja untuk Anda, jika Anda dapat menghasilkan tautan Anda dengan kelas CSS ( confirmLink, dalam contoh saya).

Berikut adalah jsfiddle dengan kode di dalamnya.

Untuk kepentingan pengungkapan penuh, saya akan mencatat bahwa saya menghabiskan beberapa menit untuk masalah khusus ini dan saya memberikan jawaban yang serupa untuk pertanyaan ini , yang juga tanpa jawaban yang diterima pada saat itu.


2
+1 hampir berfungsi ... tetapi lihat jawaban dari @lloydphillips untuk koreksi
rohancragg

Apakah orang lain memperhatikan bahwa ini akan menyebabkan PostBack penuh di dalam UpdatePanel? Bagaimana Anda memperbaikinya?
Homer

3
Ada sesuatu tentang jawaban ini dan jawaban @lloydphillips yang hanya tidak cukup untuk saya. Pertanyaan asli mengacu pada tombol "hapus" (tautan). Secara umum, tidak disarankan untuk menggunakan tautan (HTTP GET) untuk operasi yang mengubah status (seperti DELETE). Kedua jawaban ini menganggap bahwa pengguna telah mengaktifkan javascript. Jika javascript dinonaktifkan, tautan akan menyala dan operasi hapus (atau apa pun lainnya) akan diaktifkan tanpa konfirmasi, yang bisa menjadi bencana besar. Saya berharap dapat menemukan jawaban yang berhubungan dengan masalah ini.
gema

@echo: Saya memikirkan hal yang sama. Untuk memperbaikinya saya pikir harus ada halaman lain yang meminta konfirmasi jika JS dinonaktifkan. Jika JS halaman ini bisa dihilangkan. Mungkin melalui parameter get lainnya seperti confirm = true. Sangat sulit dan rumit untuk mengambil kasus dengan dan tanpa JS. Pengembangan web berantakan.
robsch

1
@sree Sure. Anda bisa mengekstrak fungsi yang menggunakan nama id untuk digunakan sebagai parameter dan membuat panggilan jQuery untuk mengatur event handler untuk pass-in id.
Paul Morie

59

Saya menemukan jawaban oleh Paul tidak cukup bekerja karena cara dia mengatur opsi SETELAH dialog instantiated pada acara klik tidak benar. Ini kode saya yang berfungsi. Saya belum membuatnya sesuai dengan contoh Paul, tetapi hanya perbedaan kumis kucing dalam hal beberapa elemen diberi nama berbeda. Anda harus bisa menyelesaikannya. Koreksi ada di setter dari opsi dialog untuk tombol pada event klik.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

Semoga ini bisa membantu orang lain karena postingan ini semula membuat saya berada di jalur yang benar. Saya pikir saya sebaiknya memposting koreksi.


1
Saya tidak melihat apa yang Anda lakukan itu berbeda dari jawaban Paul.
Berikan Birchmeier

2
Terlihat bagus untukku. Satu-satunya hal yang saya sugest adalah menggunakan onalih-alih click, karena ini akan terus bekerja jika (misalnya) bidang digambar ulang menggunakan jQuery - api.jquery.com/on
Aaron Newton

1
hah "perbedaan kumis kucing" - Saya perlu menggunakan frasa itu lebih banyak.
Chad Gorshing

27

Saya telah membuat fungsi saya sendiri untuk dialog konfirmasi jquery ui. Ini kodenya

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Sekarang untuk menggunakan ini dalam kode Anda, cukup tulis berikut ini

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Lanjutkan.


Ini adalah solusi yang baik, sangat mirip dengan saya yang saya gunakan untuk mendapatkan ajax url dan menampilkan cepat ... function JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </div>"); $ ("# dialog"). load (url) .dialog ({resizable: false, lebar: 770, tinggi: 470, modal: true, tombol: {"Close": function () {$ (this) .dialog ( "close"); $ ("# dialog"). hapus ();}}}); }
conners

6

Solusi sederhana dan pendek yang baru saja saya coba dan berhasil

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

kemudian tambahkan saja class = "confirm" ke tautan Anda dan itu berfungsi!


Pesan .text bertanya "Tentu?" tetapi tidak memberikan pilihan ya / tidak, ok / batal. Bagaimana cara pengguna mengindikasikan jika mereka "yakin" atau "tidak yakin"?
Genki

6

Ini solusi saya .. saya harap ini membantu siapa pun. Itu ditulis dengan cepat bukannya copypasted jadi maafkan saya atas kesalahan.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Secara pribadi saya lebih suka solusi ini :)

sunting: Maaf .. saya benar-benar harus menjelaskannya lebih detail. Saya menyukainya karena menurut saya ini solusi yang elegan. Ketika pengguna mengklik tombol yang perlu dikonfirmasi terlebih dahulu, acara dibatalkan sebagaimana mestinya. Ketika tombol konfirmasi diklik solusinya bukan untuk mensimulasikan klik tautan tetapi untuk memicu acara jquery asli yang sama (klik) pada tombol asli yang akan dipicu jika tidak ada dialog konfirmasi. Satu-satunya perbedaan adalah namespace acara yang berbeda (dalam hal ini 'dikonfirmasi') sehingga dialog konfirmasi tidak ditampilkan lagi. Mekanisme asli Jquery kemudian dapat mengambil alih dan hal-hal dapat berjalan seperti yang diharapkan. Keuntungan lain adalah dapat digunakan untuk tombol dan hyperlink. Saya harap saya cukup jelas.


Pertimbangkan untuk mengedit posting Anda dan beri tahu komunitas mengapa Anda lebih suka solusi ini. Apa yang membuatnya lebih baik untuk Anda?
Logika Fuzzical

Saya mengedit posting. Saya harap ini lebih masuk akal sekarang. Ketika saya menulisnya, tampak sangat jelas sehingga tidak perlu ada komentar. Apa bedanya ketika saya mengunjungi kembali setelah beberapa saat ... :)
BineG

Solusi hebat dan sangat bersih! Belum pernah membaca tentang ruang nama acara sebelumnya. Terima kasih untuk itu!
griffla

BEAAUUTIFULLL! "..tapi untuk memicu acara jquery asli yang sama (klik) pada tombol asli .." terdengar beauutifulll !! Terima kasih untuk $("#btn").trigger("click.confirmed");
Irf

4

Saya tahu ini adalah pertanyaan lama tapi ini solusi saya menggunakan atribut data HTML5 di MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

Kode JS:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Saya suka solusi ini, terima kasih. Mudah dimengerti, dan bekerja untuk saya. Saya tidak menggunakan bagian @ Url.Action, tetapi berfungsi dengan URL yang dihasilkan oleh MVC sisi server saya (PHP / Symfony2).
fazy

3

Akankah ini berhasil?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Terima kasih atas balasan ini. Saya yakin saya akan mengujinya (namun terlihat fungsional). Salah satu masalah yang saya lihat dari banyak jawaban di sini adalah kurangnya generalisasi. Jika halaman tersebut memiliki set kontrol lain (atau tautan atau lebih) yang memerlukan konfirmasi, sepertinya kita perlu beberapa deklarasi pada interaksi / tindakan. Cara javascript lama, yaitu, href = "javascript: confirm ('link_url');" sederhana dan elegan dan cocok untuk semua case serupa. Tentu saja metode javascript terlalu mencolok sehingga orang tanpa javascript akan sepenuhnya kehilangan tautannya. Sekali lagi terima kasih banyak.
xandy

3

Seperti di atas. Posting sebelumnya membuat saya di jalur yang benar. Beginilah cara saya melakukannya. Idenya adalah memiliki gambar di sebelah setiap baris dalam tabel (dihasilkan oleh skrip PHP dari database). Ketika sebuah gambar diklik, pengguna akan diarahkan ke URL, dan sebagai hasilnya, catatan yang sesuai akan dihapus dari database sambil menunjukkan beberapa data terkait dengan catatan yang diklik dalam jQuery UI Dialog.

Kode JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Dialog div:

<div id="confirmDelete" title="Delete User?"></div> 

Tautan gambar:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Dengan cara ini Anda bisa melewatkan nilai loop PHP ke dalam kotak dialog. Satu-satunya downside menggunakan metode GET untuk benar-benar melakukan tindakan.


2

Bagaimana dengan ini:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Saya sudah mengujinya di html ini:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Ini menghapus elemen li keseluruhan, Anda dapat menyesuaikannya dengan kebutuhan Anda.


2

(Pada 03/22/2016, unduhan pada halaman yang ditautkan tidak berfungsi. Saya meninggalkan tautan di sini jika pengembang memperbaikinya di beberapa titik karena ini adalah plugin kecil yang hebat. Posting aslinya mengikuti. alternatif, dan tautan yang benar-benar berfungsi: jquery.confirm .)

Ini mungkin terlalu sederhana untuk kebutuhan Anda, tetapi Anda dapat mencoba plugin konfirmasi jQuery ini . Sangat mudah digunakan dan melakukan pekerjaan dalam banyak kasus.


Tautan membawa saya ke profil tertaut. Sepertinya Anda tidak dapat melihat plugin kecuali jika Anda adalah anggota premium tertaut.
Zane

Saya memperbarui tautan agar berfungsi lagi. Pengembang harus mengarahkan ulang tautan lama ke profil LinkedInnya. Jika dia mengubahnya lagi maka cukup google saja menggunakan "jquery confirm plugin nadia".
grahamesd

Terima kasih! Sementara saya sudah mengimplementasikan versi saya sekarang, saya masih akan melihat.
Zane

tautannya mati lagi
Valamas

1

Meskipun saya benci menggunakan eval, sepertinya cara termudah bagi saya, tanpa menyebabkan banyak masalah tergantung pada keadaan yang berbeda. Mirip dengan fungsi settimeout javascript.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

1

Saya mengalami ini sendiri dan berakhir dengan solusi, yang mirip dengan beberapa jawaban di sini, tetapi diimplementasikan sedikit berbeda. Saya tidak suka banyak potongan javascript, atau tempat penampung di suatu tempat. Saya ingin solusi umum, yang kemudian dapat digunakan dalam HTML tanpa menambahkan javascript untuk setiap penggunaan. Inilah yang saya buat (ini membutuhkan jquery ui):

Javascript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

Dan kemudian dalam HTML, tidak ada panggilan javascript atau referensi yang diperlukan:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Karena atribut judul digunakan untuk konten div, pengguna bahkan bisa mendapatkan pertanyaan konfirmasi dengan mengarahkan kursor ke tombol (itulah sebabnya saya tidak menggunakan atribut judul untuk ubin). Judul jendela konfirmasi adalah konten dari tag alt. Snip javascript dapat dimasukkan dalam .js umum termasuk, dan hanya dengan menerapkan kelas Anda memiliki jendela konfirmasi cantik.


0
$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

0

CATATAN: Tidak cukup perwakilan untuk berkomentar tetapi jawaban BineG bekerja dengan sempurna dalam menyelesaikan masalah postback dengan halaman ASPX seperti yang disorot oleh Homer dan echo. Untuk menghormati, inilah variasi menggunakan dialog dinamis.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

0

Variasi lain di atas di mana ia memeriksa apakah kontrol adalah 'asp: linkbutton' atau 'asp: tombol' yang dirender sebagai dua kontrol html yang berbeda. Tampaknya bekerja dengan baik untuk saya tetapi belum mengujinya secara ekstensif.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

0

Saya sedang mencari ini untuk digunakan pada tombol-link dalam ASP.NET Gridview (Kontrol GridView dalam Perintah). Jadi tindakan "Konfirmasi" dalam dialog perlu mengaktifkan skrip yang dihasilkan oleh kontrol Gridview saat run-time. ini bekerja untuk saya:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

eval () bisa berbahaya! Omong-omong, saya harus mengutip bagian dari kode Anda: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);Ini sama sekali tidak masuk akal!
Sk8erPeter

0

Saya tahu pertanyaan ini sudah lama tetapi ini adalah pertama kalinya saya harus menggunakan dialog konfirmasi. Saya pikir ini adalah cara terpendek untuk melakukannya.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Saya harap Anda menyukainya :)


0

Secara pribadi saya melihat ini sebagai persyaratan berulang dalam banyak tampilan dari banyak aplikasi ASP.Net MVC.

Itu sebabnya saya mendefinisikan kelas model dan tampilan sebagian:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

Dan sebagian pandangan saya:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

Dan kemudian, setiap kali Anda membutuhkannya dalam tampilan, Anda hanya menggunakan @ Html.Partial (dalam melakukannya di skrip bagian sehingga JQuery didefinisikan):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

Caranya adalah dengan menentukan JQueryClickSelector yang akan cocok dengan elemen yang membutuhkan dialog konfirmasi. Dalam kasus saya, semua jangkar dengan kelas SyLinkDelete tetapi itu bisa berupa pengidentifikasi, kelas yang berbeda dll. Bagi saya itu adalah daftar:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

ASP.Net MVC dengan jQuery.
Frederick Samson

0

Topik yang sangat populer dan google menemukan ini untuk permintaan "dialog jquery tutup acara mana yang diklik". Solusi saya menangani acara YA, TIDAK, ESC_KEY, X dengan benar. Saya ingin fungsi panggilan balik saya dipanggil tidak peduli bagaimana dialog dibuang.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Sangat mudah untuk mengarahkan ulang browser ke url baru atau melakukan sesuatu yang lain pada fungsi retval.


0

Begitu banyak jawaban bagus di sini;) Ini pendekatan saya. Serupa dengan penggunaan eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

Dan penggunaannya terlihat seperti:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

0

Di luar kotak JQuery UI menawarkan solusi ini:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Anda selanjutnya dapat menyesuaikan ini dengan memberikan nama untuk fungsi JQuery dan melewati teks / judul yang ingin ditampilkan sebagai parameter.

Referensi: https://jqueryui.com/dialog/#modal-confirmation


-1

Nah ini jawaban dari pertanyaan Anda ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

pastikan Anda memiliki jquery 1.4.4 dan jquery.ui


Ini adalah salah satu kode paling jelek yang pernah saya lihat selama bertahun-tahun. Anda menggunakan atribut yang sudah usang (seperti LANGUAGE="JavaScript"), menggunakan karakter huruf besar dan kecil dicampur, Anda mencampur kode JS sederhana dengan kode jQuery yang sama sekali tidak perlu, dan Anda menetapkan gaya dengan JS alih-alih CSS (jelek dan tidak benar secara semantik), dan, omong-omong, gaya Anda modifikasi (dengan JS sederhana) sama sekali tidak relevan mengenai pertanyaan awal. Anda harus memperpendek dan memperindah kode Anda dan fokus menjawab pertanyaan awal.
Sk8erPeter

-1

Cara mudah dengan sentuhan javascript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}

2
Intinya adalah secara khusus untuk menghindari penggunaan fungsi javascript default alert / confirm dll, jadi ini bukan solusi untuk pertanyaan.
redreinard
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.