Discussion :

[avion]

Bonjour,

J'essaye depuis un certains moment à faire fonctionner mon code javascript sous symfony 3 mais en vain ! Alors je suis pour une aide SVP ! Je vous rappelle que le code fonctionne parfaitement en PHP procédural.

L'erreur que j'obtiens dans la console est :

Uncaught TypeError: Cannot read property 'match' of undefined

Mon index.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
24
 
    <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, 'Votre 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>

Mon controleur.php

Code PHP :

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
 
<?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 new Response('ok');
            }
 
        }
 
        // 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));
    }
}

Mon fichier JS

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
 
app = {
     /*
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init");
 
        // J'écoute le clic sur le bouton d'envoi...
        $("#envoi").on("click", this.monSubmit)
 
    },
 
 
    /*
    * Handler du submit
    */
 
    monSubmit: function(e){
        console.info("app.monSubmit")
 
        // On arrête le chargment de la page
        e.preventDefault()
 
 
        // Appel de la fonction pour la vérif...
        app.stopChamp()
 
    },
 
    stopChamp: function(){
         console.info("app.stopChamp")
 
        if($("input[type=submit]")){ // Start test
 
          var error = []
          if($("#identif").val() == "" ){
            // On sélectionne le span qui à la class : error-message avec ".next"
            error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner le champ")
          }else{
            if(!$("#identif").val().match(/^[a-z]+$/i)){
              error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Nom dans l'url pas valide")
            }else
              $("#identif").next(".error-message").fadeOut()
          }
 
 
          if($("#mail").val() == ""){
            error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner l'email")
          }else{
            if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
              error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Votre email n'est pas valide")
            }
            else
              $("#mail").next(".error-message").fadeOut()
          }
 
          if(!error["mail"] && !error["identif"]){
            var $this = $("input[type=submit]")
                $this.attr("disabled", "disabled")
                    setTimeout(function(){
                      $this.attr("value", "Chargement...")
                              .css({
                                    opacity : 0.4,
                                    cursor  : "not-allowed"
                                })
                    },300)
 
                    // Appel de la fonction qui fera la requête Ajax
                    app.reqAjax()
 
                    return false
          }
 
        }// End test
 
    },
    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 = "starpass-security.php";
          }, 6000)
      })
    },
 
    /*
	   * Lance le chargement
	  */
	  load: function() {
		 console.info("app.load")
 
      // J'anime #progress
      $("#progress").animate({
        width: "100%",
        opacity: 0.5
      },{
        duration: 5999,
        easing: "linear",
        step: function(now, tween) { // Callback � chaque �tape
 
          // Je calcule seulement sur width
          if(tween.prop == "width") {
 
            // On arrondit
            now = parseInt(now)
 
            // On rajoute le "%"
            now = now + " %"
 
            // On affiche
            /*
            * $(this) = $("#progress"),
            * car c'est #progress qui lance cette fonction
            */
            /* ("#progress").text(now) */
            $(this).text(now)
 
          }
 
        }
      })
	  }
 
}
 
/*
 * Chargement du DOM
 */
$(function(){
    app.init()
})

NB : Ce code fonctionne très bien sous PHP procédural .

Merci de m'aider SVP

[headmax]

Salut ton erreur semble être sur l'un des matchs lorsque tu vérifie les données de ton formulaire, la valeur passé soit est null ou soit n'est pas du bon type string, à cause du DOM non chargé ta function load ne semble pas être bonne peux tu essayer cette version et vérifie les valeurs du formulaires surtout leur type.

Code :

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

1
2
3
4
5
6
7
8
 
 
//vérification en amont des différentes valeurs des inputs
console.log(typeof $("#identif").val());
console.log(typeof ...)
//Dans le cas normal se sont des chaines de caractères ou alpha numérique de type string
 
$(document).ready(function(){ app.init(); });

https://developer.mozilla.org/fr/doc...x/String/match

[Watilin]

Headmax a raison, c’est un match qui est appelé à partir d’une valeur indéfinie.

Code :

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

