jquery-ui-dialog - Cara menghubungkan ke acara tutup dialog

186

Saya menggunakan jquery-ui-dialogplugin

Saya mencari cara untuk menyegarkan halaman ketika dalam beberapa keadaan ketika dialog ditutup.

Apakah ada cara untuk menangkap acara dekat dari dialog?

Saya tahu saya dapat menjalankan kode ketika tombol tutup diklik tetapi itu tidak mencakup penutupan pengguna dengan melarikan diri atau x di sudut kanan atas.

Brownie
sumber

Jawaban:

248

Saya telah menemukannya!

Anda dapat menangkap acara tutup menggunakan kode berikut:

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

Jelas saya bisa mengganti peringatan dengan apa pun yang perlu saya lakukan.
Sunting: Pada Jquery 1.7, bind () telah menjadi on ()

Brownie
sumber
3
salah ketik: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja
1
Ini membantu tetapi $('div#popup_content')benar? Apa yang harus saya ganti dengan ini, mengingat dialog saya dibuka seperti inijQuery.fn.dialog.open({})
Jake N
Saya melihat dialog ditutup terlebih dahulu dan kemudian peringatan muncul, jika situasinya sama untuk semua orang, dapatkah seseorang membantu saya sehingga peringatan itu muncul terlebih dahulu dan kemudian klik OK kemudian jendela ditutup? Perbaiki saya ....
changeme
5
Ini harus diperbarui untuk digunakan pada () alih-alih bind () yang sekarang sudah usang.
RBZ
2
Perlu diingat bahwa jika Dialog jQuery UI belum pernah dibuka sebelumnya pada halaman, maka overlay div tidak akan ada di DOM. Karenanya, Anda dapat mempertimbangkan melakukan sesuatu seperti ini sebagai gantinya:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan
192

Saya percaya Anda juga dapat melakukannya saat membuat dialog (disalin dari proyek yang saya lakukan):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Catatan close: CloseFunction

Darryl Hein
sumber
9
Bagi saya, jawaban ini lebih benar daripada jawaban yang diterima. Juga, dokumentasi API yang benar dapat ditemukan di sini: api.jqueryui.com/dialog/#event-close
Chris Gillum
2
Jake N - Anda harus benar-benar menulis fungsi yang dapat diakses oleh dialog yang disebut 'CloseFunction' agar ini berfungsi, misalnya tepat di atas Anda dapat menulis var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament
Ini adalah opsi tetapi pada saat kode digunakan di tempat yang berbeda. Jawaban yang dipilih berfungsi ketika Anda ingin menambahkan perilaku yang berbeda dalam konteks yang berbeda dan menggunakan kembali kode pembuatan dialog untuk mendapatkan standarisasi.
NectarSoft
Anda punya overlaydua kali. Itu tidak perlu kan?
radbyx
1
Ini berfungsi dan jelas merupakan jawaban yang diperlukan dan berguna di sini, tetapi juga menjalankan kode CloseFunction setiap kali dialog ditutup dengan cara apa pun, bukan hanya ketika ditutup dengan X atau sesuatu. Jadi jika Anda ingin menjalankan kode tertentu ketika dialog ditutup dengan X atau tombol Batal, tetapi tidak ketika itu ditutup oleh sesuatu yang lain terjadi (seperti dalam kasus saya ketika input yang dikirimkan divalidasi sebagai benar), maka ini tidak akan kerja.
mikato
31
$("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    width: 400,
    height: 140,
    modal: true, 
    buttons: {
        "SUBMIT": function() { 
        $("form").submit();
    }, 
        "CANCEL": function() { 
        $(this).dialog("close");
    } 
    },
    close: function() {
      alert('close');
    }
});
Mo Ming C
sumber
21
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

Properti "tutup" dialog memberikan acara tutup untuk hal yang sama.

Taksh
sumber
16

Anda juga dapat mencoba ini

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
Umair Noor
sumber
10

Inilah yang bekerja untuk saya ...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});
morttan
sumber
8

Pada jQuery 1.7, metode .on () adalah metode yang disukai untuk melampirkan penangan acara ke dokumen.

Karena tidak ada yang benar-benar membuat jawaban dengan menggunakan. on()bukannya bind()saya memutuskan untuk membuatnya.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});
Disper
sumber
6

tambahkan opsi 'tutup' seperti di bawah sampel dan lakukan apa yang Anda inginkan fungsi inline

close: function(e){
    //do something
}
Mehdi Roostaeian
sumber
4

Jika saya memahami jenis jendela yang Anda bicarakan, tidak akan $ (jendela) .unload () (untuk jendela dialog) memberikan Anda pengait yang Anda butuhkan?

(Dan jika saya salah paham, dan Anda berbicara tentang kotak dialog yang dibuat melalui CSS daripada jendela browser pop-up, maka semua cara untuk menutup jendela itu adalah elemen yang bisa Anda daftarkan dengan hander klik.)

Sunting: Ah, saya mengerti sekarang Anda sedang berbicara tentang dialog jquery-ui, yang dibuat melalui CSS. Anda dapat mengaitkan X yang menutup jendela dengan mendaftarkan pengendali klik untuk elemen dengan kelas ui-dialog-titlebar-close .

Yang lebih berguna, mungkin, adalah Anda memberi tahu Anda cara mencari tahu dengan cepat. Saat menampilkan dialog, cukup buka FireBug dan Inspect elemen yang dapat menutup jendela. Anda akan langsung melihat bagaimana mereka didefinisikan dan itu memberi Anda apa yang Anda butuhkan untuk mendaftarkan penangan klik.

Jadi untuk langsung menjawab pertanyaan Anda, saya yakin jawabannya benar-benar "tidak" - tidak ada acara dekat yang dapat Anda kaitkan, tetapi "ya" - Anda dapat mengaitkan semua cara untuk menutup kotak dialog dengan cukup mudah dan mendapatkan apa maumu.

andy
sumber
Hai andy. Saya suka dialog dari jquery-ui yang dibuat melalui css dan javascript. Dari melihat kode saya pikir ada kait di sana untuk saya, tetapi saya tidak tahu bagaimana mencapainya.
Brownie
2

Anda dapat mencoba kode berikut untuk menangkap acara penutupan untuk setiap item: halaman, dialog dll.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
Alexei
sumber
1
Cukup gunakan .on () - alih-alih .live () atau .bind ()
cssyphus