ROUTE ET AJAX

**yvancoyaud** · 29/09/2015, 03h06

Bonjour,
J'ai un petit problème de compréhension, voire de syntaxe.

dans "app\config\routing.yml" j'ai défini la route suivante

Code :

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

1
2
3
4
5
6
 
valider_password:
    pattern: /{idPw}
    defaults: { _controller: AppliBundle:PasswordSite:ValiderPassword }
    requirements:
        _method: POST

dans "src\AppliBundle\Controller\PasswordSite.php" j'ai le controller suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
// src/AppliBundle/Controller/PasswordSite.php
namespace AppliBundle\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
 
class PasswordSite extends Controller
{
    public function ValiderPasswordAction(idPw) {
        return new Response('OK');
    }
}

et quelque part dans l'application j'ai un fichier javascript qui affiche une petite form et qui voudrait bien faire de l'Ajax avec le controller défini ci-dessus.
La form à 2 champs ayant comme identificateur 'inputNom' et 'inputPw' et un bouton. Quand je clic sur le bouton j'ai le code suivant :

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
 
.....
	var ident = $("#inputNom").val();
        var pw    = $("#inputPw").val();
        var DATA = 'ident='+ident+',pw='+pw;
        $.ajax({
            type: "POST",
            url: "{{ path('xxxxxxxxxxxxxxx') }}",
            data: DATA,
            cache: false,
            success: function(data){
                $("#imgAttend").hide();
 
            }
....

Que faut-il mettre à la place des xxxxxx pour que mon contrôleur soit appelé et que je recupère 'OK' dans le data de "success: function(data)".

Merci de vos réponses
YC

**jejeman** · 29/09/2015, 09h40

Salut,
Déjà dans ton controlleur, pense à vérifier que ta requete vient bien de l'ajax avec

Code :

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

if ($request->isXmlHttpRequest()) {...

Ensuite, dans le javascriot, à la place des XXXX il faut que tu mettes la route vers ton controller, donc quelque chose du genre avec twig

Code :

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

{{ path('valider_password') }}

Et pour les "data" que tu envoies fais en un tableau json ce sera plus facile à décortiquer dans le controller...

**yvancoyaud** · 29/09/2015, 10h34

Merci pour ta réponse,
mais j'ai déjà essayé cette syntaxe

Code :

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

1
2
3
4
5
6
7
8
9
        $.ajax({
            type: "POST",
            url: "{{ path('valider_password') }}",
            data: DATA,
            cache: false,
            success: function(data){
                $("#imgAttend").hide();
            }
        });

et ça ne fonctionne pas.
Pour etre sur que je passe dans le controller j'ai mis un var_dump et un die.

Code :

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

1
2
3
4
5
6
7
class PasswordSite extends Controller
{
    public function ValiderPasswordAction($idPw) {
        var_dump($idPw); die;
        return new Response($idPw);
    }
}

Je pense que c'est un problème de route.
Comment tester ça ????

Pour tes autres conseils j'avais effectivement prévu de les mettre en application, mais avant il faut au moins que j'atteigne le contrôleur ....
Vers où dois-je orienter mes recherche

**Nico_F** · 29/09/2015, 11h06

Est-ce que tu es dans un fichier javascript ? Si c'est le cas tu n'as pas accès à twig, et donc tu peux oublier {{ path('whatever') }}.
Je te suggère l'utilisation d'un bundle qui te permettra d'exposer tes routes au javascript. => https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

**jejeman** · 29/09/2015, 11h18

+1 pour Nico, dans le javascript tu n'as pas accès à twig.
Une autre solution toute simple avec twig et javascript, dans ton twig tu crées une balise div qui contient ta route et tu l'apelles dans le javascript
Comme ça :

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
 
<div id="path_adr" data-path="{{ path('valider_password') }}"></div>
<script type="text/javascript">
    function maFonction()){
        var path = $("#path_adr").attr("data-path");
        $.ajax({
            type: "POST",
            url: path,
            data: DATA,
            cache: false,
            success: function(data){
                $("#imgAttend").hide();
            }
        });
...

**yvancoyaud** · 29/09/2015, 14h32

Merci pour vos réponses.

jejeman, ta solution est simple, mais ne fonctionne pas chez moi.
Dans la variable "path", j'ai "app_dev"+Le pattern de la route, et ça passé au paramètre url de la fonction $.Ajax, ne suffit pas a atteindre le contrôleur.
D'ailleurs, est-ce que quelqu’un pourrait me dire ce qu'il devrait y avoir dans le paramètre url de la fonction $.Ajax pour que je puisse le mettre en dur et voir si ça marche.

Je vais aussi jeter un coup d’œil à FOSJsRoutingBundle. J'espère que ce n'est pas trop complique.

**jejeman** · 29/09/2015, 15h25

Dans ton parametre url tu dois avoir la route qui permet d'atteindre ton controller
Imaginons que ton url de ta page est http://localhost/app_dev.php/ID
dans ton cas ça doit être quelque chose du genre :

Code :

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

url :/app_dev.php/ID

avec ID qui correspond au {idPw} tel que définit dans la route
As-tu vérifié tes routes avec router:debug ?
Quand tu mets ta route dans la balise <div> tu as quoi comme route ?

**yvancoyaud** · 29/09/2015, 21h50

Récapitulons
dans app/config/routing.yml

Code :

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

1
2
3
4
5
6
7
8
9
10
appli:
    resource: "@AppliBundle/Resources/config/routing.yml"
    prefix:   /
... dautres routes
 
valider_password:
    pattern: /{idPw}
    defaults: { _controller: AppliBundle:PasswordSite:ValiderPassword }
    requirements:
        _method: POST

dans le fichier index.html.twig qui sera affiché et qui appellera la fonction javascript d'où sera fait l'appel AJax

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
....
    <p id="item-title">&nbsp;</p>
    <div id="path_valider_password" data-path="{{ path('valider_password',{idPw:'AAAAAA'}) }}"></div>
{% endblock %}
.....
<script type="text/javascript">
    $(document).ready(function() {
        var divTooltip =null;
	.....
        var path=$("#path_valider_password").attr("data-path");
        // alert(path) ---> affiche "/app_dev.php/AAAAAA"
        $.ajax({
            type: "POST",
            url: path,
            data: DATA,
            cache: false,
            success: function(data){
                $("#imgAttend").hide();
            }
        });

et le contrôleur dans src/AppliBundle/Controller/PasswordSite.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// src/Application/AccueilBundle/Controller/PasswordSite.php
namespace AppliBundle\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;
class PasswordSite extends Controller
{
    public function ValiderPasswordAction($idPw) {
        var_dump($idPw); die;
        return new Response('$idPw');
    }
}

A l’exécution je devrais donc avoir un var_dump et un arrêt de l’exécution.
mais ça ne marche pas !!
J'ai raté quoi ???

**MehrezLabidi** · 29/09/2015, 23h25

On peut avoir plusieurs causes dans ce cas .
As-tu utilisé le bundle https://github.com/FriendsOfSymfony/...s/doc/index.md indispensable pour des ajax call .
As-tu appelé un fichier JQuery dans la vue en question ?
Exemple de Bundle utilisant ajax et JQuery https://github.com/FriendsOfSymfony/...s_on_a_page.md

As tu mis dans ton action

Code :

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

1
2
3
4
5
 
  if ($request->isXmlHttpRequest()) {
                         ///
      return ..
   }

N'oublie pas de voir l'onglet network , si il ya un 200 .

Cdt,Mehrez

**MehrezLabidi** · 29/09/2015, 23h55

Quand même rajoute ça

Code :

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

1
2
3
4
5
 
    requirements:
        _method:  POST|GET
    options:
        expose: true

Si tu utilise la version 2.7 ou plus récente

**Nico_F** · 30/09/2015, 09h22

Est-ce que ta route est accessible sans que tu passes par l'Ajax ? (commençons par ça)
Pour vérifier ça, retire le requirement POST, met un point d'arrêt au début de ton action, et accèdes-y en tapant l'URL directement dans ta barre d'adresse.

Si tu prends une 404, il est possible que le fichier de routing ne soit pas pris en compte : pour vérifier ça, une commande existe dans la console pour debug tes routes (un truc du genre php app/console router:debug)

Je t'invite également à ouvrir la web debug toolbar, section Routing, qui elle montrera le cheminement pour atteindre ta route et le matching éventuel.

Une fois que tu as localisé le problème, la technique de jejeman, bien que peu recommandée, devrait fonctionner puisque dans l'attribut url de la méthode AJAX tu devrais pouvoir te contenter d'une URI (/app_dev.php/###/### ...) correspondant au pattern de ta route valider_password.

Une fois que tu auras fait fonctionner ça, libre à toi de te tourner ou non vers le bundle FosJsRouting qui t'offre une manière plus propre d'utiliser des routes dans ton javascript.

**jejeman** · 30/09/2015, 10h27

D'accord avec Nico et comme je t'ai dit, d'abord avec la console vérifie que ta route est bien prise en compte par symfony

Code :

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

app/console router:debug

Ensuite un moyen simple est de rentrer directement l'URL de ta route dans ton navigateur et voir si tu atterris bien dans ton controller...
Et si ça marche, ma méthode avec jquery et utiliser une balise div est simpliste et permet de tester, après à toi de faire mieux avec par exemple le bundle FOSJSRouting, mais avant d'arriver là, il faut au moins que ta route fonctionne...

**jejeman** · 30/09/2015, 12h39

Je pense à autre chose, as-tu vérifié avec firebug que tu n'as pas une erreur de javascript ?

**yvancoyaud** · 04/10/2015, 01h38

Me revoilà ....

J'ai tout remis à plat, car à force de faire des petites modifs dans tous les sens on arrive vite à pourrir le code !!!!
Ensuite j'ai commencé par vérifier ma route directement à partir du navigateur, comme l'a suggérer Nico_F, et là j'ai trouvé un petit bug qui m’empêchait d'atteindre mon contrôleur. J'ai employé la méthode de jejeman pour définir ma route dans le html et tout roule.

Maintenant je vais regarder de plus prés FOSJSRouting histoire de rester dans les bonnes pratiques.

En tout cas, merci à tous pour votre aide précieuse.
YC

ROUTE ET AJAX [2.x]

Symfony PHP

Discussions similaires

Partager

Partager