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

101

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?

core-chain.io
źródło

Odpowiedzi:

136

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ę.

Klęczeć przed Zod
źródło
5
To zadziałało dla mnie. Czy muszę inicjować okno dialogowe za każdym razem, gdy chcę je otworzyć w ten sposób, czy tylko za pierwszym razem? istnieje wiele dialogów. Czy nie ma sposobu, aby ustawić opcje początkowe, a następnie otworzyć okna dialogowe za pomocą przycisków?
core-chain.io
6
Zauważyłem, że to rozwiązanie rozwiązało również błąd „Nie można wywołać metod w oknie dialogowym przed inicjalizacją; próbowałem wywołać metodę„ open ””, który pojawia się, gdy okno dialogowe zostało pomyślnie otwarte, zamknięte, a następnie użytkownicy próbują otworzyć okno dialogowe po raz drugi . Dzięki @ZOD
spadelives
Dałem Ci +1, ponieważ rozwiązało to również mój problem, ale czy możesz wyjaśnić, dlaczego to działa?
Igor L.
2
@IgorLacik Zakładam, że .dialog () zwraca swoją instancję, więc możesz wykonać łańcuch. Dlatego .dialog (opt) .dialog ('open') tworzy instancję obiektu dialogowego (pierwsze wywołanie), a następnie wykonuje na nim 'open'. Zakładam więc, że wywołanie $ (obj) .dialog (opt), a następnie $ (obj) .dialog ('open') później utworzy instancję oddzielnych obiektów dialogowych na obiekcie jquery, więc drugi nie zobaczy pierwszego opcje konfiguracji. Bez zagłębiania się w kod okna dialogowego, trudno jednak powiedzieć na pewno, a nie mam na to czasu: D
nealio82
Zaktualizowałem pytanie, aby wyjaśnić, co próbowałeś wyjaśnić.
JotaBe
23

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.

Cymen
źródło
10

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).

johntrepreneur
źródło
4
Rozwiązałem ten problem, również aktualizując moją wersję interfejsu jquery do 1.9.2, a potem zadziałało. Tak więc jquery 1.9.1 z jquery ui 1.9.2 usuwa powyższy błąd.
johntrepreneur
4

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.

Danilo Antonietto
źródło
2

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.

Gašper Sladič
źródło
2

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
}
Tomina
źródło
0

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();
Damian Królikowski
źródło
0

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

gnardizzi
źródło
0

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ć.

AnthonyVO
źródło
0

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");
  }
});
datdinhquoc
źródło
-1

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

user1152145
źródło
1
A co to dokładnie oznacza?
AaA
1
Jest to słabo wyjaśnione, ale ważne. W MVC miałem zawierający znacznik DIV dla okna dialogowego w moim częściowym widoku. Kiedy przeniosłem zawierający znacznik DIV na stronę nadrzędną, okno dialogowe działało poprawnie.
Paulj