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, 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?

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

**__fabrice** · 20/07/2010, 15h33

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 :

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

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 :

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

$(this).dialog is not a function

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

Code :

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

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 :

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

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.

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

Discussions similaires

Partager

Partager