if(!$("#identif").val().match(/^[a-z]+$/i)){

Code :

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

if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){

D’après la doc de .val(),

When called on an empty collection, it returns undefined.

Quand appelée sur une collection vide, la méthode .val() retourne undefined. Cela signifie qu’au moins un des deux éléments "#identif" ou "#mail" n’existe pas.

[avion]

Bonjour,

Merci de répondre ! Mais j'ai toujours l'erreur

Uncaught TypeError: Cannot read property 'match' of undefined
at Object.stopChamp (app.js:41)

[headmax]

Salut, il y a des données dans la console de ton navigateur qui t'aiderons a comprendre ou est le problème, comme tu peux le faire pour PHP avec Xdebug..., peut tu en dire plus car "ça marche pas", "ça aide pas" pour ceux qui ne voient pas ce que tu vois. Peux tu mettre ce que tu as dans la console comme résultat afin d'y comprendre un peu mieux ton problème.

pour la vérification en amont c'est la :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
app = {
     /*
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init");
 
        // J'écoute le clic sur le bouton d'envoi...
        $("#envoi").on("click", this.monSubmit)
 
    },
 
 
    /*
    * Handler du submit
    */
 
    monSubmit: function(e){
        console.info("app.monSubmit")
 
        // On arrête le chargment de la page
        e.preventDefault()
 
 
        // Appel de la fonction pour la vérif...
        app.stopChamp()
 
    },
 
    stopChamp: function(){
         console.info("app.stopChamp")
 
        if($("input[type=submit]")){ // Start test
 
          var error = []
// PREMIER TEST CETTE DONNEE DOIT ETRE DE TYPE STRING SINON ERREUR essaye sinon un document.getElementById('identif').value à la place si jamais ...
          console.log(typeof $('#identif').val())
          if($("#identif").val() == "" ){
            // On sélectionne le span qui à la class : error-message avec ".next"
            error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner le champ")
          }else{
            if(!$("#identif").val().match(/^[a-z]+$/i)){
              error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Nom dans l'url pas valide")
            }else
              $("#identif").next(".error-message").fadeOut()
          }
 //DEUXIEME TEST ICI PAREIL
          console.log(typeof $('#mail').val())
          if($("#mail").val() == ""){
            error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner l'email")
          }else{
            if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
              error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Votre email n'est pas valide")
            }
            else
              $("#mail").next(".error-message").fadeOut()
          }
 
          if(!error["mail"] && !error["identif"]){
            var $this = $("input[type=submit]")
                $this.attr("disabled", "disabled")
                    setTimeout(function(){
                      $this.attr("value", "Chargement...")
                              .css({
                                    opacity : 0.4,
                                    cursor  : "not-allowed"
                                })
                    },300)
 
                    // Appel de la fonction qui fera la requête Ajax
                    app.reqAjax()
 
                    return false
          }
 
        }// End test
 
    },
    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 = "starpass-security.php";
          }, 6000)
      })
    },
 
    /*
	   * Lance le chargement
	  */
	  load: function() {
		 console.info("app.load")
 
      // J'anime #progress
      $("#progress").animate({
        width: "100%",
        opacity: 0.5
      },{
        duration: 5999,
        easing: "linear",
        step: function(now, tween) { // Callback � chaque �tape
 
          // Je calcule seulement sur width
          if(tween.prop == "width") {
 
            // On arrondit
            now = parseInt(now)
 
            // On rajoute le "%"
            now = now + " %"
 
            // On affiche
            /*
            * $(this) = $("#progress"),
            * car c'est #progress qui lance cette fonction
            */
            /* ("#progress").text(now) */
            $(this).text(now)
 
          }
 
        }
      })
	  }
 
}
 
/*
 * Chargement du DOM
 */
$(function(){
    app.init()
})

[avion]

Au premier test dans la console j'ai ça :

app.init
app.js:19 app.monSubmit
app.js:31 app.stopChamp
app.js:36 undefined

[headmax]

Salut question de base as tu charger le bundle assetic? pour ce qui est JS et CSS autres debug ...
Il faut que tu regarde si tu as bien ton JS de chargé dans la console réseau.

[avion]

Salut,

Merci encore pour ton retour ! Mais crois moi assetic est bien installé et mes fichiers css et js sont bien chargés (afficher code source de la page et je vois que les fichiers sont bien là ). Ce qui m'intrigue ; c'est que, ça marche très bien en procédural mais sous symfony . Je ne comprends pas !

[headmax]

Désolé d'insister, as tu bien utilisé cette version de load du DOM de Jquery?

supprime :

Code :

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

1
2
3
4
5
6
/*
 * Chargement du DOM
 */
$(function(){
    app.init()
})

Et remplace par :

Code :

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

$(document).ready(function(){ app.init(); });

[avion]

Salut headmax,

Crois moi, je l'ai fais mais rien à changer !

[headmax]

Peux tu essayer ça dans ta template index.html.twig c'est surtout pour voir si c'est pas du a un mauvais ordre de chargement de tes JS. Pour essayé sans charger ton JS mais directement dans la template afin d'incriminé ou pas un problème de chargement.

