Discussion :

[chwal]

Bonjour à tous,

Pour situer le contexte de mon problème je créer un tableau d'utilisateur via une requête Ajax. Une fois que cette événement est terminer j'applique aux éléments de mon tableau des actions JS. Mon problème est que ces événements s'applique bien au 90 premiers éléments de mon tableau mais passé celui-ci le JS n'est plus appliqué. J'ai fais des tests dans tout les sens le problème survient toujours au même endroit, sans distinction d'utilisateur.

Pour générer ce tableau j'utilise jquery, bootstrap et ce théme: http://theme.eakroko.de/flat. Pour info le thème tableau que j'utilise est dans table > large table et c'est le tableau Dynamique Ajax Loading en bas de page.
J'ai pour ma part enrichi ce tableau de contenu html.

Donc une fois mon tableau généré par ma requête Ajax j'applique ces événement:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ajaxComplete(function() {
	$('#error_expand').parent().css('line-height', '150px'); 
	$(".dataTables_scrollBody").each(function() {
		$(this).css('height', '550px');
	});				
	$('#DataTables_Table_0_filter').before('<div class="button-add pull-left"><a href="solution.php?action=sol_usr_add_form"><button  title="" type="button"  class="glyphicon-user_add btn-primary btn-large"></button></a></div>');		
	saveAvailableStorage(domain_id);
	displayModal(action, domain_id);
	colorCells();
	//pour que la methode ajaxComplete ne soit appelé qu'une fois au chargement du tableau d'utilisateur et non à chaque appel Ajax
	$(document).unbind("ajaxComplete");
 });

je vous met aussi le code HTML de 2 lignes du tableau une ou le JS s'applique bien et une ou ça ne fonctionne pas

Code html :

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
//avec le JS appliqué
<tr class="even">
<td class=" sorting_1">slash</td><td class="">7limpidd</td>
<td class=""><span class="pull-left">Basic</span><button name="solution_4" type="button" class="openmodal btn-lg glyphicon-edit btneditsol pull-right" rel="tooltip" title="Modifier la solution"></button></td>
<td class=""><button type="button" class="btnmodal btn-info openmodal" name="option_4">Aucune option</button></td>
<td style="background-color: rgb(223, 240, 216);" class=""><span class="colored">0,00%</span></td>
<td class=""><select class="maxstorage" name="MaxAccountSize" id="4" style="width :75px"></select><input id="storageSize_4" value="30G" type="hidden"></td>
<td class=""><a href="solution.php?action=sol_set&amp;Name=slash"><button rel="tooltip" title=" Editer" type="button" class="btn-primary icon-edit hover-blue update"></button></a>
		<button type="button" rel="tooltip" title="Effacer" name="delete_4" class="btndelete btn-danger hover-red update_delete icon-remove-sign openmodal"></button></td>
</tr>
//sans le JS appliqué
<td class=" sorting_1">spinoza</td>
<td class="">toto</td>
<td class=""><span class="pull-left">Basic</span><button name="solution_317" type="button" class="openmodal btn-lg glyphicon-edit btneditsol pull-right" rel="tooltip" title="Modifier la solution"></button></td>
<td class=""><button type="button" class="btnmodal btn-info openmodal" name="option_317">Aucune option</button></td>
<td class=""><span class="colored">0,00%</span></td>
<td class=""><select class="maxstorage" name="MaxAccountSize" id="317" style="width :75px">...</select><input id="storageSize_317" value="1G" type="hidden"></td>
<td class=""><a href="solution.php?action=sol_set&amp;Name=spinoza"><button rel="tooltip" title=" Editer" type="button" class="btn-primary icon-edit hover-blue update"></button></a>
		<button type="button" rel="tooltip" title="Effacer" name="delete_317" class="btndelete btn-danger hover-red update_delete icon-remove-sign openmodal"></button></td>

La seul différence visible ici est au niveau du background-color de la 5eme cellule. Mais cela impact aussi tout mes boutons d'actions.

Je précise enfin que je n'ai aucune erreur de la console.

Si vous avez ne serait-ce qu'un embryon de piste je suis preneur car je sèche totalement là!

Merci

[Watilin]

Je suppose que ton HTML est bien formé (il n'y a pas de <tr> dans le second exemple mais c'est peut-être juste un oubli à la recopie). Utilise le validateur pour vérifier.

