UI Dialog is not a function

Version imprimable

Bonjour,

je n'arrive pas à faire fonctionner simplement le composant Dialog de JQuery UI.
Je cherche juste à faire apparaitre une boite de dialogue "confirmer-annuler" sur le click d'un bouton.

Je développe sous ZF, dans mon template j'inclus les différents fichiers :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // inclusion de jquery $this->headScript()->prependFile('/js/jquery-1.3.2.js'); // j'inclus les dépendances $this->headScript()->appendFile('/js/jquery-ui/ui.core.js'); $this->headScript()->appendFile('/js/jquery-ui/ui.resizable.js'); $this->headScript()->appendFile('/js/jquery-ui/ui.draggable.js'); // inclusion de dialog $this->headScript()->appendFile('/js/jquery-ui/ui.dialog.js'); // inclusion du CSS produit par ThemeRoller $this->headLink()->appendStylesheet('/css/jquery/jquery-ui-1.7.2.custom.css'); // Mon fichier js perso $this->headScript()->appendFile('/js/actualites/buyarticle.js');
ce qui me donne en <head>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script src="/js/jquery-1.3.2.js" type="text/javascript"> </script> <script src="/js/jquery-ui/ui.core.js" type="text/javascript"> </script> <script src="/js/jquery-ui/ui.resizable.js" type="text/javascript"> </script> <script src="/js/jquery-ui/ui.draggable.js" type="text/javascript"> </script> <script src="/js/jquery-ui/ui.dialog.js" type="text/javascript"> </script> <script src="/js/actualites/buyarticle.js" type="text/javascript">
Jusque la, tout m'a l'air correct, les appels sont dans le bon ordre.
Dans le template, j'ai préparé la div
Code:

1 2 3 4 <div id="dialog" title="Acheter un article"> <p>Cet article vous coûtera 1 crédit</p> </div>
Et enfin mon fichier buyarticle.js
Code:

1 2 3 4 5 6 7 $(document).ready( function() { $("input#buyarticle").click( function(e) { e.preventDefault(); $("div#dialog").dialog('open'); }
J'occulte les options modal:true etc... juste pour tester.
Et dans ma console Firebug, je me retrouve tout le temps avec la même erreur :
Code:

1 2 3 $("div#dialog").dialog is not a function --- $("div#dialog").dialog('open');
Par contre, si je mets dialog() hors du .click(), la boite apparait bien.

Je ne comprends pas :(

Merci d'avance pour votre aide.

09/07/2009, 16h37
nabab

J'ai pas encore bien regardé la fonction dialog dans l'UI, mais y'a qqchose qui me gene dans ton code: essaie $("#dialog").dialog au lieu de $("div#dialog").dialog
09/07/2009, 16h40
supertino7

Bon, en fait c'est dialog() qui ne fonctionne pas lorsque je le place dans un évènement click() , ou over().

Si je le mets juste après $(document).ready() , la boite apparait très très bien.

Je ne comprends vraiment pas pourquoi, c'est pas logique...
09/07/2009, 16h46
nabab

Et si tu executes directement

Code:

$("div#dialog").dialog('open');

dans ta console javaScript ou Firebug?
09/07/2009, 16h47
supertino7
Citation:

Envoyé par nabab

J'ai pas encore bien regardé la fonction dialog dans l'UI, mais y'a qqchose qui me gene dans ton code: essaie $("#dialog").dialog au lieu de $("div#dialog").dialog

Merci pour ton aide.

J'avais déjà essayé, au cas où c'était le sélecteur CSS qui ne convenait pas.
Code:

1 2 3 4 $(document).ready( function() { $("#dialog").dialog(); }
=> ça marche très bien.
Code:

1 2 3 4 5 6 7 8 $(document).ready( function() { $("input#buyarticle").click( function(e) { e.preventDefault(); $("#dialog").dialog(); } }
=> ça ne marche pas.

Je comprends rien du tout :calim2:

Code:

1
2
3
4
5
6
7
8
 
$(document).ready( function() {
 
	$("#buyarticle").click( function(e) {
		$("#dialog").dialog();
		e.preventDefault();	
         }  
}

Citation:
Envoyé par nabab
Code:

1 2 3 4 5 6 7 8 $(document).ready( function() { $("#buyarticle").click( function(e) { $("#dialog").dialog(); e.preventDefault(); } }
?
Non plus.

.dialog() is not a function :/
Et la, le preventDefault ne fonctionne même pas.

J'ai enfin trouvé !

Il fallait d'abord initialiser la boite de dialogue :
Code:

1 2 3 4 $(document).ready( function() { var popo = $("#dialog").dialog({ autoOpen: false });
Puis dans le click :
Code:

1 2 3 4 5 $("#buyarticle").click( function() { e.preventDefault(); popo.dialog("open"); }
Et voila ! :)

09/07/2009, 17h27
nabab

Je vois pas. Tu es sur que ton #buyarticle est bien dans le DOM ondocument.ready?

Avais pas vu... :oops:

hello,

j'avais ce même probleme, merci pour l'info. Mais par contre, dans l'action des boutons, j'ai un autre soucis pour fermer la fenêtre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var dialogDeleteImage = $("#dialog-delete-image").dialog({ autoOpen: false, resizable: false, show: 'slide', hide: 'drop', height:180, width:350, modal: true, buttons: { 'Oui': function() { $(this).dialog("close"); }, } }); $('a.gallery_delete_img').live('click',function() { dialogDeleteImage.dialog('open'); return false; });
Sur le bouton "Oui", lors du click, j'ai l'erreur :

Code:

$(this).dialog is not a function

Du coup, logiquement, il faut plutot utiliser en javascript :
Code:

1 2 3 4 buttons: { 'Oui': function() { this.dialog("close"); },
Mais rien ne change, j'ai essayé plusieurs choses sans succes. Bien que ce soit du JS pur, cela reste un soucis avec ZF car en testant comme ceci sans ZF , çà marche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Dialog var myDialog = $('#dialog').dialog({ autoOpen: false, width: 600, buttons: { "Ok": function() { $(this).dialog("close"); }, "Cancel": function() { $(this).dialog("close"); } } }); // Dialog Link $('#dialog_link').click(function(){ myDialog.dialog('open'); return false; });
Merci de votre aide.

F.

04/11/2010, 17h35
swran

Probleme semblable

j'ai Jquery ui dialog qui ne fonctionne pas avec internet explorer 8

lorqu'il s'agit de le faire apparaitre par un click!

Or pourtant cela fonctionne avec Firefox.

Que Faire SVP!