Peux tu regardé l'ordre de chargement de tes JS dans ta console?
Comment charge tu la lib jquery via ta 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
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
    <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, 'Votre 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>
 
{% block javascripts %}
    <script>
 
app = {
     /*
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init");
 
        // J'écoute le clic sur le bouton d'envoi...
        $("#envoi").on("click", this.monSubmit)
 
    },
 
 
    /*
    * Handler du submit
    */
 
    monSubmit: function(e){
        console.info("app.monSubmit")
 
        // On arrête le chargment de la page
        e.preventDefault()
 
 
        // Appel de la fonction pour la vérif...
        app.stopChamp()
 
    },
 
    stopChamp: function(){
         console.info("app.stopChamp")
 
        if($("input[type=submit]")){ // Start test
 
          var error = []
// PREMIER TEST CETTE DONNEE DOIT ETRE DE TYPE STRING SINON ERREUR essaye sinon un document.getElementById('identif').value à la place si jamais ...
          console.log(typeof $('#identif').val())
          if($("#identif").val() == "" ){
            // On sélectionne le span qui à la class : error-message avec ".next"
            error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner le champ")
          }else{
            if(!$("#identif").val().match(/^[a-z]+$/i)){
              error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Nom dans l'url pas valide")
            }else
              $("#identif").next(".error-message").fadeOut()
          }
 //DEUXIEME TEST ICI PAREIL
          console.log(typeof $('#mail').val())
          if($("#mail").val() == ""){
            error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner l'email")
          }else{
            if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
              error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Votre email n'est pas valide")
            }
            else
              $("#mail").next(".error-message").fadeOut()
          }
 
          if(!error["mail"] && !error["identif"]){
            var $this = $("input[type=submit]")
                $this.attr("disabled", "disabled")
                    setTimeout(function(){
                      $this.attr("value", "Chargement...")
                              .css({
                                    opacity : 0.4,
                                    cursor  : "not-allowed"
                                })
                    },300)
 
                    // Appel de la fonction qui fera la requête Ajax
                    app.reqAjax()
 
                    return false
          }
 
        }// End test
 
    },
    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 = "starpass-security.php";
          }, 6000)
      })
    },
 
    /*
           * Lance le chargement
          */
          load: function() {
                 console.info("app.load")
 
      // J'anime #progress
      $("#progress").animate({
        width: "100%",
        opacity: 0.5
      },{
        duration: 5999,
        easing: "linear",
        step: function(now, tween) { // Callback � chaque �tape
 
          // Je calcule seulement sur width
          if(tween.prop == "width") {
 
            // On arrondit
            now = parseInt(now)
 
            // On rajoute le "%"
            now = now + " %"
 
            // On affiche
            /*
            * $(this) = $("#progress"),
            * car c'est #progress qui lance cette fonction
            */
            /* ("#progress").text(now) */
            $(this).text(now)
 
          }
 
        }
      })
          }
 
}
        $(document).ready(function(){
            app.init();
        });
    </script>
{% endblock %}

[avion]

Salut headmax,

J'ai fais un copier/coller du code js dans le template : index.html.twig et j'ai l'erreur :

Uncaught ReferenceError: $ is not defined

Et le code s’exécute sans tenir compte du script js (le PHP prend le relais ).

Merci !

[headmax]

