Discussion :

[webinfo]

Bonjour,

J'utilise jQuery pour faire des boîtes de dialogues (avec la méthode .dialog()).
J'arrive à les créer, les fermer, ... Cependant j'ai plusieurs onglets, sur chaque onglet, j'ai 4 liens (avec un identifiant unique pour chacun et qui correspond à un objet de la classe kolekti_dialogs, cf code) qui chacun d'entre eux ouvre une boîte de dialogue avec chacun un contenu html à l'intérieur. Juste là toujours pas de soucis.
Le problème intervient lorsque je change d'onglet (requête ajax qui récupère et refait les liens+contenu), le contenu de la boîte de dialogue contient le texte de l'ancien onglet.
De plus, j'ai vu que jQuery instancie automatiquement à la fin de la page html les boîtes de dialogues, je pense que le problème viens de là car 1er onglet: 4 div, une pour chaque lien et changement d'onglet +4 div à la place de les remplacer ce qui du coups interfères dans les id et encombre également le document html.
J'ai essayé jQuery(".iu-dialog").remove(); mais ça ne marche pas.

Voilà un aperçu des onglets et liens:


Voilà le code générer automatiquement qui permet pour chacun des liens de lui affecter une boite de dialogue (exemple du lien 'Effacer'):

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
<li>
<script type="text/javascript">
kdialog_delete = new kolekti_dialogs('delete');
 
 jQuery('#delete').dialog('option', 'buttons', {
 
 "Valider": function() {
 $(this).dialog("close");
 $(this).dialog().remove();
 },
 
 "Annuler": function() {
 $(this).dialog("close");
 $(this).dialog().remove();
 },
 
 });
 
</script>
<a onclick="javascript:kdialog_delete.showDialog('delete')" href="javascript:void(0)">Effacer</a>
</li>

La classe kolekti_dialogs:

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
 
function kolekti_dialogs(name) {
	this.addDialog(name);
}
 
kolekti_dialogs.prototype.showDialog = function(name) {
	jQuery('#'+name).dialog('open');
}
 
kolekti_dialogs.prototype.addDialog = function(name) {
	jQuery(function() {
		$('#'+name).dialog( {
			modal : true,
			autoOpen : false,
			resizable : false,
			width : 600,
			buttons : {
				"Valider" : function() {
					$(this).dialog("close");
				},
				"Annuler" : function() {
					$(this).dialog("close");
				}
			}
		});
	});
}

Code généré par jQuery à chaque ouverture d'onglet:

Code :

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

1
2
3
4
5
6
7
8
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="overflow: hidden; display: none; position: absolute; z-index: 1000; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-delete">
...</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="overflow: hidden; display: none; position: absolute; z-index: 1000; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-rename">
...</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="overflow: hidden; display: none; position: absolute; z-index: 1000; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-move">
...</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="overflow: hidden; display: none; position: absolute; z-index: 1000; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-edit">
...</div>

Si quelqu'un à la solution je suis preneur.

Merci d'avance pour vos réponses.

[danielhagnoul]

Bonsoir.

Je n'ai pas compris le problème, mais il y a un point qui m'interpelle.


$(this).dialog().remove() supprime définitivement le dialog() du DOM et si j'ai bien compris après la mise à jour AJAX vous le récréé de nouveau.


Personnellement je me contenterais de mettre à jour le contenu des onglets et du dialogue.

[webinfo]

Le $(this).dialog().remove() donné dans le code a été mis dans l'optique de voir si jQuery supprimer ses éléments qu'il rajoutait mais effectivement celà supprime la boite de dialogue.

Sinon pur répliquer le fonctionnement de base.

J'ai plusieurs onglets sur chaque onglets j'ai n liens (par exemple 4), chacun ouvre une boîte de dialogue spécifique avec un texte qui leurs est propres (contenu différent, bouton de la boîte de dialogue différents).

Le contenu de cet onglet avec les liens sont le résultat d'une requête ajax à chaque changement d'onglet car les liens peuvent différer selon les onglets (image, documents, ...).

J'ai donc pour cela n identifiant pour chacune des boite de dialogue, c'est à dire, si j'ai 4 liens sur l'onglet, j'ai 4 boites de dialogue (correspondant chacune à un objet javascript) avec chacune un identifiant.

Le problème viens que jQuery charge les boite de dialogue pour les stocker et lorsque je change d'onglet, si je retrouve un même lien (donc même identifiant) le texte affiché est celui de l'onglet précédent parce contre si je reclic une seconde fois cette fois si c'est le bon.

D'où ma question, qui est de comment éviter celà? Supprimer le code généré par jQuery? ...

En espérant avec était plus clair cette fois-ci.


Edit: J'ai résolu le problème, je fais jQuery(".ui-dialog").empty(); à chaque fois que l'utilisateur clic sur un autre onglet.