Discussion :

[safraga]

Bonjour,

Cela fait plusieurs jours que je butte sur un problème que je n'arrive pas à comprendre.

J'ai une application dans laquelle lorsque l'on choisi une option on remplace les cases à cocher liée à l'option choisie.

J'utilise la fonction suivante pour aller chercher et remplacer le bloc complet des cases à cocher div inclut.
Visuellement pas de soucis, les cases apparaissent bien sur la page...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function getCases(OptionChoisie){
	$.ajax({
		url: 'api/case.php',
		type: 'POST',
		data: {'search_by': OptionChoisie},
		cache: false,
		success: function(dataTest){
			$("#caseContent").html(dataTest);
		}
	});
}

Ensuite lorsque j'ai besoin de recharger l'état antérieur de ma recherche j'exécute (en test actuellement) le code suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$("#loadState").click(function () {
	var OptionChoisie = 'groupe';
	console.log(OptionChoisie);
	console.log($("#caseContent input")); //Donne les case précédentes
	$("#boxes").remove();
	getCases(OptionChoisie);
	console.log($("#caseContent input")); // Reste vide ???
	var matches = $(":checkbox:not(:checked)");
	console.log(matches); // Reste vide ???
	var formDatas = dataForm(form);
	console.log(formDatas); // Les cases à cocher ne sont pas dans le form une fois le serialize effectué.
 
});

si j'enlève la ligne $("#boxes").remove(); j'obtient le résultat voulu si je clique deux fois sur loadstate. la première fois il me remet les cases à cocher par défaut...

Ce dont j'ai besoin c'est de pouvoir changer le bloc de cases à cocher et les réutiliser lorsque je click 1 fois sur loadstate button.

D'avance je vous remercie pour aide.
Salutations

[Toufik83]

Salut,

Pour déclencher le clic 1 seule fois sur un élément html, on utilise $.one.

La ligne $("#boxes").remove() supprime l'élément #boxes du DOM (y compris son contenu html), c'est peut être pour ça que la ligne console.log($("#caseContent input")); ne renvoie rien.

Si #caseContent est un élément enfant de #boxes, c'est normal que console.log($("#caseContent input")); ne renvoie rien.

[safraga]

Salut,
Merci pour la réponse, mais je pense que je me suis mal exprimé.

Par défaut j'ai une configuration de base avec des case à cocher pour l'option type de membres. puis exemple:

Je fait une recherche dans groupe et l'app m'affiche les cases correspondantes, je sauve la statut actuel de ma recherche et quitte

Lorsque je reprends, je recharge le statut précédemment enregistré et là le premier click me donne la configuration des cases à cocher par défaut et si je click une deuxième fois là, il me donne la bonne configuration.

En gros il ne tient pas compte du filtre la première fois que je click.

La structure des div est #caseContent parent de #boxes.

J'ai ajouter le remove pour tester, mais avec ou sans le résultat est le même.

Merci encore et bonne soirée

[Toufik83]

Peut être un problème de synchronisation d'ajax ?

Si tu essaies ça, tu as toujours le même problème ?

Code js :

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
 
function getCases(OptionChoisie){
	$.ajax({
		url: 'api/case.php',
		type: 'POST',
		data: {'search_by': OptionChoisie},
		cache: false
	})
        .done(function(dataTest){
               $("#caseContent").html(dataTest);
               console.log($("#caseContent input"));
	      var matches = $(":checkbox:not(:checked)");
	      console.log(matches); 
	      var formDatas = dataForm(form);
	      console.log(formDatas);
        });
}

Et la fonction clic :

Code js :

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

1
2
3
4
5
6
7
8
 
$("#loadState").click(function () {
	var OptionChoisie = 'groupe';
	console.log(OptionChoisie);
	console.log($("#caseContent input")); //Donne les case précédentes
	$("#boxes").remove();
        getCases(OptionChoisie);
});

[safraga]

Salut,
Merci beaucoup, cette fois ça fonctionne à 95%...
J'ai modifié la fonction getCase pour obtenir ceci:

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
 
function NewGetCases(OptionChoisie){
	$.ajax({
		url: 'api/case.php',
		type: 'POST',
		data: {'search_by': OptionChoisie},
		cache: false
	}).done(function(dataTest){
		$("#caseContent").html(dataTest);
		var formDatas = dataForm($("#Option"));
		//console.log(formDatas);
                //=====================================================
		var arrayFilter = $("#mbrListe").jqxGrid('getstate').filters;
		var filtersCount = arrayFilter['filterscount'];
		var dataBoxes = new Array();
		for(var i = 0; i <= filtersCount -1; i++){
			var searchBy = arrayFilter['filterdatafield'+[i]];
			var CheckBoxValue = arrayFilter["filtervalue"+[i]];
			dataBoxes.push(CheckBoxValue);
		}
		var checkBoxSelected = formDatas['searchCase[]'];
		$.each( checkBoxSelected, function( i, l ){
			//console.log( l );
			$.each( dataBoxes, function( i, x ){
				if(x === l){
					console.log( x );
					$('input.type_checkbox[value = "'+x+'"]').attr('checked', true);
				}
			});
		});
                //=====================================================
	});
}

il ne manque plus qu'à sélectionner les cases à cocher selon le filtre.
La partie de la fonction entre les ==== devrait le faire, mais cela ne fonctionne pas.
J'ai essayé plusieurs solutions mais aucune ne fonctionne.

Est-ce qu'il y a un moyen de modifier cette ligne

Code :

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

1
2
 
$('input.type_checkbox[value = "'+x+'"]').attr('checked', true);

pour utiliser quelque chose du style

Code :

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

1
2
 
formDatas['searchCase[]'][value = "'+x+'"]').attr('checked', true);

Merci beaucoup pour ton aide,
Bonne soirée

[Toufik83]

Pour te répondre corréctement et sans dire de bêtise, il faut voir le contenu des variables suivants :
1. formDatas.
2. arrayFilter.
3. filtersCount.
4. checkBoxSelected.

Et le code html des input aussi.