javascript et symfony 3

**avion** · 05/12/2017, 00h09

Salut,

Mon fichier base.html.twig :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body id="{% block body_id %}{% endblock %}">
 
        {% block header %}
            <div id='header'>
                <h1><a href="{{path('home')}}">Home</a></h1>
            </div>
        {% endblock %}
 
        <div id="container">
            {% block main %}{% endblock %}
 
            {% block footer %}
                <div id='footer'>
                    <p> &copy; {{ "now"|date("Y") }} <a href="{{path('home')}}">Home</a> - Tous droits réservés. </p>
                </div>
            {% endblock %}
        </div>
 
        {% block javascripts %}
            <script src="{{ asset('js/jquery.js') }}"></script>
            <script src="{{ asset('js/app.js') }}"></script>
        {% endblock %}
    </body>

**Watilin** · 26/12/2017, 18h48

Je ne sais pas si tu auras beaucoup de réponses en cette période de fêtes.

Personnellement je ne peux pas t’aider, je ne connais pas suffisamment Twig. Mais je pense que tu auras de plus grandes chances d’obtenir de l’aide si tu réponds aux questions de headmax

Envoyé par headmax

Je réitère m'a question dont tu n'a pas répondu :

Envoyé par headmax

Peux tu regardé l'ordre de chargement de tes JS dans ta console?
Comment charge tu la lib jquery via ta base.html.twig ?

**avion** · 12/03/2018, 01h51

Salut,

La réponse à la question de headmax (Déjà répondu mais bon ...) est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body id="{% block body_id %}{% endblock %}">
 
        {% block header %}
            <div id='header'>
                <h1><a href="{{path('home')}}">Home</a></h1>
            </div>
        {% endblock %}
 
        <div id="container">
            {% block main %}{% endblock %}
 
            {% block footer %}
                <div id='footer'>
                    <p> &copy; {{ "now"|date("Y") }} <a href="{{path('home')}}">Home</a> - Tous droits réservés. </p>
                </div>
            {% endblock %}
        </div>
 
        {% block javascripts %}
            <script src="{{ asset('js/jquery.js') }}"></script>
            <script src="{{ asset('js/app.js') }}"></script>
        {% endblock %}
    </body>

**headmax** · 12/03/2018, 11h21

Salut,

La réponse à la question de headmax (Déjà répondu mais bon ...) est :

Tu réponds malheureusement encore à côté, je parle dans ta console l'ordre des JS (F12 les JS seulement dans l'ordre de leur chargement). ou montre moi si le site est en ligne la page en question ça t'évitera de l'analyser toi même.

Pourquoi cette question, imagine toi ton script js auquel tu fait appel a du Jquery se charge avant. Se qui rend ton script inutilisable car la lib jquery nécessaire ce charge après donc ton script ne pourra fonctionner.

Nom : Capture d'écran de 2018-03-12 11-14-36.png
Affichages : 338
Taille : 240,6 Ko

Nom : Capture d'écran de 2018-03-12 11-14-36.png
Affichages : 338
Taille : 240,6 Ko

**avion** · 14/03/2018, 12h38

Bonjour ,

Merci encore headmax, de répondre ! L'ordre de chargement du DOM :

Code :

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

1
2
3
 
jquery.js	200	script	app_dev.php:145	(from memory cache)	0 ms	
app.js	200	script	app_dev.php:146	(from memory cache)	0 ms

Nom : Capture-dev.PNG
Affichages : 366
Taille : 213,9 Ko

Le script n'est pas en ligne .

**Loralina** · 14/03/2018, 17h22

Bonjour,
Je n'ai pas lu en détail la discussion, ni analysé de près.
Je tente un peu au hasard :

Je pense que tout est chargé dans le bon ordre vu que le bouton fonctionne.
Que donne l'inspecteur au niveau de l'attribut id des champs ?

En effet, je vois ceci dans le code :

Envoyé par avion

{{ form_widget(form.identif, {'attr': {'id': 'identif', 'name' : "identif", 'placeholder' : 'alouette.mignonne'}}) }}

Si je tape sur google "form_widget id", je vois plusieurs sujets disant qu'on ne peut pas définir un id ainsi :
https://stackoverflow.com/questions/...ribute-in-twig

**avion** · 14/03/2018, 17h33

L'ID c'est celui donné au champ pour le css .

**Loralina** · 14/03/2018, 17h49

Oui, mais cet id est également utilisé au niveau du js.

Pour avoir confirmation : dans l'inspecteur du navigateur (F12), vous voyez bien dans le code html écrit id="identif" ?
Regardez cela avant de cliquer sur le bouton.
En outre, dans la balise, vous ne voyez pas un deuxième attribut id qui serait prioritaire ?

**avion** · 14/03/2018, 20h09

