Erreur JQuery : Impossible d'appeler des méthodes sur le dialogue avant l'initialisation ; tentative d'appeler la méthode "close".

Question

Je reçois soudainement cette erreur de jQuery :

Erreur : Impossible d'appeler des méthodes sur le dialogue avant l'initialisation ; tentative d'appeler la méthode 'close'.

Plugins

 <script src="//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> 

Code jQuery

Je reçois ces messages dans la fonction suivante :

$(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>

Answer 1

J'ai eu un problème similaire en ouvrant un dialogue avec une mise en page partielle dans asp.net MVC. Je chargeais la bibliothèque jquery sur la page partielle ainsi que sur la page principale, ce qui provoquait l'apparition de cette erreur.

Answer 2

Il semblerait que vos boutons ne soient pas déclarés correctement (selon les règles de l'UE). Dernière documentation sur jQuery UI de toute façon).

essayez ce qui suit :

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

Answer 3

Essayez ceci - ça marche pour moi :

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

J'espère que cela vous aidera

Answer 4

J'ai également obtenu la même erreur : cannot call methods on dialog prior to initialization ; attempted to call method 'close'.

Ce que j'ai fait, c'est que j'ai déclenché l'événement du bouton de fermeture qui se trouve dans l'en-tête de la boîte de dialogue. comme

Cela fonctionne bien pour moi pour fermer le dialogue.

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

Answer 5

J'ai eu la même erreur dans la version 1.10.2. Dans mon cas, je voulais qu'un clic sur la superposition d'arrière-plan cache la boîte de dialogue actuellement visible, quel que soit l'élément sur lequel elle était basée. J'avais donc ceci :

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

Cela fonctionnait auparavant, donc je pense qu'ils ont dû supprimer le support dans JQUI pour appeler .dialog() sur la popup elle-même à un moment donné.

Ma solution de contournement ressemble à ceci :

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