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

Symfony PHP Discussion :

[SF 5]Mon champ ne s'affiche que sur Firefox


Sujet :

Symfony PHP

  1. #1
    Nouveau membre du Club
    [SF 5]Mon champ ne s'affiche que sur Firefox
    Salut à tous,

    J'ai créé un formulaire très basique que j'ai envoyé à twig. Sur Firefox tout mes champs sont visibles et lorsque je remplis le formulaire et le valide, j'ai bien mon annonce qui s'ajoute dans ma BDD, mais avec Chrome je rencontre un problème.

    Tout d'abord, seul mon champ image n'est pas affiché. Il m'affiche le label et pas le input. Ensuite si je remplis le formulaire et que je le valide ( sans remplir le champ image forcément...) j'ai dans ma console cette erreur :
    An invalid form control with name='ad[image]' is not focusable.
    Voici mon formType:
    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
    <?php
     
    namespace App\Form;
     
    use App\Entity\Ad;
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\Extension\Core\Type\TextareaType;
    use Symfony\Component\Form\Extension\Core\Type\TextType;
    use Symfony\Component\Form\FormBuilderInterface;
    use Symfony\Component\OptionsResolver\OptionsResolver;
     
    class AdType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder
                ->add('title', TextType::class)
                ->add('description',TextareaType::class)
                ->add('city',TextType::class)
                ->add('image',TextType::class);
     
        }
     
        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults([
                'data_class' => Ad::class,
            ]);
        }
    }


    mon Controller:

    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
     
    /**
     * Allow to create an Ad
     *@Route("/profile/ajouter-annonce", name="add_ad")
     * @param Request $request
     * @param EntityManagerInterface $manager
     * @return Response
     */
    public function addAd(Request $request, EntityManagerInterface $manager)
    {
        $ad = new Ad();
        $form = $this->createForm(AdType::class, $ad);
        $form->handleRequest($request);
     
        if ($form->isSubmitted() && $form->isValid()){
            $ad->setUser($this->getUser());
            $manager->persist($ad);
            $manager->flush();
     
            $this->addFlash('success', 'Votre annonce a bien été ajouté');
            return $this->redirectToRoute('user_ads');
        }
     
        return $this->render('user/addAd.html.twig', [
            'form' => $form->createView(),
        ]);
     
    }


    et mon Twig :
    Code twig :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {% extends 'base.html.twig' %}
     
    {% block body %}
    <h1>Ajouter une annonce</h1>
     
    {{form_start(form)}}
    {{form_widget(form)}}
     
    <button type="submit">Ajouter</button>
     
    {{form_end(form)}}
     
    {% endblock %}


    Comme vous le voyez, mon champ image est basique, c'est seulement un TextType, tout comme le "city" ou le "title" mais il ne s'affiche pas sous chrome seulement
    rendu sous chrome :



    rendu sous Mozilla :



    Avez-vous une idée pour gérer ce problème que chrome m'affiche ?

  2. #2
    Nouveau membre du Club
    J'ai oublié de précisé que si je passe mon champ image de TextType à FileType (par exemple) le champ s'affiche et je n'ai pas d'erreur dans la console...

  3. #3
    Rédacteur/Modérateur

    Bonjour

    Retire cette ligne de ton Twig
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    <button type="submit">Ajouter</button>
    et utilise un SubmitType dans ta classe de Form.
    Et si tu n'as rien n'a personnalisé dans ton formulaire, utilise juste

  4. #4
    Nouveau membre du Club
    Bonjour Andry,

    J'ai fais les changements mais j'ai toujours le champ image qui n'apparaît pas. Ça apparaît sous Mozilla et Edge mais pas chrome

  5. #5
    Membre éprouvé
    bonjour,
    Essaie de supprimer la validation html 5:
    Code twig :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {% extends 'base.html.twig' %}
     
    {% block body %}
    <h1>Ajouter une annonce</h1>
     
    {{ form_start(form, {attr: {'novalidate': 'novalidate'}}) }}
     
    {{form_widget(form)}}
     
    <button type="submit">Ajouter</button>
     
    {{form_end(form)}}
     
    {% endblock %}

  6. #6
    Nouveau membre du Club
    Bonjour armel,

    Ça ne change rien. C'est seulement sur mon champ image que ça n'apparaît pas ( et seulement sur Chrome) alors que mon champ city et title sont aussi en TextType....

  7. #7
    Rédacteur/Modérateur

    Re,

    Normalement ça devrait fonctionner avec le code de armel18.

    Essaie avec
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
     ->add('image',TextType::class, ['required'=>false])


    Sinon, tu peux nous montrer le code HTML source généré qui se trouve sur chrome?

    A+.

  8. #8
    Nouveau membre du Club
    Re,

    Idem pour cette méthode, rien ne change. Je vous listes ce que j'ai déjà essayé de faire, en plus de vos recommandations :

    - Supprimer tout les scripts et mes fichiers CSS
    -Passer mon code html sur le w3c validator qui m'a reconnu une erreur mais qui venait de bootstrap ( une div qui contenait un attribut "x-placement")
    - J' ai supprimé cette div...

    Rien n'y fait...

    Voici mon code source ( je t'épargne la toolbar symfony ) :

    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
    <!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <title>Welcome!</title>
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
            <link rel="stylesheet" href="/build/vendors~app.css"><link rel="stylesheet" href="/build/app.css">    </head>
        <body class="">
        <header style="background-image:">
        <nav>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">SymBnB</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
     
      <div class="collapse navbar-collapse" id="navbarColor03">
        <ul class="navbar-nav w-100 d-flex justify-content-end mr-5">
          <li class="nav-item active">
            <a class="nav-link" href="/">Accueil <span class="sr-only">(current)</span></a>
          </li>
               <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Mon compte</a>
        <div class="dropdown-menu" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: -5px; left: -30px; will-change: transform;" x-placement="bottom-start">
          <a class="dropdown-item" href="/profile/mes-annonces">Mes annonces</a>
          <a class="dropdown-item" href="#">Mes réservations</a>
          <a class="dropdown-item" href="#">Tableau de bord</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt"></i> Déconnection</a>
        </div>
      </li>
              </ul>
      </div>
    </nav>    </nav>
     
        </header>
            <main>
     
            <h1>Ajouter une annonce</h1>
     
    <form name="ad" method="post">
    <div id="ad"><div class="form-group"><label for="ad_title" class="required">Title</label><input type="text" id="ad_title" name="ad[title]" required="required" class="form-control" /></div><div class="form-group"><label for="ad_description" class="required">Description</label><textarea id="ad_description" name="ad[description]" required="required" class="form-control"></textarea></div><div class="form-group"><label for="ad_city" class="required">City</label><input type="text" id="ad_city" name="ad[city]" required="required" class="form-control" /></div><div class="form-group"><label for="ad_image" class="required">Image</label><input type="text" id="ad_image" name="ad[image]" required="required" class="form-control" /></div><input type="hidden" id="ad__token" name="ad[_token]" value="al0YrhADTBvyzH65ePmjKDOalOEVlkIauP3xU-GGQuU" /></div>
     
    <button type="submit">Ajouter</button>
     
    </form>
     
            </main>
     
                    <script src="/build/vendors~app.js"></script><script src="/build/app.js"></script>

  9. #9
    Membre éprouvé
    je viens de tester le formulaire html généré , Chrome n’apprécie pas le sélecteur d'identifiant ad_image de l'attribut input.
    Change le préfixe ad du formulaire en add par exemple:
    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
     
    class AdType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder
                ->add('title', TextType::class)
                ->add('description',TextareaType::class)
                ->add('city',TextType::class)
                ->add('image',TextType::class);
     
        }
     
        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults([
                'data_class' => Ad::class,
            ]);
        }
     
    /**
      les champs seront préfixés par add
    */
      public function getBlockPrefix(): string
        {
            return 'add';
        }
     
     
    }

  10. #10
    Nouveau membre du Club
    Je dit ouiiiiii

    Merci ça marche niquel maintenant. J'étais en train de chercher quel script me bloquer sur chrome, je faisais fausse route.
    En tout cas merci pour tout et merci à vous 2 d'avoir pris de votre temps pour m'aider.