Sincèrement , je ne vois pas trop ! Mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   <div id="form">
        {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
            <div class ="identif">
                {{ form_label(form.identif, 'ID', {'label_attr': {'for': 'identif'}}) }}
                <span class="error" title="This field is required" > *</span>
                {{ form_widget(form.identif, {'attr': {'id': 'identif', 'name' : 'identif', 'placeholder' : 'alouette.mignonne'}}) }}
                <span class="error-message">error</span>
                {{ form_errors(form.identif) }}
            </div>
 
             <div class ="mail">
                {{ form_label(form.mail, 'Email', {'label_attr': {'for': 'mail'}}) }}
                <span class="error" title="This field is required" > *</span>
                {{ form_widget(form.mail, {'attr': {'id': 'mail', 'name' : 'mail', 'placeholder' : 'Ex: mignonne@hotmail.fr'}}) }}
                <span class="error-message">error</span>
                 {{ form_errors(form.mail) }}
            </div>
 
            <div class ="sender">
                <input type="submit" id="envoi" value="Continuer ..."/>
            </div>
        {{ form_end(form) }}
    </div>

L'erreur que provoque le script :

Uncaught TypeError: Cannot read property 'match' of undefined

**NoSmoking** · 14/03/2018, 21h23

Bonjour,
à toutes fins utiles il existe un Forum Symfony, sinon il faudrait que tu nous mettes le code HTML généré, Ctrl + U sur la plupart des navigateurs, c'est d'ailleurs toujours un excellent réflexe que de vérifier si ce que l'on obtient est ce que l'on veut.

**avion** · 14/03/2018, 22h16

Bonjour,

Tout le code (NoSmoking) est au début du topic, jetez y un coup d'œil svp !

**Loralina** · 14/03/2018, 22h43

Bonsoir,
Tout d'abord une précision ici :

En outre, dans la balise, vous ne voyez pas un deuxième attribut id qui serait prioritaire ?

Si jamais y a deux id (un généré automatiquement par Symfony et un autre qui est celui vous avez spécifié), c'est dans le code source généré qu'on le verra et non l'inspecteur.

Peu importe, l'important est de voir l'id qui est dans l'inspecteur.
Appuyez sur la touche F12 de votre navigateur et déroulez si besoin l'arborescence pour repérer les balises des éléments input afin de voir quel est leur id.
Vous pouvez même faire un clic droit sur un champ pour l'inspecter et accéder ainsi plus directement à son code html.

Tout le code (NoSmoking) est au début du topic, jetez y un coup d'œil svp !

Je n'utilise pas Symfony, mais de ce que je devine rapidement, le code html que vous nous montrez est remanié sur le serveur suite à cette instruction :

Code :

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

return $this->render('home/index.html.twig', array('form' => $formView));

Ce genre de lignes :

Code :

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

{{ form_widget(form.identif, {'attr': {'id': 'identif', 'name' : "identif", 'placeholder' : 'alouette.mignonne'}}) }}

est sans doute remplacé par du vrai html.

Pourquoi ne testez-vous pas ce qui est écrit dans l'un des liens que j'ai indiqués :
https://stackoverflow.com/questions/...ribute-in-twig

**avion** · 16/03/2018, 01h52

Bonsoir,

Merci de répondre Mr ! Loralina, vous n'avez pas tord , il y a un id qui est généré au dépend de mon id :

Code html :

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

<input type="email" id="appbundle_user_mail" name="appbundle_user[mail]" required="required" placeholder="Ex: mignonne@hotmail.fr">

Code html :

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

<input type="text" id="appbundle_user_identif" name="appbundle_user[identif]" required="required" placeholder="alouette.mignonne">

Merci encore mais juste savoir, comment faire pour que mon id soit pris en compte ? Et comment faire marcher mon JS ?

**NoSmoking** · 17/03/2018, 18h10

Visiblement ton environnement ajoute un radical à tes ID, appbundle_user_.

Code :

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

{{ form_widget(form.identif, {'attr': {'id': 'identif', 'name' : "identif", 'placeholder' : 'alouette.mignonne'}}) }}

devient

Code html :

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

<input type="text" id="appbundle_user_identif" name="appbundle_user[identif]" required="required" placeholder="alouette.mignonne">

tu dois pouvoir cibler l'élément via un sélecteur

Code :

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

var oElem = querySelector("[id$='identif'");

**Loralina** · 18/03/2018, 10h34

Bonjour,

Envoyé par avion

comment faire pour que mon id soit pris en compte ?

Ben c'est ce que j'ai indiqué, certains mettent l'id comme ceci :

Code :

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

1
2
{{ form_widget(form.identif, {'id': 'identif', 'attr': {'name' : "identif", 'placeholder' : 'alouette.mignonne'}}) }}
{{ form_widget(form.mail, {'id': 'mail', 'attr': {'name' : 'mail', 'placeholder' : 'Ex: mignonne@hotmail.fr'}}) }}

Et comment faire marcher mon JS ?

Le problème vient très probablement des id qui ne sont pas reconnus.
Si ce que j'indique ne passe pas, il faudra modifier le ciblage dans le js (ou mieux chercher comment imposer son id).

**avion** · 20/03/2018, 03h19

Bonjour,

Encore merci de répondre ! Mon code marche Loralina, j'ai fais les modifs comme vous l'aviez montrer et ça marche ! Merci mille fois. Mais voilà, j'ai encore un soucis . Les données ne sont enregistrées en base de donnée et la redirection vers la page souhaité dans mon js se fait mais, j'ai l'erreur :

No route found for "GET /raton.html.twig" (from "http://localhost/......app_dev.php/")

Je vous met mes scripts au cas où vous avez une idée !

Mon controller :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<?php
 
namespace AppBundle\Controller\Home;
 
use AppBundle\Entity\User;
use AppBundle\Form\UserType;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
 
 
 
 
class LayoutController extends Controller{
 
    /**
     * @Route("/", name="home")
     * @param Request $request
     * @return Response
     */
    public function indexAction(Request $request)
    {
        // On crée l'User
        $user = new User();
 
        // On récupère le formulaire
        $form = $this->createForm(UserType::class, $user);
 
        $form->handleRequest($request);
 
        // Si le formulaire a été soumi
        if ($form->isSubmitted() && $form->isValid())
        {
            if($request->isXmlHttpRequest()){
                $em = $this->getDoctrine()->getManager();
                $em->persist($user);
                $em->flush();
 
                return $this->render('pal/raton.html.twig');
            }
        }
 
 
        // On génère l'HTML du formulaire
        $formView = $form->createView();
 
        // On rend la Vue
        return $this->render('home/index.html.twig', array('form' => $formView));
    }
 
    /**
      *@Route("raton", name="raton")
      */
       public function ratonAction(){
           return $this->render('pal/raton.html.twig');
      }
 
}

Mon JS (la partie où ça coince):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
reqAjax: function(){
       console.info("app.reqAjax")
 
       // On récupère l'url et le type
		   //var url  = this.action
			var url  = "{{path('home')}}"
 
      // On récupère les infos (identif et mail)
	    var data = $(".form").serialize()
 
      // On fait la requête
      $.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: data,
        beforeSend:function(){
          $('#envoi').val('Patientez...').fadeIn("slow")
        },
        success: app.showSuccess()
 
      })
 
    },
 
    showSuccess: function(body,statut){
       console.info("app.showSuccess")
 
       // On crée la div qui servira de griser le fond....
       var popup = $("<div>",{
         class: "test",
        css:{
          background: "rgba(0,0,0,.8)",
		      width: "100%",
		      height: "100%",
          position: "fixed",
          top: 0,
          left: 0,
         "z-index": 1
        }
       })
 
      // On ajoute la DIV (grisée) au body
      $("body").append(popup)
 
      // On l'a fait apparaitre après quelques sécondes...
      popup.fadeTo(600, 0.5, function () {
        // On fait apparaitre le POPUP ,après quelques sécondes...
        $(".recupPopup").fadeIn(4000)
 
           // Je lance le chargement
          app.load()
 
          setTimeout(function(){
            window.location.href = "raton.html.twig"
          }, 6000)
      })
    },

