Discussion :

[xtremdisc]

Bonjour � tous,

Pour vous expliquer le contexte, voici une capture d'�cran du rendu.
On a donc la liste des groupes d�j� cr�� charg� en AJAX avec la liste des utilisateurs vide dans un premier temps.
Lorsque l'administrateur ouvre un groupe, �a charge la liste des utilisateurs avec leur checkbox coch�s si ils font partie du groupe.



Je me retrouve devant un cas d'optimisation de temps de chargement au vue du nombre d'utilisateurs possible dans chaque groupe.
Jusqu'� pr�sent pour ce genre d'utilisation j'utilisais de l'AJAX basique, j'appelle une fonction PHP avec l'id du groupe qui g�n�re le tableau HTML des utilisateurs, qui est r�cup�r� en JS et mis dans le conteneur du groupe correspondant par un simple innerHTML.

Mais voil�, lorsque le retour contient beaucoup d'utilisateurs, �a devient long, environ 6 � 7 secondes pour charger les utilisateurs d'un groupe (dans cet exemple 3379).

J'ai essay� de charger qu'une seule fois le tableau HTML des utilisateurs dans une DIV masqu�e, puis de cloner ce tableau dans le conteneur du groupe lors de son ouverture.
Ensuite je fais un petit appel AJAX qui r�cup�re les id des utilisateurs appartenant au groupe et �a s�lectionne les checkbox correspondantes � l'aide de leur valeur (correspondant � l'id).
Le clonage du tableau et l'appel AJAX se fait rapidement (environ 2s), pas de soucis si il y a peu de case coch�s mais si tout est coch� par exemple l� �a remet environ 6-7s donc retour � la case d�part !

Voici la fonction qui clone le tableau et s�lectionne les checkbox :

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
 
function cloneUtilisateurs(id) { // id du groupe
	var newslettersUsersListing = document.getElementById('newslettersUsersListing'); // la div masquée contenant la liste des utilisateurs
	var cible = document.getElementById('newslettersgroups_dest'+id); // le conteneur du groupe
	InnerCMSLoading("newslettersgroupsDestList"+id, 'visible', 'fff');
	removeAllChild(cible);
 
	var table = firstChildDiv(newslettersUsersListing); // récup du tableau HTML
 
	var new_table = table.cloneNode(true); // clonage
 
	cible.appendChild(new_table); // placement
 
 
 
	action = "get_users";
	get_Xhr();
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			retour = xhr.responseText;
 
			var tab_id = new Array();
			if(retour != '0') tab_id = retour.split('-+-'); // récup des id des utilisateurs
 
			var all_checkbox = cible.getElementsByTagName('input'); // récup des input checkbox
 
			for(var i = 0; i < all_checkbox.length; i++) { // parcours les input
				var checkbox = all_checkbox[i];
				if(checkbox.name = "newslettersgroups_inscrits[]") { // si c'est le bon nom
					if(in_array(checkbox.value, tab_id)) { // si la valeur de l'input est dans le tableau des id d'utilisateur
						checkbox.checked = true;
					} else checkbox.checked = false;
 
					checkbox.id = "newslettersgroups_inscrits"+id+"_"+i;
 
					var tr = checkbox.parentNode.parentNode; // la ligne TR
					var all_label = tr.getElementsByTagName('label'); // récup tous les label de la ligne
					for(var j = 0; j < all_label.length; j++) {
						all_label[j].htmlFor = "newslettersgroups_inscrits"+id+"_"+i; // changement du for pour qu'ils soient cliquable
					}
				}
			}
 
		}
	}
	xhr.open("POST","ajax_groups.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded Charset=iso-8859-1');	
 
	xhr.send("action="+action+"&idgroup="+id);
 
}

Voila, je ne vois pas comment gagner du temps sur cette proc�dure.
Je suis ouvert � toute autre m�thode ou critique des miennes, et n'h�sitez pas � me dire si il n'y pas de solution miracle

Merci d'avance.