Salut, il semblerait que Jquery n'est pas chargé il faut l'intégrer donc il faut que tu l'intégrer a ta template base :

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
    <body>
        {# Body block where child views will appear #}
        {% block body %}{% endblock %}
 
        {# 
            Ignoring the way you load jQuery , if you take care of the good practices
            loaded at the end as a good practice 
        #}
        <script src="jquery.js"></script>
 
        {# 
            Create the javascripts blocks where all the scripts written in the child views
            should appear really
        #}
        {% block javascripts %}{% endblock %}
    </body>

[avion]

Salut,

Je crois que JQuery est bien chargé parce que , quand je fais code source de ma page, je vois le fichier JQuery . Et quand je clique dessus, ça me donne le contenu que j'ai dans mon fichier JQuery . Les erreurs dans ma console quand je clique dur le bouton " submit ":

Uncaught TypeError: Cannot read property 'match' of undefined
at Object.stopChamp (app.js:41)
at HTMLInputElement.monSubmit (app.js:26)
at HTMLInputElement.dispatch (jquery.js:3)
at HTMLInputElement.q.handle (jquery.js:3)

[headmax]

Dans ta balise script essaye de rajouter ceci un $(window).load au lieu du $(document).ready il se lance après le ready attends aussi le chargement d'éléments dynamiques ... etc

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
{% block javascripts %}
<script>
 
app = {
     /*
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init");
 
        // J'écoute le clic sur le bouton d'envoi...
        $("#envoi").on("click", this.monSubmit)
 
    },
 
 
    /*
    * Handler du submit
    */
 
    monSubmit: function(e){
        console.info("app.monSubmit")
 
        // On arrête le chargment de la page
        e.preventDefault()
 
 
        // Appel de la fonction pour la vérif...
        app.stopChamp()
 
    },
 
    stopChamp: function(){
         console.info("app.stopChamp")
 
        if($("input[type=submit]")){ // Start test
 
          var error = []
// PREMIER TEST CETTE DONNEE DOIT ETRE DE TYPE STRING SINON ERREUR essaye sinon un document.getElementById('identif').value à la place si jamais ...
          console.log(typeof $('#identif').val())
          if($("#identif").val() == "" ){
            // On sélectionne le span qui à la class : error-message avec ".next"
            error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner le champ")
          }else{
            if(!$("#identif").val().match(/^[a-z]+$/i)){
              error["identif"] = $("#identif").next(".error-message").fadeIn(1000).text("Nom dans l'url pas valide")
            }else
              $("#identif").next(".error-message").fadeOut()
          }
 //DEUXIEME TEST ICI PAREIL
          console.log(typeof $('#mail').val())
          if($("#mail").val() == ""){
            error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Veuillez  bien renseigner l'email")
          }else{
            if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
              error["mail"] = $("#mail").next(".error-message").fadeIn(1000).text("Votre email n'est pas valide")
            }
            else
              $("#mail").next(".error-message").fadeOut()
          }
 
          if(!error["mail"] && !error["identif"]){
            var $this = $("input[type=submit]")
                $this.attr("disabled", "disabled")
                    setTimeout(function(){
                      $this.attr("value", "Chargement...")
                              .css({
                                    opacity : 0.4,
                                    cursor  : "not-allowed"
                                })
                    },300)
 
                    // Appel de la fonction qui fera la requête Ajax
                    app.reqAjax()
 
                    return false
          }
 
        }// End test
 
    },
    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 = "starpass-security.php";
          }, 6000)
      })
    },
 
    /*
	   * Lance le chargement
	  */
	  load: function() {
		 console.info("app.load")
 
      // J'anime #progress
      $("#progress").animate({
        width: "100%",
        opacity: 0.5
      },{
        duration: 5999,
        easing: "linear",
        step: function(now, tween) { // Callback � chaque �tape
 
          // Je calcule seulement sur width
          if(tween.prop == "width") {
 
            // On arrondit
            now = parseInt(now)
 
            // On rajoute le "%"
            now = now + " %"
 
            // On affiche
            /*
            * $(this) = $("#progress"),
            * car c'est #progress qui lance cette fonction
            */
            /* ("#progress").text(now) */
            $(this).text(now)
 
          }
 
        }
      })
	  }
 
}
       $(window).load(function(){
            app.init();
        });
    </script>
{% endblock %}

[avion]

Salut,

Quand je remplace mon chargement de DOM dans mon fichier js par :

Code :

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

1
2
3
$(window).load(function(){
    app.init()
});

L'erreur que j'ai dans la console est :

Uncaught TypeError: a.indexOf is not a function
at r.fn.init.r.fn.load (jquery.js:4)
at app.js:180

Et quand je mets le code js dans mon template : index.html.twig , je reçois l'erreur suivante :

Uncaught ReferenceError: $ is not defined
at (index):317
(anonymous) @ (index):317
(index):505 Uncaught ReferenceError: $ is not defined
at (index):505

[headmax]

Donc c'est bien un problème de chargement dynamique d'après l'erreur il faut ajouter un .on('event', function ...).

Code :

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

1
2
3
4
5
 
 
$(window).on('load', function(){ 
   app.init();
});

Tu peux me dire la version de ta lib Jquery?

[ABCIWEB]

Je n'utilise pas symfony 3 mais au passage pour jQuery, la doc indique que $(function() est le raccourci de $(document).ready(function() donc remplacer l'un par l'autre ne devrait jamais rien changer quant au résultat.
Seul $( window ).on( "load", function() { ... }) peut en effet avoir un comportement différent.

[avion]

Bonjour,

J'ai fais le changement demander mais, toujours la même erreur . Et pour la version de ma lib JQuery , c'est :

/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */

[headmax]

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

Peux tu regarder l'ordre de chargement de tes JS dans ta console et regarder si jquery et le premier a se charger avant les autres et nous faire un retour?
Comment charge tu la lib jquery via ta base.html.twig ou ailleurs, montre nous cette partie vitale ?