Okno dialogowe jquery ui: nie można wywołać metod w oknie dialogowym przed inicjalizacją

Mam aplikację na jQuery 1.5 z oknami dialogowymi działającymi dobrze. Chociaż mam wiele programów obsługujących .live, zmieniłem to na .on. W tym celu muszę zaktualizować jquery (teraz 1.8.3 i jquerui 1.9.1).

Teraz mam: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Poniżej znajduje się kod:

Javascript

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

Kod HTML

<div id="divDialog">
<div id="divInDialog"></div>
</div>

Masz jakiś pomysł, dlaczego tak się dzieje?

Spróbuj tego zamiast tego

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

Możesz też:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

Dzieje się tak, ponieważ okno dialogowe nie jest przechowywane w $('#divDialog'), ale w nowym elemencie div, który jest tworzony w locie i zwracany przez .dialog(opt)funkcję.

Jeśli nie możesz zaktualizować jQuery i otrzymujesz:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Możesz to obejść w następujący sposób:

$(selector).closest('.ui-dialog-content').dialog('close');

Lub jeśli kontrolujesz widok i wiesz, że żadne inne okna dialogowe nie powinny być używane na całej stronie, możesz zrobić:

$('.ui-dialog-content').dialog('close');

Poleciłbym to zrobić tylko wtedy, gdy używanie closestpowoduje problemy z wydajnością. Prawdopodobnie istnieją inne sposoby obejścia tego problemu bez wykonywania globalnego zamknięcia wszystkich okien dialogowych.

Otrzymałem ten błąd, gdy zaktualizowałem bibliotekę jquery tylko bez równoległej aktualizacji biblioteki jqueryui. Używałem jquery 1.8.3 z jqueryui 1.9.0. Jednak kiedy zaktualizowałem jQuery 1.8.3 do 1.9.1 otrzymałem powyższy błąd. Kiedy skomentowałem obraźliwe .closewiersze metody, wyrzuciłem błąd dotyczący nie znalezienia.browserw bibliotece jquery, która była przestarzała w jquery 1.8.3 i usunięta z jquery 1.9.1. Zasadniczo więc biblioteka jquery 1.9.1 nie była kompatybilna z biblioteką jquery ui 1.9.0, mimo że strona pobierania jquery ui mówi, że działa z jquery 1.6+. Zasadniczo istnieją niezgłoszone błędy podczas próby użycia różnych wersji tych dwóch. Jeśli używasz wersji jquery, która jest dostarczana z pakietem do pobrania jqueryui, jestem pewien, że wszystko będzie dobrze, ale gdy zaczniesz używać różnych wersji, zboczysz z utartej ścieżki i otrzymasz takie błędy. Podsumowując, ten błąd pochodzi z źle dopasowanych wersji (w każdym razie w moim przypadku).

Więc używasz tego:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

a jeśli otworzysz widok częściowy MVC w oknie dialogowym, możesz utworzyć w indeksie ukryty przycisk i zdarzenie kliknięcia JQUERY:

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

następnie w widoku częściowym html wywołujesz przycisk wyzwalający kliknięcie, jak:

$("#YouButton").trigger("click")

do zobaczenia.

Jeśli chcesz otworzyć okno dialogowe natychmiast po zainicjowaniu okna dialogowego lub po przygotowaniu strony, możesz również ustawić parametr autoOpenna truew obiekcie opcji okna dialogowego:

var opt = {
        autoOpen: true,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

Dlatego nie musisz wywoływać okna dialogowego `$ (" # divDialog "). (" Open ");

Po zainicjowaniu obiektu dialogowego okno dialogowe jest otwierane automatycznie.

Nowa wersja interfejsu użytkownika jQuery nie pozwala na wywoływanie metod interfejsu użytkownika w oknie dialogowym, które nie zostało zainicjowane. Aby obejść ten problem, możesz skorzystać z poniższego sprawdzenia, aby sprawdzić, czy okno dialogowe jest aktywne.

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}

Jest to również obejście:

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();

Po prostu musiałem dodać ScriptManager do strony. Problem rozwiązany.

W moim przypadku problem polegał na tym, że dzwoniłem $("#divDialog").removeData(); w ramach resetowania danych formularzy w oknie dialogowym.

Spowodowało to wymazanie nazwanej struktury danych, uiDialogco oznaczało konieczność ponownej inicjalizacji okna dialogowego.

Zastąpiłem .removeData()bardziej konkretnymi kasowaniami i wszystko zaczęło znowu działać.

Mój przypadek jest inny, zawodzi ze względu na zakres „ tego ”:

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});

Otrzymałem ten komunikat o błędzie, ponieważ miałem znacznik DIV w widoku częściowym zamiast widoku nadrzędnego