Hộp thoại jQuery UI - không mở sau khi đóng

Tôi có một vấn đề với jquery-ui dialog box.

Vấn đề là khi tôi đóng hộp thoại và sau đó tôi nhấp vào liên kết kích hoạt nó, nó không bật lên trở lại trừ khi tôi làm mới trang.

Làm cách nào để gọi lại hộp thoại mà không làm mới trang thực.

Dưới đây là mã của tôi:

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

Cảm ơn

Bạn thực sự phải sử dụng $("#terms").dialog({ autoOpen: false });để khởi tạo nó. Sau đó, bạn có thể sử dụng $('#terms').dialog('open');để mở và $('#terms').dialog('close');đóng hộp thoại .

Tôi đã giải quyết nó.

Tôi đã sử dụng hàm hủy thay vì đóng (nó không có ý nghĩa gì), nhưng nó đã hoạt động.

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

ở dòng cuối cùng, không dùng $(this).remove()use $(this).hide()thay thế.

CHỈNH SỬA: Để làm rõ, trong sự kiện nhấp chuột đóng, bạn đang xóa #termsdiv khỏi DOM, đó là lý do tại sao nó không quay trở lại. Bạn chỉ cần ẩn nó đi.

Tôi tin rằng bạn chỉ có thể khởi tạo hộp thoại một lần. Ví dụ trên đang cố gắng khởi tạo hộp thoại mỗi khi nhấp vào #terms. Điều này sẽ gây ra vấn đề. Thay vào đó, quá trình khởi tạo sẽ xảy ra bên ngoài sự kiện nhấp chuột. Ví dụ của bạn có thể trông giống như sau:

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Tôi nghĩ rằng một khi bạn làm rõ điều đó, nó sẽ khắc phục sự cố 'mở từ liên kết' mà bạn đã mô tả.

Đối với tôi, cách tiếp cận này hoạt động:

Hộp thoại có thể được đóng bằng cách nhấp vào X trên hộp thoại hoặc bằng cách nhấp vào 'Bewaren'. Tôi đang thêm một id (tùy ý) vì tôi cần chắc chắn rằng mọi bit html được thêm vào dom sẽ bị xóa sau đó.

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});

 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>

Đây là một chủ đề siêu cũ nhưng vì câu trả lời thậm chí còn nói "Nó không có ý nghĩa gì", tôi nghĩ rằng tôi sẽ thêm câu trả lời ...

Bài gốc sử dụng $ (this) .remove (); trong trình xử lý đóng, điều này thực sự sẽ xóa div hộp thoại khỏi DOM. Cố gắng khởi chạy lại hộp thoại sẽ không hoạt động vì div đã bị xóa.

Sử dụng $ (this) .dialog ('tiêu diệt') đang gọi phương thức hủy được xác định trong đối tượng hộp thoại không xóa nó khỏi DOM.

Từ tài liệu:

hủy hoại()

Loại bỏ hoàn toàn chức năng hộp thoại. Thao tác này sẽ đưa phần tử trở lại trạng thái >> pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Điều đó nói rằng, chỉ phá hủy hoặc loại bỏ khi bạn có lý do chính đáng.

$(this).dialog('destroy');

làm!

.close () là chung chung và có thể được sử dụng để tham chiếu đến nhiều đối tượng hơn. .dialog ('close') chỉ có thể được sử dụng với các hộp thoại

Tôi sử dụng hộp thoại làm trình duyệt tệp hộp thoại và trình tải lên, sau đó tôi viết lại mã như thế này

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   

mọi thứ dường như hoạt động tuyệt vời.

Tôi đã gặp vấn đề tương tự với hộp thoại lớp phủ jquery-ui - nó sẽ chỉ hoạt động một lần và sau đó dừng lại trừ khi tôi tải lại trang. Tôi đã tìm thấy câu trả lời trong một trong các ví dụ của họ -
Nhiều lớp phủ trên cùng một trang
flowplayer_tools_multiple_open_close
- ai sẽ có, đúng không ?? :-) -

cài đặt quan trọng dường như là

oneInstance: false

vì vậy, bây giờ tôi có nó như thế này -

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

và mọi thứ hoạt động tốt

hy vọng điều này sẽ giúp ai đó

Ô.

Tài liệu jQuery có một liên kết đến bài viết này ' Cách sử dụng cơ bản của hộp thoại giao diện người dùng jQuery ' giải thích tình huống này và cách giải quyết nó.