UI Dialog is not a function

**supertino7** · 09/07/2009, 14h54

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.

**nabab** · 09/07/2009, 16h37

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

**supertino7** · 09/07/2009, 16h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready( function() {
	$("#dialog").dialog();
}

=> ça marche très bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nabab** · 09/07/2009, 16h50

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?

**supertino7** · 09/07/2009, 16h57

Envoyé par nabab

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**supertino7** · 09/07/2009, 17h24

J'ai enfin trouvé !

Il fallait d'abord initialiser la boite de dialogue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Puis dans le click :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et voila !

**nabab** · 09/07/2009, 17h27

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

Avais pas vu...

**supertino7** · 09/07/2009, 16h40

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

**nabab** · 09/07/2009, 16h46

Et si tu executes directement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

dans ta console javaScript ou Firebug?

**swran** · 04/11/2010, 17h35

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!

UI Dialog is not a function

jQuery

Vue hybride

Discussions similaires

Partager

Partager