Bonjour a tous et merci d'avance pour votre aide
je suis confronter a un soucis sous symfony 2.8, j'ai besoin de réalisé un menu avec ajax et j'ai donc decidé d'utilisé angular coté js.
mais je suis confronté a un problème que je ne comprends pas! Quand je lance la page d'acceuil dans la console j'obtient ce message d'erreur
"GET http://localhost/aaaaaaaaaaaaaaaaaa/web/app_dev.php/js/routing?callback=fos.Router.setData" error 500 qui correspond a cette ligne que j'ai dans mon layout de base : <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
ce qui entraine que lors du déclenchement de l'appel ajax j'obtient comme message d'erreur déclenché par la methode Routing.generate : "angular.js:13550 Error: The route "ym_vitrine_submenu" does not exist."
quand je fixe l'url du controlleur en dur j'obtiens ce message obscur pour moi "Provisional headers are shown" et dans le panneau reseau je vois que l'appel a été annuler (canceled)
pourtant lorsque je lance la commande php app/console fos:js-routing:dump j'obtient bien comme reponse:
| ym_vitrine_submenu | POST|GET | ANY | ANY | /ajax-sub-menu/{idCategory} |
noté que j'ai installé FosJsRoutingBundle via composer et je pense bien qu'il ne s'agit pas de la version master qui semblait instable selon ce que j'ai pu lire sur le sujet.
voici mon code:
le service js:
le routing.yml
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 yolka.service('yolkaMenu', ['config','dao','utils', function(config, dao, utils){ var menu = { categorie : null, subMenu:[], breadcrumb:'', showMenuZone:false, currentSubMenu:-1, showImage: false, getSubMenu: getSubCategory, }; var task = null; function getSubCategory(idCategory){ var task = {action: utils.waiting(0),isFinished:false}; var controllerUrl = Routing.generate('ym_vitrine_submenu'); //var controllerUrl = '/monSite/web/app_dev.php/ajax-sub-menu'; console.log(controllerUrl); var promise = task.action.promise; promise = promise.then(function(){ //task = dao.getData('','',controllerUrl,'','',data); /*return promise.then(function(data){ if(data.err == 0){ //return listeZone = data.data; console.log(data); }else{// gestion d'erreur console.log(data); } });*/ task = dao.getData('', '', controllerUrl,'',idCategory,''); return task.promise; }); promise.then(function(result){ console.log(result); if(result.err == 0){ menu.niveau_0 = result.data; }else{ menu.niveau_0 = null; } }); } function getMenu(){ return menu; } return { getMenu : getMenu, } }]);
le routing.yml du dossier app
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 ym_vitrine_soldes: path: /soldes/{categorie} defaults: { _controller: YMVitrineBundle:Ecommerce:soldes, categorie : ''} ym_vitrine_submenu: path: /ajax-sub-menu/{idCategory} defaults: { _controller: YMVitrineBundle:Commons:ajaxSubMenu } requirements: idCategory: '\d+' _method: POST|GET options: expose: true
le config
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 ym_vitrine: resource: "@YMVitrineBundle/Resources/config/routing.yml" prefix: / fos_js_routing: resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"
le layout
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 fos_js_routing: routes_to_expose: [ ym_vitrine_submenu ] cache_control: # All are optional, defaults shown public: false # can be true (public) or false (private) maxage: null # integer value, e.g. 300 smaxage: null # integer value, e.g. 300 expires: null # anything that can be fed to "new \DateTime($expires)", e.g. "5 minutes" vary: [] # string or array, e.g. "Cookie" or [ Cookie, Accept ] nelmio_cors: defaults: allow_credentials: false allow_origin: ['*'] allow_headers: ['X-Custom-Auth'] allow_methods: ['POST', 'PUT', 'GET', 'DELETE'] expose_headers: [] max_age: 3600 hosts: [] origin_regex: false paths: '^/api/': allow_origin: ['*'] allow_headers: ['X-Custom-Auth'] allow_methods: ['POST', 'PUT', 'GET', 'DELETE'] max_age: 3600 '^/': origin_regex: true allow_origin: ['^http://localhost:[0-9]+'] allow_headers: ['X-Custom-Auth'] allow_methods: ['POST', 'PUT', 'GET', 'DELETE'] max_age: 3600 hosts: ['^api\.']
la methode du 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 <!DOCTYPE html> <html lang="fr" ng-app="yolka"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% block title %}yolka-meubles{% endblock %}</title> {# On charge le CSS de bootstrap depuis le site directement a utiliser en prod#} <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,600,700,400italic' rel='stylesheet' type='text/css'>--> {% block stylesheets %} <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> {% stylesheets filter='cssrewrite' 'bundles/YMVitrine/css/fontello.css' 'bundles/YMVitrine/css/template.css' 'bundles/YMVitrine/css/animate.css' 'bundles/YMVitrine/css/radio-checkbox.css' %} <link rel="stylesheet" href="{{ asset_url }}" type="text/css" /> {% endstylesheets %} {% endblock %} </head> <body> <section id="wrapper"> <!-- debut du conteneur de l'entete--> <section id="header"> {% block header %} {% endblock %} </section> <section id="content"> {% block body %} {% endblock %} </section> <section id="footer"> {% block footer %} {% endblock %} </section> </section> </body> {% block javascripts %} <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script> <script type="text/javascript" src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script> <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script> {% endblock %} </html>
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 public function ajaxSubMenu($idCategory, Request $request){ if($request->isXmlHttpRequest()){ // on recupere le repository $this->_repository = $this->getEntityManager()->getRepository('YMAdminBundle:Category'); //on recupere la category $category = $this->_repository->find($idCategory); //on recupere toutes l'arborecences $subCategorie = $this->_repository->getChildrens($category->getBg(),$category->getBd()); //return $this->render(''); // Créons nous-mêmes la réponse en JSON, grâce à la fonction json_encode() $response = new Response(json_encode(array('status'=>0, 'data'=>$subCategorie))); // Ici, nous définissons le Content-type pour dire au navigateur // que l'on renvoie du JSON et non du HTML $response->headers->set('Content-Type', 'application/json'); return $response; } }
Partager