Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème d'envoie de donnée via un formulaire

Symfony 4

Sujet résolu
    12 novembre 2019 à 11:30:30

    Bonjour, je vous remercie d'avance de m'aider.

    Voilà je dois créer un générateur de formulaire pour mon entreprise et je dois le faire avec Symfony 4 sur lequel je suis plus que débutant.

    Pour le moment aucun problème j'arrive a afficher mes entité (Formulaire et ChampsForm) qui sont en relation Many(Formulaire)toOne(ChampForm)

    le formulaire d'ajout de Formulaire fonctionne j'arrive a ajouter en base de données aucun problème mais je n'arrive pas a récupérer les données du formulaire de la partit ChampsForm qui est imbriquer a celui du Formulaire, je peut ajouter des champs en javascript,le script n'est pas de moi je les pris puis modifier sur le cour de symfony sur openclassrooms je vous met aussi toutes mes entité + vue+Controlleur.

    l'erreur est que il n'arrive pas à envoyé en base de données car toutes mes valeurs sont null :

    An exception occurred while executing 'INSERT INTO champs_form (champ_nom, champs_type, champs_required, champ_max_size, champ_regex, champ_help, champs_order, champ_label, champ_form_id_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)' with params [null, null, null, null, null, null, null, null, 20]:



    je ne cherche absolument pas une reponse toute faite mais au moins une piste sa fais deux jours que je cherche mais sans succès 

    Vue:

    EDIT Benzouye : Un bug du forum empêche de publier le code de la vue ... désolé ...

    ChampformType:

    <?php
    
    namespace App\Form;
    
    use App\Entity\ChampsForm;
    use Symfony\Bridge\Doctrine\Form\Type\EntityType;
    use App\Entity\Formulaire;
    use Symfony\Component\Form\AbstractType;
    use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
    use Symfony\Component\Form\Extension\Core\Type\IntegerType;
    use Symfony\Component\Form\FormBuilderInterface;
    use Symfony\Component\OptionsResolver\OptionsResolver;
    
    class ChampformType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder
            ->setMethod('POST')
            ->add('champNom')
            ->add('champsType')
            ->add('champsRequired',CheckboxType::class)
            ->add('champMaxSize',IntegerType::class)
            ->add('champRegex')
            ->add('champHelp')
            ->add('champsOrder',IntegerType::class)
            ->add('champLabel')
            ;
        }
    
        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults([
                'data_class' => ChampsForm::class,
            ]);
        }
    }
    



    Formulaire:

    <?php
    
    namespace App\Entity;
    
    use Doctrine\Common\Collections\ArrayCollection;
    use Doctrine\Common\Collections\Collection;
    use Doctrine\ORM\Mapping as ORM;
    
    /**
     * @ORM\Entity(repositoryClass="App\Repository\FormulaireRepository")
     */
    class Formulaire
    {
        /**
         * @ORM\Id()
         * @ORM\GeneratedValue()
         * @ORM\Column(type="integer")
         */
        private $id;
    
        /**
         * @ORM\Column(type="string", length=255)
         */
        private $formNom;
    
        /**
         * @ORM\Column(type="string", length=255)
         */
        private $formDescription;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $formTraitement;
    
        /**
         * @ORM\Column(type="boolean")
         */
        private $formActive;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $formHit;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $formHitValide;
    
        /**
         * @ORM\OneToMany(targetEntity="App\Entity\ChampsForm", mappedBy="champFormId", orphanRemoval=true ,cascade={"persist"})
         */
        private $champsForms;
    
        public function __construct()
        {
            $this->champsForms = new ArrayCollection();
        }
    
        public function getId(): ?int
        {
            return $this->id;
        }
    
        public function getFormNom(): ?string
        {
            return $this->formNom;
        }
    
        public function setFormNom(string $formNom): self
        {
            $this->formNom = $formNom;
    
            return $this;
        }
    
        public function getFormDescription(): ?string
        {
            return $this->formDescription;
        }
    
        public function setFormDescription(string $formDescription): self
        {
            $this->formDescription = $formDescription;
    
            return $this;
        }
    
        public function getFormTraitement(): ?int
        {
            return $this->formTraitement;
        }
    
        public function setFormTraitement(int $formTraitement): self
        {
            $this->formTraitement = $formTraitement;
    
            return $this;
        }
    
        public function getFormActive(): ?bool
        {
            return $this->formActive;
        }
    
        public function setFormActive(bool $formActive): self
        {
            $this->formActive = $formActive;
    
            return $this;
        }
    
        public function getFormHit(): ?int
        {
            return $this->formHit;
        }
    
        public function setFormHit(int $formHit): self
        {
            $this->formHit = $formHit;
    
            return $this;
        }
    
        public function getFormHitValide(): ?int
        {
            return $this->formHitValide;
        }
    
        public function setFormHitValide(int $formHitValide): self
        {
            $this->formHitValide = $formHitValide;
    
            return $this;
        }
    
        /**
         * @return Collection|ChampsForm[]
         */
        public function getChampsForms(): Collection
        {
            return $this->champsForms;
        }
    
        public function addChampsForm(ChampsForm $champsForm): self
        {
            if (!$this->champsForms->contains($champsForm)) {
                $this->champsForms[] = $champsForm;
                $champsForm->setChampFormId($this);
            }
    
            return $this;
        }
    
        public function removeChampsForm(ChampsForm $champsForm): self
        {
            if ($this->champsForms->contains($champsForm)) {
                $this->champsForms->removeElement($champsForm);
                // set the owning side to null (unless already changed)
                if ($champsForm->getChampFormId() === $this) {
                    $champsForm->setChampFormId(null);
                }
            }
    
            return $this;
        }
    }
    



    ChampsForm:

    <?php
    
    namespace App\Entity;
    
    use Doctrine\ORM\Mapping as ORM;
    
    /**
     * @ORM\Entity(repositoryClass="App\Repository\ChampsFormRepository")
     */
    class ChampsForm
    {
        /**
         * @ORM\Id()
         * @ORM\GeneratedValue()
         * @ORM\Column(type="integer")
         */
        private $id;
    
        /**
         * @ORM\Column(type="string", length=255)
         */
        private $champNom;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $champsType;
    
        /**
         * @ORM\Column(type="boolean")
         */
        private $champsRequired;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $champMaxSize;
    
        /**
         * @ORM\Column(type="text")
         */
        private $champRegex;
    
        /**
         * @ORM\Column(type="string", length=255)
         */
        private $champHelp;
    
        /**
         * @ORM\Column(type="integer")
         */
        private $champsOrder;
    
        /**
         * @ORM\ManyToOne(targetEntity="App\Entity\Formulaire", inversedBy="champsForms",cascade={"persist"})
         * @ORM\JoinColumn(nullable=false)
         */
        private $champFormId;
    
        /**
         * @ORM\Column(type="string", length=255)
         */
        private $champLabel;
    
        public function getId(): ?int
        {
            return $this->id;
        }
    
        public function getChampNom(): ?string
        {
            return $this->champNom;
        }
    
        public function setChampNom(string $champNom): self
        {
            $this->champNom = $champNom;
    
            return $this;
        }
    
        public function getChampsType(): ?int
        {
            return $this->champsType;
        }
    
        public function setChampsType(int $champsType): self
        {
            $this->champsType = $champsType;
    
            return $this;
        }
    
        public function getChampsRequired(): ?bool
        {
            return $this->champsRequired;
        }
    
        public function setChampsRequired(bool $champsRequired): self
        {
            $this->champsRequired = $champsRequired;
    
            return $this;
        }
    
        public function getChampMaxSize(): ?int
        {
            return $this->champMaxSize;
        }
    
        public function setChampMaxSize(int $champMaxSize): self
        {
            $this->champMaxSize = $champMaxSize;
    
            return $this;
        }
    
        public function getChampRegex(): ?string
        {
            return $this->champRegex;
        }
    
        public function setChampRegex(string $champRegex): self
        {
            $this->champRegex = $champRegex;
    
            return $this;
        }
    
        public function getChampHelp(): ?string
        {
            return $this->champHelp;
        }
    
        public function setChampHelp(string $champHelp): self
        {
            $this->champHelp = $champHelp;
    
            return $this;
        }
    
        public function getChampsOrder(): ?int
        {
            return $this->champsOrder;
        }
    
        public function setChampsOrder(int $champsOrder): self
        {
            $this->champsOrder = $champsOrder;
    
            return $this;
        }
    
        public function getChampFormId(): ?Formulaire
        {
            return $this->champFormId;
        }
    
        public function setChampFormId(?Formulaire $champFormId): self
        {
            $this->champFormId = $champFormId;
    
            return $this;
        }
    
        public function getChampLabel(): ?string
        {
            return $this->champLabel;
        }
    
        public function setChampLabel(string $champLabel): self
        {
            $this->champLabel = $champLabel;
    
            return $this;
        }
    }
    



     Controlleur:

     /**
         * @Route ("/form/addchamp", name="addchamps")
         */
        public function add_champ(Request $request, ObjectManager $manager)
        {
            $form = new Formulaire();
            $formulaire = $this->createFormBuilder($form)
                ->add('formNom')
                ->add('formDescription')
                ->add('formTraitement')
                ->add('formActive')
                ->add('champsForms', CollectionType::class, array(
                    'entry_type'   => ChampformType::class,
                    'allow_add'    => true,
                    'allow_delete' => true,
                ))
                ->add('formButton', SubmitType::class)
                ->getForm();
    
            $formulaire->HandleRequest($request);
            dump($formulaire);
            if ($formulaire->isSubmitted()&& $formulaire->isValid()) {
               
                $champForm = new ChampsForm;
                $form->addChampsForm($champForm);
                $form->setFormHit(0);
                $form->setFormHitValide(0);
                $manager->persist($form);
           //     echo $form['champsForms'][0]->getData();
                 dump($form);
                 dump($champForm);
    
                $manager->flush();
                return $this->render('form/add_champ.html.twig', [
                    'controller_name' => 'FormController',
                    'Forms' => $formulaire->createView(),
                ]);
            }
            return $this->render('form/add_champ.html.twig', [
                'controller_name' => 'FormController',
                'Forms' => $formulaire->createView(),
            ]);
        }



    -
    Edité par Benzouye 12 novembre 2019 à 13:31:08

    • Partager sur Facebook
    • Partager sur Twitter
      12 novembre 2019 à 13:27:51

      ligne 24 : ton champForm est vide ?
      • Partager sur Facebook
      • Partager sur Twitter
        12 novembre 2019 à 14:06:03

        Oui c'est en fonction du formulaire créer et quand je rajoute un formulaire avec ses champs il y a que le formulaire qui se trouve dans la base de données pas ses champ
        • Partager sur Facebook
        • Partager sur Twitter
          14 novembre 2019 à 16:13:31

          Salut

          Il nous manque une partie du message d'erreur, ça aiderait pas mal.

          Sinon, en attendant, je pense que tu pourrais bien être dans ce cas traité dans la FAQ

          • Partager sur Facebook
          • Partager sur Twitter
            14 novembre 2019 à 16:54:50

            An exception occurred while executing 'INSERT INTO champs_form (champ_nom, champs_type, champs_required, champ_max_size, champ_regex, champ_help, champs_order, champ_label, champ_form_id_id) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)' with params [null, null, null, null, null, null, null, null, null]:
            
            SQLSTATE[23000]: Integrity constraint violation: 1048 Le champ 'champ_nom' ne peut être vide (null)

            voila pour le message d'erreur entier je vais me penchez sur se que tu m'a donné merci

            Edit:

            Le lien que tu ma donner ne m'aide pas du tout, tout ce qu'il y a d'expliquer je les déjà et sa ne marche pas je suis perdu en vrai 

            ce n'est pas une question de persiste, car quand je set a la main quelque paramètre bon l'erreur se met aussi mais la ou j'ai seter au lieu de me mettre "null" il me remplace bien par le paramètre, le problème viendrai plus du formulaire je n'arrive pas a recup les données du champ 

            la parti formulaire se soumet bien mais ses la parti champForm qui pose des problèmes

            Sur l'image il n'y a que le champNom c'est plus simple pour mes test plutôt que tout réécrire a chaque fois 

            -
            Edité par NathanRenaud 15 novembre 2019 à 8:44:44

            • Partager sur Facebook
            • Partager sur Twitter
              19 novembre 2019 à 15:00:20

              voila j'ai réussi a avancer légèrement j'ai ajouter ce bout de code a mon controller 
                for($i=0;$i<5;$i++){
                          
                          $form->getChampsForms()->add($champForm);
                     }

              et avec ce code cela me creer bien 5 champ de champNom et j'arrive a récup les données mais le soucis mtn c'est que c'est grâce a ma boucle for et j'aimerai le faire dynamiquement avec javascript comme dans le cour sur OC  sur les formulaire imbriqué mais quand je valide sa me met la même erreur que je recup rien quelqu'un aurait une solution ou un début de solution 

              merci d'avance 
               

              • Partager sur Facebook
              • Partager sur Twitter
                19 novembre 2019 à 15:09:17

                Désolé, OC a encore plus cassé son forum, je ne reçois plus les notifications pour des réponses à des sujets…

                Effectivement, une collection commence par être vide, donc n'a aucun champ affiché dans le formulaire. Pour en afficher, soit tu prévois les éléments dedans en ajoutant comme tu l'as fait, soit tu ajoutes un peu de JavaScript pour pouvoir en rajouter à la volée.

                • Partager sur Facebook
                • Partager sur Twitter
                  19 novembre 2019 à 15:14:36

                  Le problème est que j'arrive a l'afficher avec du javascript mais quand j'appui sur valider il me recup aucune données

                  comme si le formulaire étais vide

                  -
                  Edité par NathanRenaud 19 novembre 2019 à 15:15:43

                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 novembre 2019 à 15:45:31

                    Alors désolé, mais j'ai donné ma boule de cristal à un meilleur charlatan que moi, et du coup je ne peux pas deviner ton JavaScript, il va falloir que tu nous le donnes.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 novembre 2019 à 15:54:03

                      var $addTagLink = $('<a href="#" class="btn btn-default">Add a tag</a>');
                      var $newLinkLi = $('<li></li>').append($addTagLink);
                      
                      jQuery(document).ready(function() {
                          // Get the ul that holds the collection of tags
                         var $collectionHolder = $('ul.champsForms');
                          
                          // add the "add a tag" anchor and li to the tags ul
                          $collectionHolder.append($newLinkLi);
                          
                          // count the current form inputs we have (e.g. 2), use that as the new
                          // index when inserting a new item (e.g. 2)
                          $collectionHolder.data('index', $collectionHolder.find(':input').length);
                          
                          $addTagLink.on('click', function(e) {
                              // prevent the link from creating a "#" on the URL
                              e.preventDefault();
                              
                              // add a new tag form (see code block below)
                              addTagForm($collectionHolder, $newLinkLi);
                          });
                          
                          
                      });
                      
                      function addTagForm($collectionHolder, $newLinkLi) {
                          // Get the data-prototype explained earlier
                          var prototype = $collectionHolder.data('prototype');
                          
                          // get the new index
                          var index = $collectionHolder.data('index');
                          
                          // Replace '$$name$$' in the prototype's HTML to
                          // instead be a number based on how many items we have
                          var newForm = prototype.replace(/__name__/g, index);
                          
                          // increase the index with one for the next item
                          $collectionHolder.data('index', index + 1);
                          
                          // Display the form in the page in an li, before the "Add a tag" link li
                          var $newFormLi = $('<li></li>').append(newForm);
                          
                          // also add a remove button, just for this example
                          $newFormLi.append('<a href="#" class="btn btn-danger">Supprimer</a>');
                          
                          $newLinkLi.before($newFormLi);
                          
                          // handle the removal, just for this example
                          $('.remove-tag').click(function(e) {
                              e.preventDefault();
                              
                              $(this).parent().remove();
                              
                              return false;
                          });
                      }
                      		
                      je les pris sur la doc de symfony 

                      -
                      Edité par NathanRenaud 19 novembre 2019 à 15:55:56

                      • Partager sur Facebook
                      • Partager sur Twitter
                        19 novembre 2019 à 16:05:37

                        Est-ce que je pourrais voir aussi le champ dans le code de la page vu par le navigateur, donc le résultat HTML, PAS le Twig ou le FormType ?

                        • Partager sur Facebook
                        • Partager sur Twitter
                          19 novembre 2019 à 16:10:21

                          et j'affiche le champs dans twig avec sa   <ulclass="champsForms"data-prototype="{{ form_row(Forms.champsForms.vars.prototype)|e('html_attr') }}"></ul>

                          -
                          Edité par NathanRenaud 19 novembre 2019 à 16:14:45

                          • Partager sur Facebook
                          • Partager sur Twitter
                            19 novembre 2019 à 23:48:01

                            Mmm, est-ce que tu as bien tout regardé de la FAQ que j'ai liée précédemment, notamment le dernier bloc de code ?

                            • Partager sur Facebook
                            • Partager sur Twitter
                              20 novembre 2019 à 8:34:53

                              Bonjour Ymox, je vien de la regarder a nouveau mais je ne voit rien qui pourrait m'aider et quand tu parle du dernier bloc, tu parle du bloc avec le .htacces ?
                              • Partager sur Facebook
                              • Partager sur Twitter
                                20 novembre 2019 à 8:42:25

                                Non, je parle du dernier bloc de code dans le message précis que j'ai lié pour ton souci. Il n'y est pas fait mention d'un .htaccess.

                                Si tu n'as rien mis à jour dans ton contrôleur lors de la création du formulaire du fait de ce message de la FAQ, on pourrait bien avoir trouvé ce qui manque.

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  20 novembre 2019 à 8:48:31

                                   public function addChampsForm(ChampsForm $champsForm): self
                                      {
                                          if (!$this->champsForms->contains($champsForm)) {
                                              $this->champsForms[] = $champsForm;
                                              $champsForm->setChampFormId($this);
                                  
                                          }
                                  
                                          return $this;
                                      }
                                  
                                      public function removeChampsForm(ChampsForm $champsForm): self
                                      {
                                          if ($this->champsForms->contains($champsForm)) {
                                              $this->champsForms->removeElement($champsForm);
                                              // set the owning side to null (unless already changed)
                                              if ($champsForm->getChampFormId() === $this) {
                                                  $champsForm->setChampFormId(null);
                                              }
                                          }
                                  
                                          return $this;
                                      }
                                  }
                                  j'ai exactement la même chose que sur la FAQ et pour j'ai même le by_reference = false
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    20 novembre 2019 à 10:03:44

                                    Bon, outre le fait que ta propriété ChampForm#champFormId devrait plutôt être nommée ChampForm#formulaire (ce qui est plutôt un détail), là, je ne vois plus trop. Je te propose de regarder les données envoyéesavec l'onglet Network (ou Réseau) des outils de développement de ton navigateur pour déjà regarder si les données sont bien envoyées et avec les bons noms. Comme on n'a pas la vue, on ne pourra pas regarder plus loin.

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      20 novembre 2019 à 10:07:43

                                      je suis sensé voir quoi avec sa ? je les ouvert et c'est vide
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        20 novembre 2019 à 10:14:44

                                        Ymox a écrit:

                                        […] pour déjà regarder si les données sont bien envoyées et avec les bons noms.

                                        Désolé, mais je ne peux pas te faire un tutoriel sur comment utiliser cet outil, je te laisse chercher/comprendre son fonctionnement pour ton navigateur.

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          20 novembre 2019 à 10:40:05

                                          je pense que ses sa que tu me demander , j'ai bien ajouter un champ avec le javascript et rempli mais il ne s'affiche pas 
                                          Est ce que tu as besoin de la vue Twig ?

                                          -
                                          Edité par NathanRenaud 20 novembre 2019 à 11:00:10

                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            20 novembre 2019 à 12:43:32

                                            LA vue Twig d'une part, et le code HTML qui en résulte d'autre part — sous forme de code mis en forme les deux fois, aucune capture d'écran, merci d'avance.

                                            Je soupçonne que le champ est rendu hors formulaire pour une raison ou une autre.

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              20 novembre 2019 à 13:02:47

                                              {% extends 'base.html.twig' %}
                                              {% form_theme Forms 'bootstrap_4_layout.html.twig' %}
                                              
                                              {% block title %}Générateur de formulaire
                                              {% endblock %}
                                              
                                              {% block body %}
                                              	<div class="row" style="margin-left:5px">
                                              
                                              		<div class="col-lg-1.5">
                                              			{{ form_start(Forms)}}
                                              
                                              			{{ form_row(Forms.formNom) }}</div>
                                              		<div class="col-lg-2">
                                              		
                                              			{{ form_row(Forms.formDescription) }}</div>
                                              		<div class="col-lg-1">
                                              		
                                              			{{ form_row(Forms.formTraitement) }}</div>
                                              		<div class="col-lg-1">
                                              		
                                              			{{ form_row(Forms.formActive) }}</div>
                                              		<div class="col-lg-12">
                                              				{{form_label(Forms.champsForms)}}
                                              			<ul class="my-selector" data-prototype="{{ form_row(Forms.champsForms.vars.prototype, {'attr': {'class': 'my-selector'}})|e('html_attr') }}"></ul>
                                              				
                                              
                                              			{{ form_end(Forms) }}
                                              
                                              
                                              		</div>
                                              
                                              		{# On charge la bibliothèque jQuery. Ici, je la prends depuis le CDN google
                                              		   mais si vous l'avez en local, changez simplement l'adresse. #}
                                              		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                                              
                                              		{# Voici le script en question : #}
                                              		<script type="text/javascript">
                                              		var $addTagLink = $('<a href="#" class="btn btn-default">Add a tag</a>');
                                              var $newLinkLi = $('<li></li>').append($addTagLink);
                                              
                                              jQuery(document).ready(function() {
                                                  // Get the ul that holds the collection of tags
                                                 var $collectionHolder = $('ul.my-selector');
                                                 
                                                  // add the "add a tag" anchor and li to the tags ul
                                                  $collectionHolder.append($newLinkLi);
                                                  
                                                  // count the current form inputs we have (e.g. 2), use that as the new
                                                  // index when inserting a new item (e.g. 2)
                                                  $collectionHolder.data('index', $collectionHolder.find(':input').length);
                                                  
                                                  $addTagLink.on('click', function(e) {
                                                      // prevent the link from creating a "#" on the URL
                                                      e.preventDefault();
                                                      
                                                      // add a new tag form (see code block below)
                                                      addTagForm($collectionHolder, $newLinkLi);
                                                  });
                                                  
                                                  
                                              });
                                              
                                              function addTagForm($collectionHolder, $newLinkLi) {
                                                  // Get the data-prototype explained earlier
                                                  var prototype = $collectionHolder.data('prototype');
                                                  
                                                  // get the new index
                                                  var index = $collectionHolder.data('index');
                                                  
                                                  // Replace '$$name$$' in the prototype's HTML to
                                                  // instead be a number based on how many items we have
                                                  var newForm = prototype    
                                                  .replace(/__name__label__/g, 'Catégorie n°' + (index+1))
                                                  .replace(/__name__/g, index)
                                                  ;
                                               console.log(newForm);
                                              
                                                  
                                                  // increase the index with one for the next item
                                                  $collectionHolder.data('index', index + 1);
                                                  
                                                  // Display the form in the page in an li, before the "Add a tag" link li
                                                  var $newFormLi = $('<li></li>').append(newForm);
                                                  
                                                  // also add a remove button, just for this example
                                                  $newFormLi.append('<a href="#" class="btn btn-danger">Supprimer</a>');
                                                  
                                                  $newLinkLi.before($newFormLi);
                                                  
                                                  // handle the removal, just for this example
                                                  $('.remove-tag').click(function(e) {
                                                      e.preventDefault();
                                                      
                                                      $(this).parent().remove();
                                                      
                                                      return false;
                                                  });
                                              }
                                              		</script>
                                              	{% endblock %}
                                              

                                              et le rendu html 

                                              <!DOCTYPE html>
                                              <html>
                                                  <link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
                                                  <head>
                                                      <meta charset="UTF-8">
                                                      <title>Générateur de formulaire
                                              </title>
                                                  </head>
                                                  <body>
                                                      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                                                          <a class="navbar-brand" href="/form/show">Les formulaires</a>
                                                          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                                                              <span class="navbar-toggler-icon"></span>
                                                          </button>
                                                          <div class="collapse navbar-collapse" id="navbarColor02">
                                                              <ul class="navbar-nav mr-auto">
                                                                  <li class="nav-item active">
                                                                      <a class="nav-link" href="/form">
                                                                          Générateur <span class="sr-only">(current)</span>
                                                                      </a>
                                                                  </li>
                                                              </ul>
                                                          </div>
                                                      </nav>
                                                      <div class="row" style="margin-left:5px">
                                                          <div class="col-lg-1.5">
                                                              <form name="formulaire" method="post">
                                                                  <div class="form-group">
                                                                      <label for="formulaire_formNom" class="required">Form nom</label>
                                                                      <input type="text" id="formulaire_formNom" name="formulaire[formNom]" required="required" maxlength="255" class="form-control"/>
                                                                  </div>
                                                          </div>
                                                          <div class="col-lg-2">
                                                              <div class="form-group">
                                                                  <label for="formulaire_formDescription" class="required">Form description</label>
                                                                  <input type="text" id="formulaire_formDescription" name="formulaire[formDescription]" required="required" maxlength="255" class="form-control"/>
                                                              </div>
                                                          </div>
                                                          <div class="col-lg-1">
                                                              <div class="form-group">
                                                                  <label for="formulaire_formTraitement" class="required">Form traitement</label>
                                                                  <input type="number" id="formulaire_formTraitement" name="formulaire[formTraitement]" required="required" class="form-control"/>
                                                              </div>
                                                          </div>
                                                          <div class="col-lg-1">
                                                              <div class="form-group">
                                                                  <div class="form-check">
                                                                      <input type="checkbox" id="formulaire_formActive" name="formulaire[formActive]" class="form-check-input" value="1"/>
                                                                      <label class="form-check-label" for="formulaire_formActive">Form active</label>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                          <div class="col-lg-12">
                                                              <ul class="my-selector" data-prototype="&lt;fieldset&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;legend&#x20;class&#x3D;&quot;col-form-label&#x20;required&quot;&gt;__name__label__&lt;&#x2F;legend&gt;&lt;div&#x20;id&#x3D;&quot;formulaire_champsForms___name__&quot;&#x20;class&#x3D;&quot;my-selector&quot;&gt;&lt;div&#x20;class&#x3D;&quot;form-group&quot;&gt;&lt;label&#x20;for&#x3D;&quot;formulaire_champsForms___name___champNom&quot;&#x20;class&#x3D;&quot;required&quot;&gt;Champ&#x20;nom&lt;&#x2F;label&gt;&lt;input&#x20;type&#x3D;&quot;text&quot;&#x20;id&#x3D;&quot;formulaire_champsForms___name___champNom&quot;&#x20;name&#x3D;&quot;formulaire&#x5B;champsForms&#x5D;&#x5B;__name__&#x5D;&#x5B;champNom&#x5D;&quot;&#x20;required&#x3D;&quot;required&quot;&#x20;class&#x3D;&quot;form-control&quot;&#x20;&#x2F;&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt;&lt;&#x2F;fieldset&gt;"></ul>
                                                              <fieldset class="form-group">
                                                                  <div id="formulaire_champsForms" class="my-selector"></div>
                                                              </fieldset>
                                                              <div class="form-group">
                                                                  <button type="submit" id="formulaire_formButton" name="formulaire[formButton]" class="btn-primary btn">Form button</button>
                                                              </div>
                                                              <input type="hidden" id="formulaire__token" name="formulaire[_token]" value="zJOCOHhR8Ecsq50KAwofqteOT6P0S2AquLgGjW3anYk"/>
                                              </form></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                                              <script type="text/javascript">
                                                  var $addTagLink = $('<a href="#" class="btn btn-default">Add a tag</a>');
                                                  var $newLinkLi = $('<li></li>').append($addTagLink);
                                              
                                                  jQuery(document).ready(function() {
                                                      // Get the ul that holds the collection of tags
                                                      var $collectionHolder = $('ul.my-selector');
                                              
                                                      // add the "add a tag" anchor and li to the tags ul
                                                      $collectionHolder.append($newLinkLi);
                                              
                                                      // count the current form inputs we have (e.g. 2), use that as the new
                                                      // index when inserting a new item (e.g. 2)
                                                      $collectionHolder.data('index', $collectionHolder.find(':input').length);
                                              
                                                      $addTagLink.on('click', function(e) {
                                                          // prevent the link from creating a "#" on the URL
                                                          e.preventDefault();
                                              
                                                          // add a new tag form (see code block below)
                                                          addTagForm($collectionHolder, $newLinkLi);
                                                      });
                                              
                                                  });
                                              
                                                  function addTagForm($collectionHolder, $newLinkLi) {
                                                      // Get the data-prototype explained earlier
                                                      var prototype = $collectionHolder.data('prototype');
                                              
                                                      // get the new index
                                                      var index = $collectionHolder.data('index');
                                              
                                                      // Replace '$$name$$' in the prototype's HTML to
                                                      // instead be a number based on how many items we have
                                                      var newForm = prototype.replace(/__name__label__/g, 'Catégorie n°' + (index + 1)).replace(/__name__/g, index);
                                                      console.log(newForm);
                                              
                                                      // increase the index with one for the next item
                                                      $collectionHolder.data('index', index + 1);
                                              
                                                      // Display the form in the page in an li, before the "Add a tag" link li
                                                      var $newFormLi = $('<li></li>').append(newForm);
                                              
                                                      // also add a remove button, just for this example
                                                      $newFormLi.append('<a href="#" class="btn btn-danger">Supprimer</a>');
                                              
                                                      $newLinkLi.before($newFormLi);
                                              
                                                      // handle the removal, just for this example
                                                      $('.remove-tag').click(function(e) {
                                                          e.preventDefault();
                                              
                                                          $(this).parent().remove();
                                              
                                                          return false;
                                                      });
                                                  }
                                              </script>
                                              <div id="sfwdt0239e8" class="sf-toolbar sf-display-none"></div>
                                              <script nonce="ac5f1a47d1068dac891ccbd663d86ef6">
                                                  /*<![CDATA[*/
                                                  Sfjs = (function() {
                                                      "use strict";
                                                      if ('classList'in document.documentElement) {
                                                          var hasClass = function(el, cssClass) {
                                                              return el.classList.contains(cssClass);
                                                          };
                                                          var removeClass = function(el, cssClass) {
                                                              el.classList.remove(cssClass);
                                                          };
                                                          var addClass = function(el, cssClass) {
                                                              el.classList.add(cssClass);
                                                          };
                                                          var toggleClass = function(el, cssClass) {
                                                              el.classList.toggle(cssClass);
                                                          };
                                                      } else {
                                                          var hasClass = function(el, cssClass) {
                                                              return el.className.match(new RegExp('\\b' + cssClass + '\\b'));
                                                          };
                                                          var removeClass = function(el, cssClass) {
                                                              el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' ');
                                                          };
                                                          var addClass = function(el, cssClass) {
                                                              if (!hasClass(el, cssClass)) {
                                                                  el.className += " " + cssClass;
                                                              }
                                                          };
                                                          var toggleClass = function(el, cssClass) {
                                                              hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass);
                                                          };
                                                      }
                                                      var noop = function() {};
                                                      var profilerStorageKey = 'symfony/profiler/';
                                                      var request = function(url, onSuccess, onError, payload, options) {
                                                          var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
                                                          options = options || {};
                                                          options.maxTries = options.maxTries || 0;
                                                          xhr.open(options.method || 'GET', url, true);
                                                          xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                                                          xhr.onreadystatechange = function(state) {
                                                              if (4 !== xhr.readyState) {
                                                                  return null;
                                                              }
                                                              if (xhr.status == 404 && options.maxTries > 1) {
                                                                  setTimeout(function() {
                                                                      options.maxTries--;
                                                                      request(url, onSuccess, onError, payload, options);
                                                                  }, 1000);
                                                                  return null;
                                                              }
                                                              if (200 === xhr.status) {
                                                                  (onSuccess || noop)(xhr);
                                                              } else {
                                                                  (onError || noop)(xhr);
                                                              }
                                                          }
                                                          ;
                                                          xhr.send(payload || '');
                                                      };
                                                      var getPreference = function(name) {
                                                          if (!window.localStorage) {
                                                              return null;
                                                          }
                                                          return localStorage.getItem(profilerStorageKey + name);
                                                      };
                                                      var setPreference = function(name, value) {
                                                          if (!window.localStorage) {
                                                              return null;
                                                          }
                                                          localStorage.setItem(profilerStorageKey + name, value);
                                                      };
                                                      var requestStack = [];
                                                      var extractHeaders = function(xhr, stackElement) {
                                                          /* Here we avoid to call xhr.getResponseHeader in order to */
                                                          /* prevent polluting the console with CORS security errors */
                                                          var allHeaders = xhr.getAllResponseHeaders();
                                                          var ret;
                                                          if (ret = allHeaders.match(/^x-debug-token:\s+(.*)$/im)) {
                                                              stackElement.profile = ret[1];
                                                          }
                                                          if (ret = allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) {
                                                              stackElement.profilerUrl = ret[1];
                                                          }
                                                          if (ret = allHeaders.match(/^Symfony-Debug-Toolbar-Replace:\s+(.*)$/im)) {
                                                              stackElement.toolbarReplaceFinished = false;
                                                              stackElement.toolbarReplace = '1' === ret[1];
                                                          }
                                                      };
                                                      var successStreak = 4;
                                                      var pendingRequests = 0;
                                                      var renderAjaxRequests = function() {
                                                          var requestCounter = document.querySelector('.sf-toolbar-ajax-request-counter');
                                                          if (!requestCounter) {
                                                              return;
                                                          }
                                                          requestCounter.textContent = requestStack.length;
                                                          var infoSpan = document.querySelector(".sf-toolbar-ajax-info");
                                                          if (infoSpan) {
                                                              infoSpan.textContent = requestStack.length + ' AJAX request' + (requestStack.length !== 1 ? 's' : '');
                                                          }
                                                          var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax');
                                                          if (requestStack.length) {
                                                              ajaxToolbarPanel.style.display = 'block';
                                                          } else {
                                                              ajaxToolbarPanel.style.display = 'none';
                                                          }
                                                          if (pendingRequests > 0) {
                                                              addClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
                                                          } else if (successStreak < 4) {
                                                              addClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
                                                              removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
                                                          } else {
                                                              removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
                                                              removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
                                                          }
                                                      };
                                                      var startAjaxRequest = function(index) {
                                                          var tbody = document.querySelector('.sf-toolbar-ajax-request-list');
                                                          if (!tbody) {
                                                              return;
                                                          }
                                                          var nbOfAjaxRequest = tbody.rows.length;
                                                          if (nbOfAjaxRequest >= 100) {
                                                              tbody.deleteRow(0);
                                                          }
                                                          var request = requestStack[index];
                                                          pendingRequests++;
                                                          var row = document.createElement('tr');
                                                          request.DOMNode = row;
                                                          var requestNumberCell = document.createElement('td');
                                                          requestNumberCell.textContent = index + 1;
                                                          row.appendChild(requestNumberCell);
                                                          var profilerCell = document.createElement('td');
                                                          profilerCell.textContent = 'n/a';
                                                          row.appendChild(profilerCell);
                                                          var methodCell = document.createElement('td');
                                                          methodCell.textContent = request.method;
                                                          row.appendChild(methodCell);
                                                          var typeCell = document.createElement('td');
                                                          typeCell.textContent = request.type;
                                                          row.appendChild(typeCell);
                                                          var statusCodeCell = document.createElement('td');
                                                          var statusCode = document.createElement('span');
                                                          statusCode.textContent = 'n/a';
                                                          statusCodeCell.appendChild(statusCode);
                                                          row.appendChild(statusCodeCell);
                                                          var pathCell = document.createElement('td');
                                                          pathCell.className = 'sf-ajax-request-url';
                                                          if ('GET' === request.method) {
                                                              var pathLink = document.createElement('a');
                                                              pathLink.setAttribute('href', request.url);
                                                              pathLink.textContent = request.url;
                                                              pathCell.appendChild(pathLink);
                                                          } else {
                                                              pathCell.textContent = request.url;
                                                          }
                                                          pathCell.setAttribute('title', request.url);
                                                          row.appendChild(pathCell);
                                                          var durationCell = document.createElement('td');
                                                          durationCell.className = 'sf-ajax-request-duration';
                                                          durationCell.textContent = 'n/a';
                                                          row.appendChild(durationCell);
                                                          request.liveDurationHandle = setInterval(function() {
                                                              durationCell.textContent = (new Date() - request.start) + 'ms';
                                                          }, 100);
                                                          row.className = 'sf-ajax-request sf-ajax-request-loading';
                                                          tbody.insertBefore(row, null);
                                                          var toolbarInfo = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
                                                          toolbarInfo.scrollTop = toolbarInfo.scrollHeight;
                                                          renderAjaxRequests();
                                                      };
                                                      var finishAjaxRequest = function(index) {
                                                          var request = requestStack[index];
                                                          clearInterval(request.liveDurationHandle);
                                                          if (!request.DOMNode) {
                                                              return;
                                                          }
                                                          if (request.toolbarReplace && !request.toolbarReplaceFinished && request.profile) {
                                                              /* Flag as complete because finishAjaxRequest can be called multiple times. */
                                                              request.toolbarReplaceFinished = true;
                                                              /* Search up through the DOM to find the toolbar's container ID. */
                                                              for (var elem = request.DOMNode; elem && elem !== document; elem = elem.parentNode) {
                                                                  if (elem.id.match(/^sfwdt/)) {
                                                                      Sfjs.loadToolbar(elem.id.replace(/^sfwdt/, ''), request.profile);
                                                                      break;
                                                                  }
                                                              }
                                                          }
                                                          pendingRequests--;
                                                          var row = request.DOMNode;
                                                          /* Unpack the children from the row */
                                                          var profilerCell = row.children[1];
                                                          var methodCell = row.children[2];
                                                          var statusCodeCell = row.children[4];
                                                          var statusCodeElem = statusCodeCell.children[0];
                                                          var durationCell = row.children[6];
                                                          if (request.error) {
                                                              row.className = 'sf-ajax-request sf-ajax-request-error';
                                                              methodCell.className = 'sf-ajax-request-error';
                                                              successStreak = 0;
                                                          } else {
                                                              row.className = 'sf-ajax-request sf-ajax-request-ok';
                                                              successStreak++;
                                                          }
                                                          if (request.statusCode) {
                                                              if (request.statusCode < 300) {
                                                                  statusCodeElem.setAttribute('class', 'sf-toolbar-status');
                                                              } else if (request.statusCode < 400) {
                                                                  statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-yellow');
                                                              } else {
                                                                  statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
                                                              }
                                                              statusCodeElem.textContent = request.statusCode;
                                                          } else {
                                                              statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
                                                          }
                                                          if (request.duration) {
                                                              durationCell.textContent = request.duration + 'ms';
                                                          }
                                                          if (request.profilerUrl) {
                                                              profilerCell.textContent = '';
                                                              var profilerLink = document.createElement('a');
                                                              profilerLink.setAttribute('href', request.statusCode < 400 ? request.profilerUrl : request.profilerUrl + '?panel=exception');
                                                              profilerLink.textContent = request.profile;
                                                              profilerCell.appendChild(profilerLink);
                                                          }
                                                          renderAjaxRequests();
                                                      };
                                                      var addEventListener;
                                                      var el = document.createElement('div');
                                                      if (!('addEventListener'in el)) {
                                                          addEventListener = function(element, eventName, callback) {
                                                              element.attachEvent('on' + eventName, callback);
                                                          }
                                                          ;
                                                      } else {
                                                          addEventListener = function(element, eventName, callback) {
                                                              element.addEventListener(eventName, callback, false);
                                                          }
                                                          ;
                                                      }
                                                      if (window.fetch && window.fetch.polyfill === undefined) {
                                                          var oldFetch = window.fetch;
                                                          window.fetch = function() {
                                                              var promise = oldFetch.apply(this, arguments);
                                                              var url = arguments[0];
                                                              var params = arguments[1];
                                                              var paramType = Object.prototype.toString.call(arguments[0]);
                                                              if (paramType === '[object Request]') {
                                                                  url = arguments[0].url;
                                                                  params = {
                                                                      method: arguments[0].method,
                                                                      credentials: arguments[0].credentials,
                                                                      headers: arguments[0].headers,
                                                                      mode: arguments[0].mode,
                                                                      redirect: arguments[0].redirect
                                                                  };
                                                              } else {
                                                                  url = String(url);
                                                              }
                                                              if (!url.match(new RegExp("^\/((index|app(_[\\w]+)?)\\.php\/)?_wdt"))) {
                                                                  var method = 'GET';
                                                                  if (params && params.method !== undefined) {
                                                                      method = params.method;
                                                                  }
                                                                  var stackElement = {
                                                                      error: false,
                                                                      url: url,
                                                                      method: method,
                                                                      type: 'fetch',
                                                                      start: new Date()
                                                                  };
                                                                  var idx = requestStack.push(stackElement) - 1;
                                                                  promise.then(function(r) {
                                                                      stackElement.duration = new Date() - stackElement.start;
                                                                      stackElement.error = r.status < 200 || r.status >= 400;
                                                                      stackElement.statusCode = r.status;
                                                                      stackElement.profile = r.headers.get('x-debug-token');
                                                                      stackElement.profilerUrl = r.headers.get('x-debug-token-link');
                                                                      stackElement.toolbarReplaceFinished = false;
                                                                      stackElement.toolbarReplace = '1' === r.headers.get('Symfony-Debug-Toolbar-Replace');
                                                                      finishAjaxRequest(idx);
                                                                  }, function(e) {
                                                                      stackElement.error = true;
                                                                      finishAjaxRequest(idx);
                                                                  });
                                                                  startAjaxRequest(idx);
                                                              }
                                                              return promise;
                                                          }
                                                          ;
                                                      }
                                                      if (window.XMLHttpRequest && XMLHttpRequest.prototype.addEventListener) {
                                                          var proxied = XMLHttpRequest.prototype.open;
                                                          XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
                                                              var self = this;
                                                              /* prevent logging AJAX calls to static and inline files, like templates */
                                                              var path = url;
                                                              if (url.substr(0, 1) === '/') {
                                                                  if (0 === url.indexOf('')) {
                                                                      path = url.substr(0);
                                                                  }
                                                              } else if (0 === url.indexOf('http\u003A\/\/127.0.0.1\u003A8000')) {
                                                                  path = url.substr(21);
                                                              }
                                                              if (!path.match(new RegExp("^\/((index|app(_[\\w]+)?)\\.php\/)?_wdt"))) {
                                                                  var stackElement = {
                                                                      error: false,
                                                                      url: url,
                                                                      method: method,
                                                                      type: 'xhr',
                                                                      start: new Date()
                                                                  };
                                                                  var idx = requestStack.push(stackElement) - 1;
                                                                  this.addEventListener('readystatechange', function() {
                                                                      if (self.readyState == 4) {
                                                                          stackElement.duration = new Date() - stackElement.start;
                                                                          stackElement.error = self.status < 200 || self.status >= 400;
                                                                          stackElement.statusCode = self.status;
                                                                          extractHeaders(self, stackElement);
                                                                          finishAjaxRequest(idx);
                                                                      }
                                                                  }, false);
                                                                  startAjaxRequest(idx);
                                                              }
                                                              proxied.apply(this, Array.prototype.slice.call(arguments));
                                                          }
                                                          ;
                                                      }
                                                      return {
                                                          hasClass: hasClass,
                                                          removeClass: removeClass,
                                                          addClass: addClass,
                                                          toggleClass: toggleClass,
                                                          getPreference: getPreference,
                                                          setPreference: setPreference,
                                                          addEventListener: addEventListener,
                                                          request: request,
                                                          renderAjaxRequests: renderAjaxRequests,
                                                          load: function(selector, url, onSuccess, onError, options) {
                                                              var el = document.getElementById(selector);
                                                              if (el && el.getAttribute('data-sfurl') !== url) {
                                                                  request(url, function(xhr) {
                                                                      el.innerHTML = xhr.responseText;
                                                                      el.setAttribute('data-sfurl', url);
                                                                      removeClass(el, 'loading');
                                                                      var pending = pendingRequests;
                                                                      for (var i = 0; i < requestStack.length; i++) {
                                                                          startAjaxRequest(i);
                                                                          if (requestStack[i].duration) {
                                                                              finishAjaxRequest(i);
                                                                          }
                                                                      }
                                                                      /* Revert the pending state in case there was a start called without a finish above. */
                                                                      pendingRequests = pending;
                                                                      (onSuccess || noop)(xhr, el);
                                                                  }, function(xhr) {
                                                                      (onError || noop)(xhr, el);
                                                                  }, '', options);
                                                              }
                                                              return this;
                                                          },
                                                          loadToolbar: function(token, newToken) {
                                                              newToken = (newToken || token);
                                                              this.load('sfwdt' + token, '\/_wdt\/xxxxxx'.replace(/xxxxxx/, newToken), function(xhr, el) {
                                                                  /* Evaluate in global scope scripts embedded inside the toolbar */
                                                                  var i, scripts = [].slice.call(el.querySelectorAll('script'));
                                                                  for (i = 0; i < scripts.length; ++i) {
                                                                      eval.call({}, scripts[i].firstChild.nodeValue);
                                                                  }
                                                                  el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
                                                                  if (el.style.display == 'none') {
                                                                      return;
                                                                  }
                                                                  if (getPreference('toolbar/displayState') == 'none') {
                                                                      document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'none';
                                                                      document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none';
                                                                      document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block';
                                                                  } else {
                                                                      document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
                                                                      document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block';
                                                                      document.getElementById('sfMiniToolbar-' + newToken).style.display = 'none';
                                                                  }
                                                                  /* Handle toolbar-info position */
                                                                  var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block'));
                                                                  for (i = 0; i < toolbarBlocks.length; ++i) {
                                                                      toolbarBlocks[i].onmouseover = function() {
                                                                          var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0];
                                                                          var pageWidth = document.body.clientWidth;
                                                                          var elementWidth = toolbarInfo.offsetWidth;
                                                                          var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
                                                                          var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
                                                                          /* Reset right and left value, useful on window resize */
                                                                          toolbarInfo.style.right = '';
                                                                          toolbarInfo.style.left = '';
                                                                          if (elementWidth > pageWidth) {
                                                                              toolbarInfo.style.left = 0;
                                                                          } else if (leftValue > 0 && rightValue > 0) {
                                                                              toolbarInfo.style.right = (rightValue * -1) + 'px';
                                                                          } else if (leftValue < 0) {
                                                                              toolbarInfo.style.left = 0;
                                                                          } else {
                                                                              toolbarInfo.style.right = '0px';
                                                                          }
                                                                      }
                                                                      ;
                                                                  }
                                                                  addEventListener(document.getElementById('sfToolbarHideButton-' + newToken), 'click', function(event) {
                                                                      event.preventDefault();
                                                                      var p = this.parentNode;
                                                                      p.style.display = 'none';
                                                                      (p.previousElementSibling || p.previousSibling).style.display = 'none';
                                                                      document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block';
                                                                      setPreference('toolbar/displayState', 'none');
                                                                  });
                                                                  addEventListener(document.getElementById('sfToolbarMiniToggler-' + newToken), 'click', function(event) {
                                                                      event.preventDefault();
                                                                      var elem = this.parentNode;
                                                                      if (elem.style.display == 'none') {
                                                                          document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'none';
                                                                          document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none';
                                                                          elem.style.display = 'block';
                                                                      } else {
                                                                          document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
                                                                          document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block';
                                                                          elem.style.display = 'none'
                                                                      }
                                                                      setPreference('toolbar/displayState', 'block');
                                                                  });
                                                                  renderAjaxRequests();
                                                                  addEventListener(document.querySelector('.sf-toolbar-block-ajax'), 'mouseenter', function(event) {
                                                                      var elem = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
                                                                      elem.scrollTop = elem.scrollHeight;
                                                                  });
                                                                  addEventListener(document.querySelector('.sf-toolbar-block-ajax > .sf-toolbar-icon'), 'click', function(event) {
                                                                      event.preventDefault();
                                                                      toggleClass(this.parentNode, 'hover');
                                                                  });
                                                                  var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info');
                                                                  if (null !== dumpInfo) {
                                                                      addEventListener(dumpInfo, 'sfbeforedumpcollapse', function() {
                                                                          dumpInfo.style.minHeight = dumpInfo.getBoundingClientRect().height + 'px';
                                                                      });
                                                                      addEventListener(dumpInfo, 'mouseleave', function() {
                                                                          dumpInfo.style.minHeight = '';
                                                                      });
                                                                  }
                                                              }, function(xhr) {
                                                                  if (xhr.status !== 0) {
                                                                      var sfwdt = document.getElementById('sfwdt' + token);
                                                                      sfwdt.innerHTML = '\                                <div class="sf-toolbarreset">\                                    <div class="sf-toolbar-icon"><svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\                                    An error occurred while loading the web debug toolbar. <a href="\/_profiler\/' + newToken + '>Open the web profiler.</a>\                                </div>\                            ';
                                                                      sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar');
                                                                  }
                                                              }, {
                                                                  maxTries: 5
                                                              });
                                                              return this;
                                                          },
                                                          toggle: function(selector, elOn, elOff) {
                                                              var tmp = elOn.style.display
                                                                , el = document.getElementById(selector);
                                                              elOn.style.display = elOff.style.display;
                                                              elOff.style.display = tmp;
                                                              if (el) {
                                                                  el.style.display = 'none' === tmp ? 'none' : 'block';
                                                              }
                                                              return this;
                                                          },
                                                          createTabs: function() {
                                                              var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
                                                              /* create the tab navigation for each group of tabs */
                                                              for (var i = 0; i < tabGroups.length; i++) {
                                                                  var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
                                                                  var tabNavigation = document.createElement('ul');
                                                                  tabNavigation.className = 'tab-navigation';
                                                                  var selectedTabId = 'tab-' + i + '-0';
                                                                  /* select the first tab by default */
                                                                  for (var j = 0; j < tabs.length; j++) {
                                                                      var tabId = 'tab-' + i + '-' + j;
                                                                      var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
                                                                      var tabNavigationItem = document.createElement('li');
                                                                      tabNavigationItem.setAttribute('data-tab-id', tabId);
                                                                      if (hasClass(tabs[j], 'active')) {
                                                                          selectedTabId = tabId;
                                                                      }
                                                                      if (hasClass(tabs[j], 'disabled')) {
                                                                          addClass(tabNavigationItem, 'disabled');
                                                                      }
                                                                      tabNavigationItem.innerHTML = tabTitle;
                                                                      tabNavigation.appendChild(tabNavigationItem);
                                                                      var tabContent = tabs[j].querySelector('.tab-content');
                                                                      tabContent.parentElement.setAttribute('id', tabId);
                                                                  }
                                                                  tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
                                                                  addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
                                                              }
                                                              /* display the active tab and add the 'click' event listeners */
                                                              for (i = 0; i < tabGroups.length; i++) {
                                                                  tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li');
                                                                  for (j = 0; j < tabNavigation.length; j++) {
                                                                      tabId = tabNavigation[j].getAttribute('data-tab-id');
                                                                      document.getElementById(tabId).querySelector('.tab-title').className = 'hidden';
                                                                      if (hasClass(tabNavigation[j], 'active')) {
                                                                          document.getElementById(tabId).className = 'block';
                                                                      } else {
                                                                          document.getElementById(tabId).className = 'hidden';
                                                                      }
                                                                      tabNavigation[j].addEventListener('click', function(e) {
                                                                          var activeTab = e.target || e.srcElement;
                                                                          /* needed because when the tab contains HTML contents, user can click */
                                                                          /* on any of those elements instead of their parent '<li>' element */
                                                                          while (activeTab.tagName.toLowerCase() !== 'li') {
                                                                              activeTab = activeTab.parentNode;
                                                                          }
                                                                          /* get the full list of tabs through the parent of the active tab element */
                                                                          var tabNavigation = activeTab.parentNode.children;
                                                                          for (var k = 0; k < tabNavigation.length; k++) {
                                                                              var tabId = tabNavigation[k].getAttribute('data-tab-id');
                                                                              document.getElementById(tabId).className = 'hidden';
                                                                              removeClass(tabNavigation[k], 'active');
                                                                          }
                                                                          addClass(activeTab, 'active');
                                                                          var activeTabId = activeTab.getAttribute('data-tab-id');
                                                                          document.getElementById(activeTabId).className = 'block';
                                                                      });
                                                                  }
                                                                  tabGroups[i].setAttribute('data-processed', 'true');
                                                              }
                                                          },
                                                          createToggles: function() {
                                                              var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
                                                              for (var i = 0; i < toggles.length; i++) {
                                                                  var elementSelector = toggles[i].getAttribute('data-toggle-selector');
                                                                  var element = document.querySelector(elementSelector);
                                                                  addClass(element, 'sf-toggle-content');
                                                                  if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
                                                                      addClass(toggles[i], 'sf-toggle-on');
                                                                      addClass(element, 'sf-toggle-visible');
                                                                  } else {
                                                                      addClass(toggles[i], 'sf-toggle-off');
                                                                      addClass(element, 'sf-toggle-hidden');
                                                                  }
                                                                  addEventListener(toggles[i], 'click', function(e) {
                                                                      e.preventDefault();
                                                                      if ('' !== window.getSelection().toString()) {
                                                                          /* Don't do anything on text selection */
                                                                          return;
                                                                      }
                                                                      var toggle = e.target || e.srcElement;
                                                                      /* needed because when the toggle contains HTML contents, user can click */
                                                                      /* on any of those elements instead of their parent '.sf-toggle' element */
                                                                      while (!hasClass(toggle, 'sf-toggle')) {
                                                                          toggle = toggle.parentNode;
                                                                      }
                                                                      var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
                                                                      toggleClass(toggle, 'sf-toggle-on');
                                                                      toggleClass(toggle, 'sf-toggle-off');
                                                                      toggleClass(element, 'sf-toggle-hidden');
                                                                      toggleClass(element, 'sf-toggle-visible');
                                                                      /* the toggle doesn't change its contents when clicking on it */
                                                                      if (!toggle.hasAttribute('data-toggle-alt-content')) {
                                                                          return;
                                                                      }
                                                                      if (!toggle.hasAttribute('data-toggle-original-content')) {
                                                                          toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
                                                                      }
                                                                      var currentContent = toggle.innerHTML;
                                                                      var originalContent = toggle.getAttribute('data-toggle-original-content');
                                                                      var altContent = toggle.getAttribute('data-toggle-alt-content');
                                                                      toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
                                                                  });
                                                                  /* Prevents from disallowing clicks on links inside toggles */
                                                                  var toggleLinks = toggles[i].querySelectorAll('a');
                                                                  for (var j = 0; j < toggleLinks.length; j++) {
                                                                      addEventListener(toggleLinks[j], 'click', function(e) {
                                                                          e.stopPropagation();
                                                                      });
                                                                  }
                                                                  toggles[i].setAttribute('data-processed', 'true');
                                                              }
                                                          },
                                                          createFilters: function() {
                                                              document.querySelectorAll('[data-filters] [data-filter]').forEach(function(filter) {
                                                                  var filters = filter.closest('[data-filters]')
                                                                    , type = 'choice'
                                                                    , name = filter.dataset.filter
                                                                    , ucName = name.charAt(0).toUpperCase() + name.slice(1)
                                                                    , list = document.createElement('ul')
                                                                    , values = filters.dataset['filter' + ucName] || filters.querySelectorAll('[data-filter-' + name + ']')
                                                                    , labels = {}
                                                                    , defaults = null
                                                                    , indexed = {}
                                                                    , processed = {};
                                                                  if (typeof values === 'string') {
                                                                      type = 'level';
                                                                      labels = values.split(',');
                                                                      values = values.toLowerCase().split(',');
                                                                      defaults = values.length - 1;
                                                                  }
                                                                  addClass(list, 'filter-list');
                                                                  addClass(list, 'filter-list-' + type);
                                                                  values.forEach(function(value, i) {
                                                                      if (value instanceof HTMLElement) {
                                                                          value = value.dataset['filter' + ucName];
                                                                      }
                                                                      if (value in processed) {
                                                                          return;
                                                                      }
                                                                      var option = document.createElement('li'), label = i in labels ? labels[i] : value, active = false, matches;
                                                                      if ('' === label) {
                                                                          option.innerHTML = '<em>(none)</em>';
                                                                      } else {
                                                                          option.innerText = label;
                                                                      }
                                                                      option.dataset.filter = value;
                                                                      option.setAttribute('title', 1 === (matches = filters.querySelectorAll('[data-filter-' + name + '="' + value + '"]').length) ? 'Matches 1 row' : 'Matches ' + matches + ' rows');
                                                                      indexed[value] = i;
                                                                      list.appendChild(option);
                                                                      addEventListener(option, 'click', function() {
                                                                          if ('choice' === type) {
                                                                              filters.querySelectorAll('[data-filter-' + name + ']').forEach(function(row) {
                                                                                  if (option.dataset.filter === row.dataset['filter' + ucName]) {
                                                                                      toggleClass(row, 'filter-hidden-' + name);
                                                                                  }
                                                                              });
                                                                              toggleClass(option, 'active');
                                                                          } else if ('level' === type) {
                                                                              if (i === this.parentNode.querySelectorAll('.active').length - 1) {
                                                                                  return;
                                                                              }
                                                                              this.parentNode.querySelectorAll('li').forEach(function(currentOption, j) {
                                                                                  if (j <= i) {
                                                                                      addClass(currentOption, 'active');
                                                                                      if (i === j) {
                                                                                          addClass(currentOption, 'last-active');
                                                                                      } else {
                                                                                          removeClass(currentOption, 'last-active');
                                                                                      }
                                                                                  } else {
                                                                                      removeClass(currentOption, 'active');
                                                                                      removeClass(currentOption, 'last-active');
                                                                                  }
                                                                              });
                                                                              filters.querySelectorAll('[data-filter-' + name + ']').forEach(function(row) {
                                                                                  if (i < indexed[row.dataset['filter' + ucName]]) {
                                                                                      addClass(row, 'filter-hidden-' + name);
                                                                                  } else {
                                                                                      removeClass(row, 'filter-hidden-' + name);
                                                                                  }
                                                                              });
                                                                          }
                                                                      });
                                                                      if ('choice' === type) {
                                                                          active = null === defaults || 0 <= defaults.indexOf(value);
                                                                      } else if ('level' === type) {
                                                                          active = i <= defaults;
                                                                          if (active && i === defaults) {
                                                                              addClass(option, 'last-active');
                                                                          }
                                                                      }
                                                                      if (active) {
                                                                          addClass(option, 'active');
                                                                      } else {
                                                                          filters.querySelectorAll('[data-filter-' + name + '="' + value + '"]').forEach(function(row) {
                                                                              toggleClass(row, 'filter-hidden-' + name);
                                                                          });
                                                                      }
                                                                      processed[value] = true;
                                                                  });
                                                                  if (1 < list.childNodes.length) {
                                                                      filter.appendChild(list);
                                                                      filter.dataset.filtered = '';
                                                                  }
                                                              });
                                                          }
                                                      };
                                                  }
                                                  )();
                                                  Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
                                                      Sfjs.createTabs();
                                                      Sfjs.createToggles();
                                                  });
                                                  /*]]>*/
                                              </script>
                                              <style nonce="9ecbf16788df674cb0a0498cef98987e">
                                                  .sf-minitoolbar {
                                                      background-color: #222;
                                                      border-top-left-radius: 4px;
                                                      bottom: 0;
                                                      box-sizing: border-box;
                                                      display: none;
                                                      height: 36px;
                                                      padding: 6px;
                                                      position: fixed;
                                                      right: 0;
                                                      z-index: 99999;
                                                  }
                                              
                                                  .sf-minitoolbar a {
                                                      display: block;
                                                  }
                                              
                                                  .sf-minitoolbar svg,.sf-minitoolbar img {
                                                      max-height: 24px;
                                                      max-width: 24px;
                                                      display: inline;
                                                  }
                                              
                                                  .sf-toolbar-clearer {
                                                      clear: both;
                                                      height: 36px;
                                                  }
                                              
                                                  .sf-display-none {
                                                      display: none;
                                                  }
                                              
                                                  .sf-toolbarreset * {
                                                      box-sizing: content-box;
                                                      vertical-align: baseline;
                                                      letter-spacing: normal;
                                                      width: auto;
                                                  }
                                              
                                                  .sf-toolbarreset {
                                                      background-color: #222;
                                                      bottom: 0;
                                                      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
                                                      color: #EEE;
                                                      font: 11px Arial, sans-serif;
                                                      left: 0;
                                                      margin: 0;
                                                      padding: 0 36px 0 0;
                                                      position: fixed;
                                                      right: 0;
                                                      text-align: left;
                                                      text-transform: none;
                                                      z-index: 99999;
                                                      direction: ltr;
                                                      /* neutralize the aliasing defined by external CSS styles */
                                                      -webkit-font-smoothing: subpixel-antialiased;
                                                      -moz-osx-font-smoothing: auto;
                                                  }
                                              
                                                  .sf-toolbarreset abbr {
                                                      border: dashed #777;
                                                      border-width: 0 0 1px;
                                                  }
                                              
                                                  .sf-toolbarreset svg,.sf-toolbarreset img {
                                                      height: 20px;
                                                      width: 20px;
                                                      display: inline-block;
                                                  }
                                              
                                                  .sf-toolbarreset .hide-button {
                                                      background: #444;
                                                      display: block;
                                                      position: absolute;
                                                      top: 0;
                                                      right: 0;
                                                      width: 36px;
                                                      height: 36px;
                                                      cursor: pointer;
                                                      text-align: center;
                                                  }
                                              
                                                  .sf-toolbarreset .hide-button svg {
                                                      max-height: 18px;
                                                      margin-top: 10px;
                                                  }
                                              
                                                  .sf-toolbar-block {
                                                      cursor: default;
                                                      display: block;
                                                      float: left;
                                                      height: 36px;
                                                      margin-right: 0;
                                                      white-space: nowrap;
                                                      max-width: 15%;
                                                  }
                                              
                                                  .sf-toolbar-block > a,.sf-toolbar-block > a:hover {
                                                      display: block;
                                                      text-decoration: none;
                                                      color: inherit;
                                                  }
                                              
                                                  .sf-toolbar-block span {
                                                      display: inline-block;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-value {
                                                      color: #F5F5F5;
                                                      font-size: 13px;
                                                      line-height: 36px;
                                                      padding: 0;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-label,.sf-toolbar-block .sf-toolbar-class-separator {
                                                      color: #AAA;
                                                      font-size: 12px;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info {
                                                      border-collapse: collapse;
                                                      display: table;
                                                      z-index: 100000;
                                                  }
                                              
                                                  .sf-toolbar-block hr {
                                                      border-top: 1px solid #777;
                                                      margin: 4px 0;
                                                      padding-top: 4px;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece {
                                                      /* this 'border-bottom' trick is needed because 'margin-bottom' doesn't work for table rows */
                                                      border-bottom: solid transparent 3px;
                                                      display: table-row;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece-additional,.sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
                                                      display: none;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-group {
                                                      margin-bottom: 4px;
                                                      padding-bottom: 2px;
                                                      border-bottom: 1px solid #333333;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-group:last-child {
                                                      margin-bottom: 0;
                                                      padding-bottom: 0;
                                                      border-bottom: none;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
                                                      padding: 2px 5px;
                                                      margin-bottom: 0;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status + .sf-toolbar-status {
                                                      margin-left: 4px;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece:last-child {
                                                      margin-bottom: 0;
                                                  }
                                              
                                                  div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece a {
                                                      color: #99CDD8;
                                                      text-decoration: underline;
                                                  }
                                              
                                                  div.sf-toolbar .sf-toolbar-block a:hover {
                                                      text-decoration: none;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece b {
                                                      color: #AAA;
                                                      display: table-cell;
                                                      font-size: 11px;
                                                      padding: 4px 8px 4px 0;
                                                  }
                                              
                                                  .sf-toolbar-block:not(.sf-toolbar-block-dump) .sf-toolbar-info-piece span {
                                                      color: #F5F5F5;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info-piece span {
                                                      font-size: 12px;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info {
                                                      background-color: #444;
                                                      bottom: 36px;
                                                      color: #F5F5F5;
                                                      display: none;
                                                      padding: 9px 0;
                                                      position: absolute;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-info:empty {
                                                      visibility: hidden;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-status {
                                                      display: inline-block;
                                                      color: #FFF;
                                                      background-color: #666;
                                                      padding: 3px 6px;
                                                      margin-bottom: 2px;
                                                      vertical-align: middle;
                                                      min-width: 15px;
                                                      min-height: 13px;
                                                      text-align: center;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-status-green {
                                                      background-color: #4F805D;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-status-red {
                                                      background-color: #B0413E;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-status-yellow {
                                                      background-color: #A46A1F;
                                                  }
                                              
                                                  .sf-toolbar-block.sf-toolbar-status-green {
                                                      background-color: #4F805D;
                                                      color: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-block.sf-toolbar-status-red {
                                                      background-color: #B0413E;
                                                      color: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-block.sf-toolbar-status-yellow {
                                                      background-color: #A46A1F;
                                                      color: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-status {
                                                      color: #FFF;
                                                      display: inline-block;
                                                      font-size: 14px;
                                                      height: 36px;
                                                      line-height: 36px;
                                                      padding: 0 10px;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-info-piece a {
                                                      text-decoration: none;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-info-piece a:hover {
                                                      text-decoration: underline;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-redirection-status {
                                                      font-weight: normal;
                                                      padding: 2px 4px;
                                                      line-height: 18px;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-info-piece span.sf-toolbar-redirection-method {
                                                      font-size: 12px;
                                                      height: 17px;
                                                      line-height: 17px;
                                                      margin-right: 5px;
                                                  }
                                              
                                                  .sf-toolbar-block-ajax .sf-toolbar-icon {
                                                      cursor: pointer;
                                                  }
                                              
                                                  .sf-toolbar-status-green .sf-toolbar-label,.sf-toolbar-status-yellow .sf-toolbar-label,.sf-toolbar-status-red .sf-toolbar-label {
                                                      color: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-status-green svg path,.sf-toolbar-status-green svg .sf-svg-path,.sf-toolbar-status-red svg path,.sf-toolbar-status-red svg .sf-svg-path,.sf-toolbar-status-yellow svg path,.sf-toolbar-status-yellow svg .sf-svg-path {
                                                      fill: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-block-config svg path,.sf-toolbar-block-config svg .sf-svg-path {
                                                      fill: #FFF;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-icon {
                                                      display: block;
                                                      height: 36px;
                                                      padding: 0 7px;
                                                      overflow: hidden;
                                                      text-overflow: ellipsis;
                                                  }
                                              
                                                  .sf-toolbar-block-request .sf-toolbar-icon {
                                                      padding-left: 0;
                                                      padding-right: 0;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-icon img,.sf-toolbar-block .sf-toolbar-icon svg {
                                                      border-width: 0;
                                                      position: relative;
                                                      top: 8px;
                                                      vertical-align: baseline;
                                                  }
                                              
                                                  .sf-toolbar-block .sf-toolbar-icon img + span,.sf-toolbar-block .sf-toolbar-icon svg + span {
                                                      margin-left: 4px;
                                                  }
                                              
                                                  .sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-value {
                                                      margin-left: 4px;
                                                  }
                                              
                                                  .sf-toolbar-block:hover,.sf-toolbar-block.hover {
                                                      position: relative;
                                                  }
                                              
                                                  .sf-toolbar-block:hover .sf-toolbar-icon,.sf-toolbar-block.hover .sf-toolbar-icon {
                                                      background-color: #444;
                                                      position: relative;
                                                      z-index: 10002;
                                                  }
                                              
                                                  .sf-toolbar-block-ajax.hover .sf-toolbar-info {
                                                      z-index: 10001;
                                                  }
                                              
                                                  .sf-toolbar-block:hover .sf-toolbar-info,.sf-toolbar-block.hover .sf-toolbar-info {
                                                      display: block;
                                                      padding: 10px;
                                                      max-width: 480px;
                                                      max-height: 480px;
                                                      word-wrap: break-word;
                                                      overflow: hidden;
                                                      overflow-y: auto;
                                                  }
                                              
                                                  .sf-toolbar-info-piece b.sf-toolbar-ajax-info {
                                                      color: #F5F5F5;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests {
                                                      table-layout: auto;
                                                      width: 100%;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests td {
                                                      background-color: #444;
                                                      border-bottom: 1px solid #777;
                                                      color: #F5F5F5;
                                                      font-size: 12px;
                                                      padding: 4px;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests tr:last-child td {
                                                      border-bottom: 0;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests th {
                                                      background-color: #222;
                                                      border-bottom: 0;
                                                      color: #AAA;
                                                      font-size: 11px;
                                                      padding: 4px;
                                                  }
                                              
                                                  .sf-ajax-request-url {
                                                      max-width: 250px;
                                                      line-height: 9px;
                                                      overflow: hidden;
                                                      text-overflow: ellipsis;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests .sf-ajax-request-url a {
                                                      text-decoration: none;
                                                  }
                                              
                                                  .sf-toolbar-ajax-requests .sf-ajax-request-url a:hover {
                                                      text-decoration: underline;
                                                  }
                                              
                                                  .sf-ajax-request-duration {
                                                      text-align: right;
                                                  }
                                              
                                                  .sf-ajax-request-loading {
                                                      animation: sf-blink .5s ease-in-out infinite;
                                                  }
                                              
                                                  @keyframes sf-blink {
                                                      0% {
                                                          background: #222;
                                                      }
                                              
                                                      50% {
                                                          background: #444;
                                                      }
                                              
                                                      100% {
                                                          background: #222;
                                                      }
                                                  }
                                              
                                                  .sf-toolbar-block.sf-toolbar-block-dump .sf-toolbar-info {
                                                      max-width: none;
                                                      width: 100%;
                                                      position: fixed;
                                                      box-sizing: border-box;
                                                      left: 0;
                                                  }
                                              
                                                  .sf-toolbar-block-dump pre.sf-dump {
                                                      background-color: #222;
                                                      border-color: #777;
                                                      border-radius: 0;
                                                      margin: 6px 0 12px 0;
                                                  }
                                              
                                                  .sf-toolbar-block-dump pre.sf-dump:last-child {
                                                      margin-bottom: 0;
                                                  }
                                              
                                                  .sf-toolbar-block-dump pre.sf-dump .sf-dump-search-wrapper {
                                                      margin-bottom: 5px;
                                                  }
                                              
                                                  .sf-toolbar-block-dump pre.sf-dump span.sf-dump-search-count {
                                                      color: #333;
                                                      font-size: 12px;
                                                  }
                                              
                                                  .sf-toolbar-block-dump .sf-toolbar-info-piece {
                                                      display: block;
                                                  }
                                              
                                                  .sf-toolbar-block-dump .sf-toolbar-info-piece .sf-toolbar-file-line {
                                                      color: #AAA;
                                                      margin-left: 4px;
                                                  }
                                              
                                                  .sf-toolbar-block-dump .sf-toolbar-info img {
                                                      display: none;
                                                  }
                                              
                                                  /* Responsive Design */
                                                  .sf-toolbar-icon .sf-toolbar-label,.sf-toolbar-icon .sf-toolbar-value {
                                                      display: none;
                                                  }
                                              
                                                  .sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label {
                                                      display: inline-block;
                                                  }
                                              
                                                  /* Legacy Design - these styles are maintained to make old panels look   a bit better on the new toolbar */
                                                  .sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
                                                      color: #AAA;
                                                      font-size: 12px;
                                                  }
                                              
                                                  .sf-toolbar-status-green .sf-toolbar-info-piece-additional-detail,.sf-toolbar-status-yellow .sf-toolbar-info-piece-additional-detail,.sf-toolbar-status-red .sf-toolbar-info-piece-additional-detail {
                                                      color: #FFF;
                                                  }
                                              
                                                  @media (min-width: 768px) {
                                                      .sf-toolbar-icon .sf-toolbar-label, .sf-toolbar-icon .sf-toolbar-value {
                                                          display: inline;
                                                      }
                                              
                                                      .sf-toolbar-block .sf-toolbar-icon img, .sf-toolbar-block .sf-toolbar-icon svg {
                                                          top: 6px;
                                                      }
                                              
                                                      .sf-toolbar-block-time .sf-toolbar-icon svg, .sf-toolbar-block-memory .sf-toolbar-icon svg {
                                                          display: none;
                                                      }
                                              
                                                      .sf-toolbar-block-time .sf-toolbar-icon svg + span, .sf-toolbar-block-memory .sf-toolbar-icon svg + span {
                                                          margin-left: 0;
                                                      }
                                              
                                                      .sf-toolbar-block .sf-toolbar-icon {
                                                          padding: 0 10px;
                                                      }
                                              
                                                      .sf-toolbar-block-time .sf-toolbar-icon {
                                                          padding-right: 5px;
                                                      }
                                              
                                                      .sf-toolbar-block-memory .sf-toolbar-icon {
                                                          padding-left: 5px;
                                                      }
                                              
                                                      .sf-toolbar-block-request .sf-toolbar-icon {
                                                          padding-left: 0;
                                                          padding-right: 0;
                                                      }
                                              
                                                      .sf-toolbar-block-request .sf-toolbar-label {
                                                          margin-left: 5px;
                                                      }
                                              
                                                      .sf-toolbar-block-request .sf-toolbar-status + svg {
                                                          margin-left: 5px;
                                                      }
                                              
                                                      .sf-toolbar-block-request .sf-toolbar-icon svg + .sf-toolbar-label {
                                                          margin-left: 0;
                                                      }
                                              
                                                      .sf-toolbar-block-request .sf-toolbar-label + .sf-toolbar-value {
                                                          margin-right: 10px;
                                                      }
                                              
                                                      .sf-toolbar-block-request:hover .sf-toolbar-info {
                                                          max-width: none;
                                                      }
                                              
                                                      .sf-toolbar-block .sf-toolbar-info-piece b {
                                                          font-size: 12px;
                                                      }
                                              
                                                      .sf-toolbar-block .sf-toolbar-info-piece span {
                                                          font-size: 13px;
                                                      }
                                              
                                                      .sf-toolbar-block-right {
                                                          float: right;
                                                          margin-left: 0;
                                                          margin-right: 0;
                                                      }
                                                  }
                                              
                                                  @media (min-width: 1024px) {
                                                      .sf-toolbar-block .sf-toolbar-info-piece-additional, .sf-toolbar-block .sf-toolbar-info-piece-additional-detail {
                                                          display: inline;
                                                      }
                                              
                                                      .sf-toolbar-block .sf-toolbar-info-piece-additional:empty, .sf-toolbar-block .sf-toolbar-info-piece-additional-detail:empty {
                                                          display: none;
                                                      }
                                                  }
                                              
                                                  /***** Error Toolbar *****/
                                                  .sf-error-toolbar .sf-toolbarreset {
                                                      background: #222;
                                                      color: #f5f5f5;
                                                      font: 13px/36px Arial, sans-serif;
                                                      height: 36px;
                                                      padding: 0 15px;
                                                      text-align: left;
                                                  }
                                              
                                                  .sf-error-toolbar .sf-toolbarreset svg {
                                                      height: auto;
                                                  }
                                              
                                                  .sf-error-toolbar .sf-toolbarreset a {
                                                      color: #99cdd8;
                                                      margin-left: 5px;
                                                      text-decoration: underline;
                                                  }
                                              
                                                  .sf-error-toolbar .sf-toolbarreset a:hover {
                                                      text-decoration: none;
                                                  }
                                              
                                                  .sf-error-toolbar .sf-toolbarreset .sf-toolbar-icon {
                                                      float: left;
                                                      padding: 5px 0;
                                                      margin-right: 10px;
                                                  }
                                              
                                                  /***** Media query print: Do not print the Toolbar. *****/
                                                  @media print {
                                                      .sf-toolbar {
                                                          display: none;
                                                      }
                                                  }
                                              </style>
                                              <script nonce="ac5f1a47d1068dac891ccbd663d86ef6">
                                                  /*<![CDATA[*/
                                                  (function() {
                                                      Sfjs.loadToolbar('0239e8');
                                                  }
                                                  )();
                                                  /*]]>*/
                                              </script>
                                              </body></html>
                                              



                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                20 novembre 2019 à 13:32:42

                                                Tu as un console.log(newForm) dans ton JavaScript, qu'est-ce que cela te retourne ?

                                                Il n'y a pas d'erreurs JavaScript non plus ?

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  20 novembre 2019 à 13:34:10

                                                  <fieldset class="form-group"><legend class="col-form-label required">Catégorie n°1</legend><div id="formulaire_champsForms_0" class="my-selector"><div class="form-group"><label for="formulaire_champsForms_0_champNom" class="required">Champ nom</label><input type="text" id="formulaire_champsForms_0_champNom" name="formulaire[champsForms][0][champNom]" required="required" class="form-control" /></div></div></fieldset>
                                                  il me donne sa j'avais essayé tout a l'heure de debuger le truc et non pas d'erreur javascript
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    20 novembre 2019 à 14:57:22

                                                    OK, ça pourrait bien être un "bête" souci de HTML mal formé. Tu ouvres le formulaire dans un div.col-lg-1.5, mais tu fermes ce même div juste après avoir affiché le premier champ. Pareil pour la fermeture qui est dans un div.col-lg1.5, mais pas le même. Alors fait surprenant, Chrome et Firefox dans ce cas prennent tous les champs de la page, tant qu'ils étaient dans le DOM au départ, et les envoient lors de la soumission.

                                                    Sors les ouverture et fermeture du formulaire de ces div.col-lg-1.5, le HTML sera déjà plus valide et ça ira mieux.

                                                    -
                                                    Edité par Ymox 20 novembre 2019 à 15:05:11

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      20 novembre 2019 à 15:04:30

                                                      c'est bon sa fonctionne merci beaucoup pour ton aide Ymox
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        20 novembre 2019 à 15:06:04

                                                        N'oublie pas de signaler tes sujets comme résolus quand ils le sont. Tu as un bouton en haut de page à droite du titre de sujet pour ce faire.

                                                        Edit

                                                        Héhé  ^^

                                                        -
                                                        Edité par Ymox 20 novembre 2019 à 15:06:20

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          20 novembre 2019 à 15:09:43

                                                          Encore merci pour le temps que tu m'as accordé
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          Problème d'envoie de donnée via un formulaire

                                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                          • Editeur
                                                          • Markdown