IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Remplacer un élément de formulaire et l'utiliser [AJAX]


Sujet :

jQuery

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut Remplacer un élément de formulaire et l'utiliser
    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

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut
    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

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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);
    });

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut
    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

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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.

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    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>

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    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 js : Sélectionner tout - Visualiser dans une fenêtre à part
    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 js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('input.type_checkbox[value = "'+x+'"]').attr('checked', true);

    par :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $('.checkBoxChange[value = "'+$(x).val()+'"]').attr('checked', 'checked');
    /*ou encore
    $('.checkBoxChange[value = "'+$(x).val()+'"]').prop('checked', true);
    */

  9. #9
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  10. #10
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    Cool , donc c'était juste un problème de classe, vu que tes inputs ont la classe "checkBoxChange" et pas "type_checkbox".

  11. #11
    Nouveau membre du Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Septembre 2014
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2014
    Messages : 58
    Points : 33
    Points
    33
    Par défaut
    Oui je pense aussi qu'il s'agit d'un problème de classe pour les checkboxes.
    Merci encore

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utiliser des éléments de formulaires sans formulaire ?
    Par dev14 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 31/01/2015, 18h40
  2. Réponses: 15
    Dernier message: 22/11/2011, 10h47
  3. enlever des éléments de formulaire dynamiquement
    Par jeanvincent dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 16/02/2006, 17h13
  4. Comment donner le focus à un élément de formulaire
    Par digital prophecy dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 13/09/2005, 11h33
  5. variables d'un formulaire et les utiliser ....dans un autre
    Par soltani.slim dans le forum Access
    Réponses: 4
    Dernier message: 22/06/2005, 16h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo