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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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.