[JqueryUI] "Dialog" dans une boucle + ajax. Ajout données impossible.

__fabrice · 31/10/2011, 17h00

Salut à tous,

J'ai un soucis avec l'element "Dialog" de jQueryUI. Je charge des boites de dialogues dans une boucle, avec du contenu différent. Ce contenu est généré en Ajax. Ensuite, je dois envoyer le dernier dans le div qui dois être afficher. La fenêtre s'ouvre, mais pas le contenu "items" ($dialogBox.append(items)

Je pense que çà doit etre un soucis de contexte (this) ?, Une idée ?

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
var optionsDialogMessage = {
	autoOpen: false,
	resizable: false,
	show: 'slide',
	hide: 'drop',
	height:400,
	width:500,
	modal: false,
	buttons: {
		'Fermer': function() {
			var $dialog = $(this);
			$dialog.dialog('close');
		}
	}
};
 
var dialogMessage ='';
var thisDialogMessage ='';
 
$('.dialog-domains').each(function() {		
	thisDialogMessage = this;
	$.data(
			thisDialogMessage,
			'dialog',
			$(this).next().dialog(optionsDialogMessage)
	);
 
}).live ('click',function(e){
	var id = $(this).attr('id').replace(/id-domains-/,'');
	var $dialogBox = $('#dialog-message-'+id);
	var url = '/backoffice/provider/ajaxgetdomains/';
 
	ajaxPattern.requestAjax({
		url 		: url,
		data		: "id=" + id,
		success 	: function(msg) {
 
			if (msg.response == 1) {
				var items ='';
 
				$.each(msg.datas, function(key, val) {
				    items += '<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;">';
					    items += val;
					    items += '</span>';
				});
				$dialogBox.empty();	
				$dialogBox.append(items);	
 
		$.data(thisDialogMessage, 'dialog').dialog('open');					
			} else {
				display_error_message('Il y a eu une erreur lors de votre requête.');
			}				
		}				
	});		
 
	e.preventDefault();
});

Le HTML:

Code :

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

1
2
3
4
5
6
<td>
	<a class="dialog-domains" id="id-domains-<?php echo $row['id_provider']?>" href="#"><button>Voir les compétences</button></a>
	<div class="dialog-message" id="dialog-message-<?php echo $row['id_provider']?>"></div>
</td>
<td><a href="<?php  echo $linkEdit; ?>"><button>Voir</button></a></td>
</tr>

Merci

Fabrice

danielhagnoul · 31/10/2011, 23h17

Bonsoir

Citation:

Ce contenu est généré en Ajax.

Voir : http://www.developpez.net/forums/d83...s/#post4805186

__fabrice · 02/11/2011, 09h59

Bonjour,

Merci, effectivement, je sais qu'il faut faire un live. C'est ce que je fais d'ailleurs :

Code :

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

1
2
3
4
5
6
7
8
9
		);
 
	}).live('click',function(e){
		var id = $(this).attr('id').replace(/id-domains-/,'');
		var $dialogBox = $('#dialog-message-'+id);
		var url = '/backoffice/provider/ajaxgetdomains/';
 
		ajaxPattern.requestAjax({
			url 		: url,

Par ailleurs, dans la doc, il est dit que le chainage avec live() ne marche pas. J'ai donc virer le chainage, mais çà change rien. Le DOM est bien modifié comme il faut, mais la dialog s'affiche vide.

Une autre idée ?

Merci
Fabrice

danielhagnoul · 03/11/2011, 02h46

Bonsoir

L'erreur est dans la construction de "items". Il ne faut rien mettre dans le span qui sert à la construction de l'icône. Voici mon code de test :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* -- */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<a class="dialog-domains" id="id-domains-1" href="#"><button>Voir les compétences</button></a>
 
<div class="dialog-message" id="dialog-message-1"></div>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7rc2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		$(function(){
			/* -- */
var optionsDialogMessage = {
	autoOpen: false,
	resizable: false,
	show: 'slide',
	hide: 'drop',
	height:400,
	width:500,
	modal: false,
	buttons: {
		'Fermer': function() {
			var $dialog = $(this);
			$dialog.dialog('close');
		}
	}
};
 
var dialogMessage ='';
var thisDialogMessage ='';
 
$('.dialog-domains').each(function() {		
	thisDialogMessage = this;
	$.data(
			thisDialogMessage,
			'dialog',
			$(this).next().dialog(optionsDialogMessage)
	);
 
}).live ('click',function(e){
	var id = this.id.replace(/id-domains-/,'');
	var $dialogBox = $('#dialog-message-'+id);
 
	var items ='<p>';
 
	items += '<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>';
	items += " Un mot pour remplir";
	items += '</p>';
 
	$dialogBox.html(items);
 
	$.data(thisDialogMessage, 'dialog').dialog('open');
 
	e.preventDefault();
});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

__fabrice · 07/11/2011, 15h28

Sauf erreur de ma part, ton code marche que dans un cas très précis.

Si je modifie juste ceci à ton exemple :

Code :

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

1
2
3
4
5
<a class="dialog-domains" id="id-domains-1" href="#"><button>Voir les compétences</button></a>
<div class="dialog-message" id="dialog-message-1"></div>
<br>
<a class="dialog-domains" id="id-domains-2" href="#"><button>Voir les compétences 2</button></a>
<div class="dialog-message" id="dialog-message-2"></div>

le HTML :

Code :

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

1
2
3
items += '<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>';
items += " Un mot pour remplir"+id;
items += '</p>';

Le premier bouton n'affiche rien, le second oui. Et dès le click du second, le premier affiche le code du second.
Je n'ai pas testé l'appel ajax du coup

Fabrice

danielhagnoul · 10/11/2011, 11h40

Bonjour

Je n'ai corrigé que le problème du "span" ! Pour le reste, c'est le code que vous avez donné dans votre premier message. Et ce code ne peut traiter qu'un seul dialogue.

Personnellement j'utiliserais un code beaucoup plus classique, je créerais un seul dialogue et je modifierais son titre et son contenu avant son ouverture.

__fabrice · 10/11/2011, 12h04

salut,

Je voulais faire comme çà, mais pour un soucis de performance, faire un select à chaque tour de boucle pour remplir une dialog.... c pas top

Donc, pas de solutions ?

Fabrice

10/11/2011, 11h40	#6
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Je n'ai corrigé que le problème du "span" ! Pour le reste, c'est le code que vous avez donné dans votre premier message. Et ce code ne peut traiter qu'un seul dialogue. Personnellement j'utiliserais un code beaucoup plus classique, je créerais un seul dialogue et je modifierais son titre et son contenu avant son ouverture. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

10/11/2011, 12h04	#7
__fabrice Membre actif Fabrice Inscription : août 2004 Messages : 308 Détails du profil Informations personnelles : Nom : Fabrice Âge : 40 Informations forums : Inscription : août 2004 Messages : 308 Points : 180 Points : 180	salut, Je voulais faire comme çà, mais pour un soucis de performance, faire un select à chaque tour de boucle pour remplir une dialog.... c pas top Donc, pas de solutions ? Fabrice
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email