11540 sujets

JavaScript, DOM et API Web HTML5

[résolu] JQuery ui Dialog is not a function

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 : 


// 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>


<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

<div id="dialog" title="Acheter un article">
	<p>Cet article vous coûtera 1 crédit</p>
</div>


Et enfin mon fichier buyarticle.js 

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


$("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 Smiley bawling

Merci d'avance pour votre aide.
Modifié par supertino7 (09 Jul 2009 - 17:36)
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...
J'ai enfin trouvé !

Il fallait d'abord initialiser la boite de dialogue : 


$(document).ready( function() {
	var popo = $("#dialog").dialog({ autoOpen: false });


Puis dans le click : 


$("#buyarticle").click( function() {
   e.preventDefault();
   popo.dialog("open");
}


Et voila ! Smiley smile
Modifié par dew (10 Jul 2009 - 14:45)
Sujet clos
Aller à