web-dev-qa-db-fra.com

Boîte de dialogue jQuery UI - vérifier s'il existe par la méthode d'instance

Je voudrais utiliser la méthode instance pour tester si le widget jQuery UI Dialog a été initialisé ou non. En ce qui concerne API , c'est possible, mais cela ne fonctionne pas pour moi:

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

démo: http://jsfiddle.net/mDbV7/

MISE À JOUR:

C'était une erreur dans la documentation, la méthode instance sera disponible à partir de la version 1.11.0, voir ce problème .

jquery-ui-dialog
56
dmnc

La dernière version de jQuery UI ne vous permet plus d'appeler des méthodes d'interface utilisateur sur des éléments qui ne sont pas encore initialisés. Je viens de les envelopper dans une instruction if, comme:

if ($("#divToBeDialoged").hasClass('ui-dialog-content')) {
    // do whatever
} else {
    // it is not initialized yet
}

Edit: nom de classe changé, merci @dmnc

89
jbabey

C'est également une bonne habitude de vider et de détruire les boîtes de dialogue une fois que vous avez fini de les utiliser. J'utilise habituellement ce code dans l'événement de fermeture de chaque boîte de dialogue

$("#myDialog").dialog({
    // other options
    close: function(event, ui) {
        $(this).empty().dialog('destroy');
    }
}

Ce serait mon conseil, plutôt que de demander à chaque fois si une boîte de dialogue existe dans une instance, assurez-vous que chaque boîte de dialogue se nettoie après elle-même.

18
Darwin Santos Arismendy

Vous pouvez utiliser:

if($('#id').is(':ui-dialog')) {
}

ou

    var obj = $('<div>test</div>').dialog();
    if (obj.is(':ui-dialog')) {
      alert('I\'m a dialog')
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
5
Frank

Si vous créez cette boîte de dialogue à partir d'un identifiant existant dans votre code html, comme cet exemple:

$('#main').dialog({});

Notez que dialog() ajoute la classe ui-dialog Dans un élément parent <div> Généré pour que cela fonctionne. À l'élément #main, Les classes ajoutées par dialog() sont: ui-dialog-content Et ui-widget-content (Dans jquery-ui-1.9.2). Donc, dans ce cas, en suivant l'exemple de @jbabey, vous pouvez vérifier la boîte de dialogue existante:

if ($('#main').hasClass('ui-dialog-content')) {
    // do whatever
}
1
xaviqv

Pour jQuery UI - v1.10.3

if($( "#myDialog" ).is(':data(uiDialog)')){//is(':data(dialog)') does not work
    //Dialog exist
}
1
Awan
     if ($('#update').is(':data(dialog)')) 
     {
              //#update has dialog
     }
     else
     {
              //#update does't have dialog
     }
1
Mahesh Reddy

une autre façon est

$('.element').is(':data(dialog)');
0
dmnc