Diálogo jquery ui: no se pueden llamar métodos en el diálogo antes de la inicialización

101

Tengo una aplicación en jquery 1.5 con cuadros de diálogo que funcionó bien. Si bien tengo muchos controladores .live, cambié esto a .on. Para eso, tengo que actualizar jquery (ahora 1.8.3 y jquerui 1.9.1).

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

A continuación se muestra el código:

Javascript

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

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

código HTML

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

¿Alguna idea de por qué esto podría estar sucediendo?

core-chain.io
fuente

Respuestas:

136

Prueba esto en su lugar

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

También puedes hacer:

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

Esto se debe a que el diálogo no se almacena en $('#divDialog'), sino en un nuevo div que se crea sobre la marcha y que la .dialog(opt)función devuelve .

Arrodíllate ante Zod
fuente
5
Esto funcionó para mí. ¿Tengo que inicializar el cuadro de diálogo cada vez que quiero abrirlo así o solo la primera vez? hay muchos diálogos. ¿No hay forma de configurar las opciones initiali y luego abrir los cuadros de diálogo con botones?
core-chain.io
6
Descubrí que esta solución también resolvió el error "No se pueden llamar los métodos en el cuadro de diálogo antes de la inicialización; intenté llamar al método 'abrir'" que se produce cuando un cuadro de diálogo se abre y cierra con éxito, y luego los usuarios intentan abrir el cuadro de diálogo por segunda vez . Gracias @ZOD
spadelives
Te di +1 porque también solucionó mi problema, pero ¿podrías explicar por qué funciona?
Igor L.
2
@IgorLacik Supongo que .dialog () devuelve una instancia de sí mismo para que pueda realizar el encadenamiento. Por lo tanto, .dialog (opt) .dialog ('abrir') crea una instancia de un objeto de diálogo (la primera llamada) y luego realiza 'abrir' en él. Entonces supongo que llamar a $ (obj) .dialog (opt) y luego $ (obj) .dialog ('open') luego creará una instancia de objetos de diálogo separados en el objeto jquery, por lo que el segundo no puede ver el primero opciones de configuración. Sin embargo, sin profundizar en el código de diálogo, es difícil decirlo con certeza, y no tengo tiempo para eso: D
nealio82
He actualizado la pregunta para explicar lo que trataste de explicar.
JotaBe
23

Si no puede actualizar jQuery y obtiene:

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

Puedes solucionarlo así:

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

O si controla la vista y sabe que ningún otro cuadro de diálogo debería estar en uso en toda la página, puede hacer lo siguiente:

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

Solo recomendaría hacer esto si el uso closestcausa un problema de rendimiento. Es probable que existan otras formas de solucionarlo sin realizar un cierre global en todos los diálogos.

Cymen
fuente
10

Recibí este error cuando solo actualicé la biblioteca jquery sin actualizar la biblioteca jqueryui en paralelo. Estaba usando jquery 1.8.3 con jqueryui 1.9.0. Sin embargo, cuando actualicé jquery 1.8.3 a 1.9.1 obtuve el error anterior. Cuando comenté las .closelíneas del método ofensivo , arrojó un error sobre no encontrar.browseren la biblioteca jquery que fue obsoleta en jquery 1.8.3 y eliminada de jquery 1.9.1. Entonces, básicamente, la biblioteca jquery 1.9.1 no era compatible con la biblioteca jquery ui 1.9.0 a pesar de que la página de descarga de jquery ui decía que funciona con jquery 1.6+. Esencialmente, hay errores no reportados al intentar usar versiones diferentes de los dos. Si usa la versión de jquery que viene incluida con la descarga de jqueryui, estoy seguro de que estará bien, pero es cuando comienza a usar diferentes versiones que se sale de lo común y obtiene errores como este. Entonces, en resumen, este error proviene de versiones que no coinciden (en mi caso de todos modos).

emprendedor
fuente
4
Resolví este problema actualizando también mi versión de jquery ui a 1.9.2 y luego funcionó. Entonces, jquery 1.9.1 con jquery ui 1.9.2 elimina el error anterior.
johntrepreneur
4

Entonces usas esto:

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

y si abre una vista parcial MVC en el diálogo, puede crear en el índice un botón oculto y un evento de clic de JQUERY:

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

luego, dentro de la vista parcial html, llame al botón de activación, haga clic como:

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

nos vemos.

Danilo Antonietto
fuente
2

Si desea abrir el cuadro de diálogo inmediatamente cuando el cuadro de diálogo se inicializa o la página está lista, también puede establecer el parámetro autoOpenen trueen el objeto de opciones del cuadro de diálogo:

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

Por lo tanto, no tiene que llamar al `$ (" # divDialog "). Dialog (" open ");

Cuando se inicializa el objeto de diálogo, el diálogo se abre automáticamente.

Gašper Sladič
fuente
2

La nueva versión de la interfaz de usuario de jQuery no le permitirá llamar a métodos de interfaz de usuario en el diálogo que no está inicializado. Como solución alternativa, puede utilizar la siguiente comprobación para ver si el cuadro de diálogo está activo.

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

Esto también es una solución alternativa:

$("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
fuente
0

Simplemente tuve que agregar el ScriptManager a la página. Problema resuelto.

gnardizzi
fuente
0

En mi caso el problema era que había llamado $("#divDialog").removeData(); como parte del restablecimiento de los datos de mis formularios dentro del cuadro de diálogo.

Esto resultó en que borré una estructura de datos nombrada, lo uiDialogque significaba que el diálogo tenía que reinicializarse.

Reemplacé .removeData()con eliminaciones más específicas y todo comenzó a funcionar nuevamente.

AnthonyVO
fuente
0

Mi caso es diferente, falla debido al alcance de ' esto ':

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

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

Recibí este mensaje de error porque tenía la etiqueta div en la vista parcial en lugar de la vista principal

usuario1152145
fuente
1
¿Y qué significa esto exactamente?
AaA
1
Esto está mal explicado, pero es válido. En MVC, tenía la etiqueta div que contiene el cuadro de diálogo en mi vista parcial. Cuando moví la etiqueta div que lo contenía a la página principal, el diálogo funcionó correctamente.
Paulj