Discussion :

[merou19]

Bonjour à tous.

J'ai un problème sur mon projet Symfony 4, qui utilise Jquery, pour ici afficher et masquer un champ.

J'ai une entité 'avis' qui contient entre autres les champs 'langue' et 'texte'.
Ils sont alimentés à partir d'un formulaire, le champ 'langue' est une liste de choix à partir d'un select distinct des langues déjà en base dans mon entité.
Ce champ 'langue' contient une valeur en plus : 'autre'. Quand cette valeur est sélectionnée dans le liste de choix, ça affiche un champ caché par Jquery, champ 'autrelangue', où on peut saisir une nouvelle langue.
Si ce champ est renseigné, je prends celui ci pour alimenter la langue de mon avis que j'écris en base.
Tout ça, ça marche bien !

Maintenant, j'ajoute des asserts dans mes champs, au niveau de mon entité 'avis'.
Pour 'texte', j'ai mis une longueur max de 10 caractères.

Dans mon formulaire, je sélectionne 'autre' pour langue. Dans le champ 'autrelangue' qui apparaît, je saisis une valeur, et dans le champ 'texte', je saisis plus de 10 caractères.
Je bloque bien sur l'assert du champ 'texte', le champ 'langue' affiche bien 'autre', mais le champ 'autrelangue' est caché.
Impossible de l'afficher quand je bloque sur un assert !!!

Mon entité 'avis' :

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
/**
     * @var string
     *
     * @ORM\Column(name="langue", type="string", length=200, nullable=false)
     * @Assert\NotBlank
     */
    private $langue;
 
    /**
     * @var string
     *
     * @ORM\Column(name="texte", type="text", length=0, nullable=false)
     * @Assert\NotBlank
     * @Assert\Length(max = 10, maxMessage = "Ce champ ne peut pas dépasser {{ limit }} caractères.")
     */
    private $texte;

Mon contrôleur pour générer mon formulaire :

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
->add('langue', ChoiceType::class, array(
	'label' => 'Langue de votre avis', 
	'choices'      => $choicelangue,
	'placeholder'  => 'Choisissez une langue',
	'expanded'     => false,
	'multiple'     => false,
	'attr' => array('style' => 'width: 500px')
	))
->add('autrelangue', TextType::class, array(
	'mapped' => false,
	'required' => false,
	'label' => 'Saisissez la langue de votre avis',
	'label_attr' => array('id' => 'autrelanguelabel'),
	'attr' => array('style' => 'width: 500px')
	))
->add('texte', TextareaType::class, array(
	'label' => 'Texte',
	'attr' => array('style' => 'width: 500px')
	))

Mon Jquery pour afficher et cacher mon champ 'autrelangue' :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    alert("titi");
    $("#form_langue").change(function() {
        if ($("#form_langue").val() == "autre"){
            $("#form_autrelangue").show();
            $("#autrelanguelabel").show();
        }else{
            $("#form_autrelangue").hide();
            $("#autrelanguelabel").hide();
        }
    });
});

Le code ci dessus fonctionne toujours !
Sauf le alert("titi") qui ne s'affiche jamais.

Après de multiples essais, voilà ce que j'ai trouvé de mieux pour essayer d'afficher mon champ 'autrelangue' :

Code js :

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

1
2
3
4
5
6
7
8
9
10
$(window).load(function() {
    alert("toto");
    if ($("#form_langue").val() == "autre"){
        $("#form_autrelangue").show();
        $("#autrelanguelabel").show();
    }else{
        $("#form_autrelangue").hide();
        $("#autrelanguelabel").hide();
    };
});

Et ça ne marche pas.
De plus, le alert("toto") ne s'affiche jamais non plus.
Pourtant ma fonction 'change' en Jquery fonctionne toujours.

Vous avez des idées ?

Et pourquoi je ne vois jamais mes alert (je suis sous Chromium sous Ubuntu) ?

Merci d'avance pour votre aide !

[merou19]

Bon, je suis encore sur mon problème, il me semble avoir trouvé un point !

Je teste la valeur de :

Code :

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

$("#form_langue").val()

Mais mon élément ayant cet id n'est pas un champ input, mais un champ select avec plein de option value=...J'ai donc modifié mon code Jquery, selon les exemples que j'ai trouvé sur le web :

Code :

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

1
2
3
4
5
6
7
8
9
$(window).load(function() {
    if ($("#form_langue option:selected").text() == "autre"){
        $("#form_autrelangue").show();
        $("#autrelanguelabel").show();
    }else{
        $("#form_autrelangue").hide();
        $("#autrelanguelabel").hide();
    }
});

Mais ça ne marche toujours pas.

Help svp !!!!!!!

[merou19]

C'est encore moi !!!

A force de tester tout et n'importe quoi, j'ai changé dans mon if la valeur 'autre' par 'français', que j'ai aussi dans mon jeu de données.
Et bien, c'est toujours avec la valeur 'autre' que ça m'affiche mon champ 'autrelangue'.
J'ai vidé le cache de mon projet Symfony, ça ne change rien.

Depuis le début, mes modifs Jquery ne sont pas prises en compte !!!
Dans ce projet sous SF4, je n'ai pas encore mis en place Webpack Encore.
Dans mon fichier base.html.twig, j'ai bien inclu toutes les bibliothèques dont j'ai besoin :

Code html :

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

1
2
3
4
5
6
<script src="/monprojet_v4/public/js/jquery.min.js" type="text/javascript"></script>
<script src="/monprojet_v4/public/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="/monprojet_v4/public/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="/monprojet_v4/public/js/datepicker-fr.js" type="text/javascript"></script>
<script src="/monprojet_v4/public/Resources/fontawesome-free-5.1.0-web/js/all.js" type="text/javascript"></script>
<script src="/monprojet_v4/public/Resources/js/monprojet.js" type="text/javascript"></script>

De mémoire sous SF3, mes modifs étaient directement prises en compte.
Ce n'est pas pareil sous SF4 ?

[merou19]

Bon, suite de mes palpitantes aventures !!!

En vidant le cache de Chromium à chaque modif de code Jquery, c'est beaucoup mieux, j'ai même les alert qui s'affichent !!!

Et mon code marche enfin, en mettant tout mon code dans document ready :

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
$(document).ready(function() {
    if ($("#form_langue option:selected").text() == "autre"){
        $("#form_autrelangue").show();
        $("#autrelanguelabel").show();
    }else{
        $("#form_autrelangue").hide();
        $("#autrelanguelabel").hide();
    };
    $("#form_langue").change(function() {
        if ($("#form_langue option:selected").text() == "autre"){
            $("#form_autrelangue").show();
            $("#autrelanguelabel").show();
        }else{
            $("#form_autrelangue").hide();
            $("#autrelanguelabel").hide();
        }
    });
});