Error de JQuery: no se pueden llamar métodos en el diálogo antes de la inicialización; intentó llamar al método ‘cerrar’

5 minutos de lectura

avatar de usuario
devdar

De repente recibo este error de jQuery:

Error: no se pueden llamar métodos en el diálogo antes de la inicialización; intentó llamar al método ‘cerrar’

Complementos

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

código jQuery

Recibo esos mensajes en la siguiente función:

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>

  • No recibo este error: jsfiddle.net/ztPUj. Pero el violín usa jQuery UI 1.9.2, si eso hace alguna diferencia. De lo contrario, algún otro código, que no publicaste, debe causar el problema y, si no proporcionas más información, no podremos ayudarte.

    – Félix Kling

    20 de marzo de 2013 a las 20:38


  • Eso es jQuery UI 1.9.2 y funcionó, puede incluir una respuesta para que la acepte

    – devdar

    20 de marzo de 2013 a las 21:09

  • Incluso podría considerar 1.10.2, que parece ser la versión estable actual.

    – Félix Kling

    20 de marzo de 2013 a las 21:11

  • ¿Hay alguna manera de especificar en su página la última versión estable de un complemento jquery para que lo encuentre automáticamente?

    – devdar

    20 de marzo de 2013 a las 21:13

  • Estoy usando 1.10.2 y sigo recibiendo este error. Mi configuración es un poco diferente, pero el cuadro de diálogo se inicializa mucho cuando llamo .dialog('close')y el error sigue ocurriendo.

    -Peter Herdenborg

    16 de septiembre de 2013 a las 10:24

Tuve un problema similar al abrir un cuadro de diálogo con un diseño parcial en asp.net MVC. Estaba cargando la biblioteca jquery en la página parcial, así como en la página principal, lo que estaba causando que apareciera este error.

  • Gracias gracias gracias. Perdí un día pero me salvaste.

    – DotNetPrincipiante

    18 de junio de 2014 a las 15:59

  • ¡¡Gracias!! Este era exactamente mi problema.

    – Riain McAtamney

    11 de noviembre de 2015 a las 16:43


  • Este es el respuesta correcta y debería ser la respuesta número 1.

    – CodeCabbie

    13 mayo 2016 a las 12:06


  • También enfrenté el mismo problema, ¿dime cómo resolver esto?

    – Código difícil

    23 de febrero de 2017 a las 9:19

  • @hardcode Elimina la biblioteca jquery de la página parcial.

    – Behr

    23 de febrero de 2017 a las 19:48

avatar de usuario
pmckeown

Parece que sus botones no están declarados correctamente (según el documentación más reciente de la interfaz de usuario de jQuery de todos modos).

prueba lo siguiente:

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});

  • La documentación dice: “Se admiten varios tipos: – Objeto: las teclas son las etiquetas de los botones y los valores son las devoluciones de llamada cuando se hace clic en el botón asociado. – Matriz: […]“. Parece que esto es lo que tiene el OP y, según los documentos, está bien.

    – Félix Kling

    20 de marzo de 2013 a las 20:42


  • Muy cierto. Quizás hay algo más en el código que no se muestra en el OP…

    – pmckeown

    20 de marzo de 2013 a las 20:59

  • Tiene mucho sentido que esta sea la respuesta aceptada. Resuelve el problema, ya que algunos ejemplos en los documentos de jqueryui son incorrectos (específicamente la variante {name:callback}). Fuente: Tuve exactamente el mismo problema, cambié las definiciones de mis botones y el problema se solucionó.

    – Josías

    08/01/2014 a las 21:30


avatar de usuario
EdsonF

Prueba esto – funciona para mí:

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

Espero que te ayude

  • ¿Puede alguien que votó a favor explicar qué marcó exactamente la diferencia? Veo una segunda llamada a dialog()esta vez con dialog('open'), pero lo intenté y no hizo ninguna diferencia. ¿Qué más es diferente aquí?

    – Tyler Collier

    12/08/2014 a las 21:32

  • Para mí, estaba declarando el nombre del diálogo explícitamente, en lugar de usar ‘esto’

    – Familia

    18/11/2014 a las 19:33

También obtuve el mismo error: no puedo llamar a los métodos en el diálogo antes de la inicialización; intentó llamar al método ‘cerrar’

lo que hice fue activar el evento del botón de cierre que está en el encabezado del cuadro de diálogo como

esto está funcionando bien para mí para cerrar el cuadro de diálogo

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

Es tuyo $(this).dialog("close") por casualidad ser llamado desde dentro de una devolución de llamada de “éxito” de Ajax? Si es así, intente agregar context: this como una de las opciones para su $.ajax() llamar, así:

$("#dialog").dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $.ajax({
                url: '/path/to/request/url',
                context: this,
                success: function(data)
                {
                    /* Calls involving $(this) will now reference 
                       your "#dialog" element. */
                    $(this).dialog( "close" );
                }
            });
        }
    }
});

avatar de usuario
Juan Pan

parece que, por alguna razón, jQuery UI intentará ejecutar todo el código definido en los botones en el momento de la definición. Es una locura, pero tuve el mismo problema y se detuvo una vez que hice este cambio.

if ($(this).dialog.isOpen === true) { 
    $(this).dialog("close");
}

avatar de usuario
Pedro Herdenborg

Recibí el mismo error en 1.10.2. En mi caso, quería que al hacer clic en la superposición de fondo se ocultara el cuadro de diálogo actualmente visible, independientemente del elemento en el que se basara. Por lo tanto, tuve esto:

$('body').on("click", ".ui-widget-overlay", function () {
    $(".ui-dialog").dialog('destroy');
});

Esto solía funcionar, por lo que creo que deben haber eliminado el soporte en JQUI para llamar a .dialog() en la ventana emergente en algún momento.

Mi solución se ve así:

$('body').on("click", ".ui-widget-overlay", function () {
    $('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});

¿Ha sido útil esta solución?