Je vois un problème mais je ne sais pas s'il y a un rapport : $(document).unbind("ajaxComplete");. En faisant ça tu désactives tous les évènements ajaxComplete ultérieurs, donc tu rends ton script incapable de réagir à d'autres requêtes Ajax.

Tu as dû oublier le second paramètre (voir : http://api.jquery.com/unbind/). Mais pour ça, tu dois nommer ta fonction.

Code :

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

1
2
3
4
$(document).ajaxComplete(function machin() {
   ...
   $(document).unbind("ajaxComplete", machin);
});

Le mieux serait encore d'attacher ta fonction seulement à la bonne requête Ajax (par exemple avec $.get) pour éviter les mélanges.

[chwal]

Hello,

Merci pour ton retour. Je te confirme que le <tr> est bien un oublie.

En ce qui concerne l'AjaxComplete je l'utilise car j'ai besoin que les actions à l’intérieur ne s'effectue qu'une fois le contenu de la page charger , mais comme la majorité du contenu de cette page est généré par Ajax un simple documentReady ne suffit pas.
Comme je ne veux pas que ces actions se répètent à chaque requête Ajax que je suis réalise, j'utilise le unbind.
Ce dernier d’ailleurs semble bien fonctionner.
Le handler de la fonction bind est optionnel puisque c'est bien le ajaxComplete dans sont intégralité que je vise.

En ce qui concerne le get cela aurait en effet était judicieux de l'utiliser mais le déclenchement de mon événement Ajax est réaliser par un plugin jquery (dateTables.scroller.js il me semble). Je ne peut donc pas l'utiliser.

Bref pour le moment je patauge toujours.
Merci encore pour ton retour

[chwal]

ça me fait d'ailleur penser qu j'aurai pu également mettre le code qui déclenche l'appel Ajax, le voici:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
if($(this).hasClass("dataTable-scroller")){
opt.sScrollY = "300px";
opt.bDeferRender = true;
if($(this).hasClass("dataTable-tools")){
	opt.sDom = 'T<"clear">frtiS';
} else {
	opt.sDom = 'frtiS';
}
var dom_id = $("#current_dom_id").attr('value'); 
opt.sAjaxSource = "./ajax_solutions.php?action=display_users&domain_id="+dom_id;
}
var oTable = $(this).dataTable(opt);

[Watilin]

Si ton plugin ne te permet pas de faire des requêtes Ajax spécifiques, abandonne-le car c'est un mauvais plugin.

Et sinon, je ne vois pas d'appel Ajax dans ton code.

[SpaceFrog]

http://www.developpez.net/forums/d14...dynamiquement/

[chwal]

@watin en fait l'appel Ajax est géré par mon plug in mais j'ai eu beau creuser je n'ai pas vu ou il est effectué. Je sais juste que pour que cela fonctionne il faut que je donne une certaine class à ma table et que je donne la valeur de l'url ou je peux récupérer mes données php. (opt.sAjaxSource).
J'ai essayé de mettre en place le get met cela semble me déclencher une deuxième appel Ajax. (je vois deux fois la même XML HTTPrequest dans ma console).
Quoi qu'il en soit je doute que le problème viennent du plugin en lui même...

@SpaceFrog
J'ai regardé avec attention le lien que tu m'as fourni. Ce qui est surprenant dans mon cas c'est que les actions que j'ai défini s'applique bien à 90 lignes de mon tableau mais pas aux autres or toutes les données de ce tableau sont générer lors du même appel Ajax.
J'ai cependant essayer d’implémenter un deuxième sélecteur sur le on, mais sans succès. Il y a des nuances qui m'échappe.

Avant j'avais :

Code :

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

1
2
3
4
5
 
$(document).ajaxComplete(function() {
colorCells();
$(document).unbind("ajaxComplete");
}

donc de ce que je comprend du "on" à deux sélecteurs, plus besoin de l' ajaxComplete puisque c'est un autre élément du DOM qui va intercepter l’événement. du coup il faut que j'applique ce mécanisme à ma fonction coloCells(); qui ressemble actuellement à ça:

Code :

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

1
2
3
4
 
 $(".colored").each(function() {
	$(this).parent().css("background-color", "#dff0d8");			
});

J'ai donc modifié ce code en quelque chose comme ça

Code :

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

1
2
3
4
 
		$("body").on('each', $(".colored") ,  (function() {
			$(this).parent().css("background-color", "#dff0d8");
		}));

mon body devrait donc "intercepter l événement" puis l’exécuter.
Mais rien ne se passe, je suppose qu'il y a un truc qui m'échappe?

Merci