Discussion :

[avion]

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]

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

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

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]

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]

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.

[avion]

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

Le script n'est pas en ligne .

[Loralina]

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 :

{{ 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]

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

[Loralina]

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]

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: [email protected]'}}) }}
                <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]

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]

Bonjour,

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

[Loralina]

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]

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: [email protected]">

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]

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]

Bonjour,

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: [email protected]'}}) }}

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]

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]

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]

Bonjour � tous,

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

[Loralina]

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]

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 !