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.