Partage

Variable dans une fonction d'une fonction

Sujet résolu
2 janvier 2018 à 23:36:50

Allo,

Petit problème (hihihi je m'entends mal avec les variables ^^).
J'aimerais que la variable enCoursEditions se retourne correctement, on dirait que quand on change la valeur dans les clicks ça fait que dalle.
Je ne sais pas comment faire, si qqun a une idée et bien merci d'avance à lui :D

EDIT : je viens d'alléger mon code par des .hide et des .show à la place des .css 

    function boutonEditerChamp(champ){
		
		var divBoutonEditer = $('#bouton_editer_' + champ),
			divBoutonAnnuler = $('#bouton_annuler_' + champ),
			divBoutonValider = $('#bouton_valider_' + champ),
			divChamp = $('#div_champ_' + champ),
			divChampEditable = $('#div_champ_editable_' + champ),
			champEditable = $('#champ_editable_' + champ);
		var enCoursEdition = false;

		champEditable.prop('disabled', true);

		divBoutonEditer.click(function(){

			champEditable.prop('disabled', false);
	
			divBoutonEditer.css({
				display : 'none'
			});
			divBoutonAnnuler.css({
				display : 'block'
			});
			divBoutonValider.css({
				display : 'block'
			});
			divChamp.css({
				display : 'none'
			});
			divChampEditable.css({
				display : 'block'
			});

			enCoursEdition = true;

		});

		divBoutonAnnuler.click(function(){

			divChamp.after('<div id="' + champ + '_dialogue" style="display:none;" title="Annulation">Voulez-vous annuler la modification en cours pour le champ : <strong><i>' + champ + '</strong></i> ?</div>');

			$( '#' + champ + '_dialogue' ).dialog({
				dialogClass: "no-close",
				closeOnEscape: false,
				draggable: false,
			    resizable: false,
			    height: "auto",
			    width: 600,
			    modal: true,
			    buttons: {
			    	"Annuler la modification": function() {

			    		champEditable.prop('disabled', true);

			       		divBoutonEditer.css({
							display : 'block'
						});
						divBoutonAnnuler.css({
							display : 'none'
						});
						divBoutonValider.css({
							display : 'none'
						});
						divChamp.css({
							display : 'block'
						});
						divChampEditable.css({
							display : 'none'
						});

						enCoursEdition = false;

						champEditable.val( divChamp.text() );

						$( this ).dialog( "close" );

			       	},
			       	"Continuer la modification": function() {
			       		$( this ).dialog( "close" );
			       	}
			    }
		    });
			

		});

		return enCoursEdition;
		
	}

-
Edité par LudoLudo15 2 janvier 2018 à 23:43:08

2 janvier 2018 à 23:44:33

Bonsoir,

Je n'ai pas tres bien compris ce que tu voulais faire...

Ici c'est normale que return enCoursEdition te retourne false;

En faite divBoutonEditer.click(function(){

est une fonction asynchrone, c'est une notion très importante

Comment ton code marche: 

function boutonEditerChamp(champ){
         
        var divBoutonEditer = $('#bouton_editer_' + champ),
            divBoutonAnnuler = $('#bouton_annuler_' + champ),
            divBoutonValider = $('#bouton_valider_' + champ),
            divChamp = $('#div_champ_' + champ),
            divChampEditable = $('#div_champ_editable_' + champ),
            champEditable = $('#champ_editable_' + champ);
        var enCoursEdition = false;
 
        champEditable.prop('disabled', true); // Jusqu'ici tout va bien
        /* A partir d'ici ca se complique la fonction en bas est une call asynchrone: 
        Ce qui se passe c'est que cette fonction n'est pas appelé tant que on ne clique pas sur le div */
        divBoutonEditer.click(function(){
 
            champEditable.prop('disabled', false);
     
            divBoutonEditer.css({
                display : 'none'
            });
            divBoutonAnnuler.css({
                display : 'block'
            });
            divBoutonValider.css({
                display : 'block'
            });
            divChamp.css({
                display : 'none'
            });
            divChampEditable.css({
                display : 'block'
            });
 
            enCoursEdition = true;
 
        });
        /* Du coup cette partie du code est executé avant que ton click ne soit detecté (meme chose en bas) */
 
        divBoutonAnnuler.click(function(){
 
            divChamp.after('<div id="' + champ + '_dialogue" style="display:none;" title="Annulation">Voulez-vous annuler la modification en cours pour le champ : <strong><i>' + champ + '</strong></i> ?</div>');
 
            $( '#' + champ + '_dialogue' ).dialog({
                dialogClass: "no-close",
                closeOnEscape: false,
                draggable: false,
                resizable: false,
                height: "auto",
                width: 600,
                modal: true,
                buttons: {
                    "Annuler la modification": function() {
 
                        champEditable.prop('disabled', true);
 
                        divBoutonEditer.css({
                            display : 'block'
                        });
                        divBoutonAnnuler.css({
                            display : 'none'
                        });
                        divBoutonValider.css({
                            display : 'none'
                        });
                        divChamp.css({
                            display : 'block'
                        });
                        divChampEditable.css({
                            display : 'none'
                        });
 
                        enCoursEdition = false;
 
                        champEditable.val( divChamp.text() );
 
                        $( this ).dialog( "close" );
 
                    },
                    "Continuer la modification": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
             
 
        });
 
        /* Du coup voila j'ai fini ! je retourne enCoursEdition alors que les cliques n'ont pas encore été détecté*/
        return enCoursEdition;
         
    }

Une fonction asynchrone fonctionne donc ainsi:

- Hey si tu recois ce genre d'action appelle moi, pendant ce temps t'occupe pas de moi et continue ta vie

- Une fois que tu cliques, ta fonction va etre appele et une fois appele, Javascript va faire comme si rien ne s'etait passer et va continuer sa vie 

-
Edité par Stelyus 2 janvier 2018 à 23:49:20

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
2 janvier 2018 à 23:53:27

Stelyus a écrit:

Bonsoir,

Je n'ai pas tres bien compris ce que tu voulais faire...

Ici c'est normale que return enCoursEdition te retourne false;

En faite divBoutonEditer.click(function(){

est une fonction asynchrone, c'est une notion très importante

Comment ton code marche: 

function boutonEditerChamp(champ){
         
        var divBoutonEditer = $('#bouton_editer_' + champ),
            divBoutonAnnuler = $('#bouton_annuler_' + champ),
            divBoutonValider = $('#bouton_valider_' + champ),
            divChamp = $('#div_champ_' + champ),
            divChampEditable = $('#div_champ_editable_' + champ),
            champEditable = $('#champ_editable_' + champ);
        var enCoursEdition = false;
 
        champEditable.prop('disabled', true); // Jusqu'ici tout va bien
        /* A partir d'ici ca se complique la fonction en bas est une call asynchrone: 
        Ce qui se passe c'est que cette fonction n'est pas appelé tant que on ne clique pas sur le div */
        divBoutonEditer.click(function(){
 
            champEditable.prop('disabled', false);
     
            divBoutonEditer.css({
                display : 'none'
            });
            divBoutonAnnuler.css({
                display : 'block'
            });
            divBoutonValider.css({
                display : 'block'
            });
            divChamp.css({
                display : 'none'
            });
            divChampEditable.css({
                display : 'block'
            });
 
            enCoursEdition = true;
 
        });
        /* Du coup cette partie du code est executé avant que ton click ne soit detecté (meme chose en bas) */
 
        divBoutonAnnuler.click(function(){
 
            divChamp.after('<div id="' + champ + '_dialogue" style="display:none;" title="Annulation">Voulez-vous annuler la modification en cours pour le champ : <strong><i>' + champ + '</strong></i> ?</div>');
 
            $( '#' + champ + '_dialogue' ).dialog({
                dialogClass: "no-close",
                closeOnEscape: false,
                draggable: false,
                resizable: false,
                height: "auto",
                width: 600,
                modal: true,
                buttons: {
                    "Annuler la modification": function() {
 
                        champEditable.prop('disabled', true);
 
                        divBoutonEditer.css({
                            display : 'block'
                        });
                        divBoutonAnnuler.css({
                            display : 'none'
                        });
                        divBoutonValider.css({
                            display : 'none'
                        });
                        divChamp.css({
                            display : 'block'
                        });
                        divChampEditable.css({
                            display : 'none'
                        });
 
                        enCoursEdition = false;
 
                        champEditable.val( divChamp.text() );
 
                        $( this ).dialog( "close" );
 
                    },
                    "Continuer la modification": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
             
 
        });
 
        /* Du coup voila j'ai fini ! je retourne enCoursEdition alors que les cliques n'ont pas encore été détecté*/
        return enCoursEdition;
         
    }



-
Edité par Stelyus il y a moins de 5s


Bien sûr merci !! Effectivement, je m'étais déjà rendu compte de ça pour des vérifications de champs, j'avais remarqué que le retour était fait en tout premier lieu, car les clicks pas déclenchés, ce qui est tout à fait logique, merci beaucoup pour ce rappel qui m'a échappé.

Comment pourrais-je régler le problème ? pour mes vérifications de forms, j'avais créés des input hidden, je pourrais créer des div hide, mais c'est lourd comme technique je trouve.

Est-ce que je pourrais pas en cliquant faire ré-éxécuter la fonction ? que la valeur se mette à jour ?

En fait quand on clique sur un bouton ça show un champ de form pour l'éditer, j'aimerais récupérer une variable qui me dit que c'est bien en cours, et j'aimerais que ça soit cette fonction qui me retourne cette variable.


EDIT :
Ou alors, j'établie une variable hors de toute cette fonction, et quand on clique, on modifie cette variable ?
ça se peut ça ?
Le truc c'est que j'ai full de cette fonction avec des paramètres différents, ça va vite devenir de la gymnastique
Avec un tableau alors ? qui serait en-dehors de cette fonction et qui prendrait une valeur de true ou false par rapport au paramètre passé. Qu'en penses-tu ? 

Genre quand je clique, hop je vais dans l'array, je mets à jour le nom du paramètre et un true / false. 

-
Edité par LudoLudo15 3 janvier 2018 à 0:01:50

3 janvier 2018 à 0:03:28

Okay,

J'ai pas tout compris mais tu pourrais faire quelque chose du genre 

var encours = false;

button.onClick(function () {

   buttonAEteCliquer(true)

})



buttonAnnuler.onClick(function() {

  buttonAEteCliquer(false)

})



function buttonAEteCliquer (etat) {

    encours = etat

    return etat

   // Cette fonction est appele que si on a clique sur un boutton !

}


Je sais pas si le encours est tres utile, ca depend de ce que tu veux faire, car si tu peux eviter les variables globaux ca serait bien 

-
Edité par Stelyus 3 janvier 2018 à 0:05:48

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
3 janvier 2018 à 0:14:33


Stelyus a écrit:

Okay,

J'ai pas tout compris mais tu pourrais faire quelque chose du genre 

var encours = false;

button.onClick(function () {

   buttonAEteCliquer(true)

})



buttonAnnuler.onClick(function() {

  buttonAEteCliquer(false)

})



function buttonAEteCliquer (etat) {

    encours = etat

    return etat

   // Cette fonction est appele que si on a clique sur un boutton !

}


Je sais pas si le encours est tres utile, ca depend de ce que tu veux faire, car si tu peux eviter les variables globaux ca serait bien 

-
Edité par Stelyus il y a 5 minutes


parfait merci beaucoup

Je vais récupérer la variable pour éviter le changement inopiné de page ou le rafraichissement :)

je vais regarder comment je l'adapte, car je vais avoir une dizaine de groupe de bouton par page :)

Variable dans une fonction d'une fonction

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown