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

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?

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 .

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.

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

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.

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.

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
}

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();

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

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.

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");
  }
});

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