Merci !

**NoSmoking** · 20/03/2018, 18h37

Mais voilà, j'ai encore un soucis .

Là cela n'a plus rien à voir avec JavaScript !!!

d'ailleurs, au final, pas grand chose n'a à voir avec JavaScript dans cette discussion !

**avion** · 20/03/2018, 22h15

Bonjour à tous,

Merci encore pour vos aides ! NoSmoking, idée m'aiderait beaucoup svp .

**Loralina** · 21/03/2018, 17h09

Bonjour,
Je fais une réponse très vague car, comme j'ai dit, je n'utilise pas Symfony.

J'ai fait une petite recherche et je comprends ceci :
Ce genre de message "No route found for..." semble être en lien avec un fichier "routes.yaml" qui est dans un dossier "config".

Dans ce fichier de configuration, on peut associer, par exemple, une URL à une méthode d'une classe php.
Le message d'erreur doit signifier que le serveur n'arrive pas à faire le lien entre l'url et le fichier à appeler car il ne trouve pas la correspondance dans "routes.yaml".

Ensuite, je vois que vous essayez de faire window.location.href = "raton.html.twig".
L'erreur semble liée à cette redirection.
Est-ce pertinent/possible de faire une redirection directement sur un fichier twig ?
Ne devriez-vous pas plutôt appeler une adresse que le serveur va aiguiller grâce au fichier "routes.yaml" vers un script php qui va retourner une version html de ce fichier twig via une fonction comme render ?

A moins qu'il n'y ait une configuration du serveur permettant d'effectuer ce genre d'appels directs (comme s'il retournait une sorte de version en cache ou qu'il savait quel script php appeler).
Je suppose que vous savez ce que vous faîtes.

**avion** · 22/03/2018, 00h57

Bonjour,

J'ai changé la redirection comme ça :

Code :

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

window.location.href = "{{ path('rat', {'name':'raton'}) }}

Il redirige bien mais les données ne sont pas envoyées en base de donnée . Et faut, loralina , vous ne faites pas symfony mais vous faites quoi comme langage ? Parce que vous vous connaissez très bien !

javascript et symfony 3

JavaScript

Discussions similaires

Partager

Partager