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

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    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
    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    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
    Membre confirmé
    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
    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    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
    Membre confirmé
    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
    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 518
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

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

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 518
    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.

+ 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, 17h40
  2. Réponses: 15
    Dernier message: 22/11/2011, 09h47
  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, 16h13
  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, 10h33
  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, 15h29

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