Détecter si une boîte de dialogue de l'interface utilisateur jQuery est ouverte

97

J'utilise une boîte de dialogue d'interface utilisateur jQuery. S'il est ouvert, je veux faire une chose. S'il est fermé, je veux en faire un autre.

Ma question est la suivante: comment détecter si une boîte de dialogue jQuery UI est ouverte ou non?

user208662
la source

Réponses:

173

Si vous lisez les docs.

$('#mydialog').dialog('isOpen')

Cette méthode retourne un booléen (vrai ou faux), pas un objet jQuery.

Byron Whitlock
la source
1
Doh! Je ne sais pas comment j'ai négligé cela. Je vous remercie.
user208662
1
Comment feriez-vous ce test pour tous les dialogues? Supposons que vous ayez dix boîtes de dialogue différentes avec des entrées et des options séparées et que vous souhaitiez tester si l'une d'entre elles est ouverte, pas un sélecteur spécifique?
Kirk Ross
Ajoutez une classe auxdites boîtes de dialogue, puis changez le sélecteur sur votre vérification isOpen.
Suipaste
1
plus aussi: dix dialogues? peut-être que réduire cela en réutilisant une ou deux instances est une réflexion à considérer
David
1
Vérifiez également si le dialogue a même été initialisé avec $("#mydialog").hasClass("ui-dialog-content"). Voir stackoverflow.com/questions/29528706/…
Autumn Leonard
53

En fait, vous devez le comparer explicitement à vrai. Si la boîte de dialogue n'existe pas encore, elle ne retournera pas false (comme vous vous en doutez), elle renverra un objet DOM.

if ($('#mydialog').dialog('isOpen') === true) {
    // true
} else {
    // false
}
marcovtwout
la source
4
Renvoie false dans le dernier JQuery.
hoyhoy
1
Comment feriez-vous ce test pour tous les dialogues? Supposons que vous ayez dix boîtes de dialogue différentes avec des entrées et des options séparées et que vous souhaitiez tester si l'une d'entre elles est ouverte, pas un sélecteur spécifique?
Kirk Ross
2
Peut-être créer une fonction comme $ (". Ui-dialog"). Each (function (/ * vérifier cette boîte de dialogue * /))?
marcovtwout
21

Si vous voulez vérifier si la boîte de dialogue est ouverte sur un élément particulier, vous pouvez le faire:

if ($('#elem').closest('.ui-dialog').is(':visible')) { 
  // do something
}

Ou si vous voulez simplement vérifier si l'élément lui-même est visible, vous pouvez faire:

if ($('#elem').is(':visible')) { 
  // do something
}

Ou...

if ($('#elem:visible').length) { 
  // do something
}
Nick Craver
la source
3
Je vérifie ma div si elle n'est pas initialisée comme ça:$dialog.hasClass('ui-dialog-content')
Sergey
Merci, je n'ai pas pu obtenir les réponses ci-dessus en utilisant "isOpen" pour fonctionner pour moi, mais cela a fonctionné.
Kyle Challis
1

Le commentaire de Nick Craver est le plus simple pour éviter l'erreur qui se produit si le dialogue n'a pas encore été défini:

if ($('#elem').is(':visible')) { 
  // do something
}

Vous devez d'abord définir la visibilité dans votre CSS, en utilisant simplement:

#elem { display: none; }
user2452922
la source