2010-11-29 8 views
9

Est-il possible d'ajouter dynamiquement un bouton à une boîte de dialogue dans jquery ui.Ajouter dynamiquement un bouton à une boîte de dialogue

J'ai essayé d'utiliser: $ (this) .add ("button");

+0

Bienvenue à SO! ... Kut s'il vous plaît lire la FAQ http://stackoverflow.com/faq et accepter les réponses qui vous ont aidé. –

+0

Pourquoi voudriez-vous le faire de toute façon? Si vous souhaitez activer certaines actions en fonction des changements dans la boîte de dialogue, vous devez activer/désactiver les boutons existants, sans en ajouter de nouveaux. – aditya

+0

@aditya: j'ai même pensé que ... donc, y a-t-il moyen de changer dynamiquement la valeur d'un bouton ... – Kut

Répondre

9

La réponse donnée à droite sur la page jQuery UI pour dialogue ... http://jqueryui.com/demos/dialog/ (cliquez sur l'onglet « Options », puis sur le lien pour « Boutons »)

option « ou définit les boutons, après init ». ..

$(".selector").dialog("option", "buttons", { 
"Ok": function() { $(this).dialog("close"); } 
}); 

Il suffit d'ajouter le sélecteur approprié (quel que soit l'élément que vous utilisez comme la boîte de dialogue), et vous devriez être bon d'aller.

-3

Vous pouvez utiliser jQuery html() pour ajouter un peu de code HTML dans votre boîte de dialogue

Ex.: $ ('# votre Dialoguer-id') html ('');

Plus d'informations: http://api.jquery.com/html/

21

Parfois, vous voulez ajouter les boutons plus tard aussi.

var mydialog = ... result of jqueryui .dialog() 
var buttons = mydialog.dialog("option", "buttons"); // getter 
$.extend(buttons, { foo: function() { alert('foo'); } }); 
mydialog.dialog("option", "buttons", buttons); // setter 
+0

Très utile, merci! –

+0

Clever. Cependant, cela semble remplacer tous les boutons qui ont déjà été instanciés. Je pensais que $ .extend() ajouterait simplement les nouveaux boutons à côté de ceux existants. –

+0

Oui, il écrase les boutons. C'est pourquoi il est nécessaire d'OBTENIR la collection de boutons, d'en ajouter un nouveau en utilisant EXTEND, puis de réappliquer la collection. http://jsfiddle.net/Z8pZt/ – JJS

Questions connexes