[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

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

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

jQuery

Discussions similaires

Partager

Partager