ROUTE ET AJAX

Version imprimable

ROUTE ET AJAX

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:

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:

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:

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

29/09/2015, 09h40
jejeman

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

Code:

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:

{{ path('valider_password') }}

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

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

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:

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

29/09/2015, 11h06
Nico_F

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

+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:

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();
            }
        });
...

29/09/2015, 14h32
yvancoyaud

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.
29/09/2015, 15h25
jejeman

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:

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 ?

Récapitulons
dans app/config/routing.yml

Code:

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:

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:

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 ???

29/09/2015, 23h25
MehrezLabidi
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:

1 2 3 4 5 if ($request->isXmlHttpRequest()) { /// return .. }
N'oublie pas de voir l'onglet network , si il ya un 200 .

Cdt,Mehrez
29/09/2015, 23h55
MehrezLabidi
Quand même rajoute ça
Code:

1 2 3 4 5 requirements: _method: POST|GET options: expose: true
Si tu utilise la version 2.7 ou plus récente
30/09/2015, 09h22
Nico_F

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.
30/09/2015, 10h27
jejeman

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:

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...
30/09/2015, 12h39
jejeman

Je pense à autre chose, as-tu vérifié avec firebug que tu n'as pas une erreur de javascript ?
04/10/2015, 01h38
yvancoyaud

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.:lol:
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