Remplacer un élément de formulaire et l'utiliser

Version imprimable

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:

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:

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

26/02/2019, 20h22
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.
26/02/2019, 20h59
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

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

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

Code:

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:

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);
});

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

Code:

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:

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

pour utiliser quelque chose du style

Code:

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

Merci beaucoup pour ton aide,
Bonne soirée

27/02/2019, 05h16
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.

FormDatas correspond au formulaire de recherche
ArrayFilter est le tableau des filtres de recherches dans la version sauvegardée
filtersCount est le total des cases cochées dans la version sauvegardée
checkBoxSelected est le tableau des cases cochées dans la version sauvegardée

La fonction ci-dessous fonctionne à l’exception du checkBox

Code:

1
2
3
4
5
6
7
8
9
10
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);
				}
			});
		});

l donne la liste des checkBoxes dans le formulaire de recherche et x donne la liste des case qui doivent être cochées.
lorsque les deux sont similaires il faut que la case soit cochée.
le log de l et de x me donne les bonnes valeurs, c'est uniquement la ligne qui doit cocher les cases qui ne fonctionne pas, enfin je crois.

ci-dessous le formulaire complet dans sa version par défaut

Code:

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
<div class="uk-margin-top">
							<form id="Option" name="Option" class="uk-form uk-text-left uk-form-horizontal uk-margin">
								<div class="uk-grid uk-width-1-1 uk-align-center">
									<div class="uk grid uk-width-large-1-4 uk-width-medium-1-2 uk-width-small-1-1">
												<label class="uk-form-small uk-form-width-medium" style=" display:inline-block">Rechercher :</label>
												<input class="uk-form-small uk-form-width-medium" style=" display:inline-block" type="text" id="searchString" name="searchString" value="">
									</div>
									<div class="uk grid uk-width-large-1-4 uk-width-medium-1-2 uk-width-small-1-1">
											<label class="uk-form-small uk-form-width-medium" style=" display:inline-block">Rechercher par :</label>
											<select class="uk-form-small uk-form-width-medium" style=" display:inline-block" name="search" id="search_by">
												<option value="type_membre">Type de membre</option>
												<option value="groupe">Groupes</option>
																									<option value="tests">Tests</option>
																																																	<option value="fac_cotisations">Cotisations</option>
																																					<option value="fac_prestations">Prestations</option>
																							</select>
									</div>
									<div class="uk-width-large-1-4 uk-width-medium-1-2 uk-width-small-1-1">
										<label class="uk-form-small uk-form-width-medium" style=" display:inline-block">lignes par page :</label>
										<select class="uk-form-small uk-form-width-medium uk-text-left" name="afficheLimit" id="afficheLimit">
											<option selected value="10">10</option>
											<option value="15">15</option>
											<option value="25">25</option>
											<option value="50">50</option>
											<option value="100">100</option>
										</select>
									</div>
									<div class="uk-width-large-1-4 uk-width-medium-1-2 uk-width-small-1-1">
										<label class="uk-form-small uk-form-width-medium" style=" display:inline-block">lignes par page :</label>
										<select class="uk-form-small uk-form-width-medium uk-text-left" name="afficheLimitPages" id="afficheLimitPages">
											<option value="2">2</option>
											<option selected value="4">4</option>
											<option value="6">6</option>
											<option value="8">8</option>
										</select>
									</div>
								</div>
								<hr class="uk-article-divider">
								<div id="caseContent" class="uk-container-center">
									<div id="boxes" class="uk-container-center uk-grid uk-grid-width-large-1-5 uk-grid-width-medium-1-3 uk-grid-width-small-1-2"><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Actifs"> Actifs</label><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Comité"> Comité</label><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Ancien"> Ancien</label><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Non membres"> Non membres</label><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Passifs"> Passifs</label><label><input type="checkbox" name="searchCase[]" class="checkBoxChange" value = "Entraîneurs"> Entraîneurs</label></div>								</div>
								<hr class="uk-article-divider">
								<div class=" uk-width-1-1">
									<div class="uk-grid uk-container-center" >
										<div class="uk-width-large-1-1 uk-width-medium-1-1 uk-width-small-1-1 uk-text-center">
											<input type="button" id="reset" class="gc-button">
										</div>
									</div>
								</div>
							</form>
						</div>

27/02/2019, 06h44
Toufik83
Quand j'ai dis "voir le contenu" des variables, je voulais dire "c'est quoi leur valeurs".

Si tu dis que les log t'affichent bien les bonnes valeurs,

Code:

console.log( $(x).val() );

donne quoi comme résultat ?

Si cette ligne te renvois bien les value de tes inputs, alors tu n'as qu'à remplacer
Code:

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

1 2 3 4 5 $('.checkBoxChange[value = "'+$(x).val()+'"]').attr('checked', 'checked'); /*ou encore $('.checkBoxChange[value = "'+$(x).val()+'"]').prop('checked', true); */

Génial, ça fonctionne....
Comme le x est déjà la valeur je l'ai utilisé seul et pas avec $(x).val().
Je met le code si ça peut aider d'autres personnes
Code:

1 2 3 4 5 6 7 8 9 10 11 var checkBoxSelected = formDatas['searchCase[]']; $.each( checkBoxSelected, function( i, l ){ console.log( l ); $.each( dataBoxes, function( i, x ){ if(x === l){ console.log(x); $('.checkBoxChange[value = "'+x+'"]').attr('checked', 'checked'); } }); });
Merci beaucoup pour ton aide ce poste est maintenant résolu :)

27/02/2019, 08h07
Toufik83

Cool :ccool:, donc c'était juste un problème de classe, vu que tes inputs ont la classe "checkBoxChange" et pas "type_checkbox".
27/02/2019, 13h22
safraga

Oui je pense aussi qu'il s'agit d'un problème de classe pour les checkboxes.
Merci encore