Problemas con el path de Symfony 2.7 en JS

Estoy usando rutas con path en JavaScript pero no me funciona. Les adjunto el codigo :

$('#enlaceEliminar').on('click', function(){
        var id = $(this).attr('name');
 
        $.post("{{path('backend_admin_crudRemov')}}",
        {id: id},
            function(response){
                if(response.code == 100 && response.success){//dummy check
                   alert("entroool");
                }
            }, "json");
    });

Todo funciona bien pero al llegar al {{path('backend_admin_crudRemov')}} genera error no se como se debe proceder yo uso symfony 2.7 soy nuevo con este framework saludos.

Respuestas

Este tipo de código suelen ser más complicados de lo que parecen. El motivo es que estás mezclando "backend" con "frontend". La parte {{path('backend_admin_crudRemov')}} es la que procesa Symfony (mediante la plantilla Twig). El resto lo procesa el navegador mediante JavaScript.

Puedes hacer las siguientes comprobaciones:

La página que se entrega al navegador debe contener una cadena de texto en lugar de {{ path('backend_admin_crudRemov') }}
Es cadena de texto debe ser la URL asociada a la ruta backend_admin_crudRemov.

También puedes comprobar si la ruta backend_admin_crudRemov existe. Para ello, en la consola de comandos ejecutas lo siguiente:

$ php app/console debug:router backend_admin_crudRemov

@javiereguiluz

29 enero 2016, 17:16

que tal @javiereguiluz gracias por responder la ruta si existe :

[router] Route "backend_admin_crudRemov"
Name         backend_admin_crudRemov
Path         /admin/crudGrupoRemov
Path Regex   #^/admin/crudGrupoRemov$#s
Host         ANY
Host Regex
Scheme       ANY
Method       ANY
Class        Symfony\Component\Routing\Route
Defaults     _controller: BackendBundle:Mantenimiento:crudGrupoRemov
Requirements NO CUSTOM
Options      compiler_class: Symfony\Component\Routing\RouteCompiler

mi router es :

backend_admin_crudRemov:
    path:     /admin/crudGrupoRemov
    defaults: { _controller: BackendBundle:Mantenimiento:crudGrupoRemov }

te dejo la imagen del error http://imageshack.com/a/img921/9335/I7JB9B.png

@OXRL

29 enero 2016, 18:49

Hola @OXRL, ese javascript lo tienes en una archivo .twig o en un .js?

@manuel_j555

29 enero 2016, 19:08

Que tal @manuel_j555 lo tengo en un js.

@OXRL

29 enero 2016, 19:21

Muy bueno el comentario de @manuel_j555. Para que te funcione, el archivo tiene que tener la extensión .twig.js y no solo .js

@javiereguiluz

29 enero 2016, 19:25

Por cierto, perdón por la auto-publicidad tan descarada, pero veo que tu aplicación es un CRUD. Si no es muy complicada, puede interesarte usar el bundle EasyAdminBundle que he creado para hacer backends sencillos para aplicaciones Symfony.

@javiereguiluz

29 enero 2016, 19:27

@javiereguiluz jeje ya he de probar ese bundle, y si ya le cambie a .twig.js pero nada sigue el mismo error que frustración :(

@OXRL

29 enero 2016, 19:50

Es que no es tan simple, ya que el js debe ser parseado por twig para que se compile de la forma correcta.

@OXRL, lo que yo aplico para estos casos es lo siguiente:

Creo un link o boton para la opción de eliminar y le doy su href (si es un link) usando twig:

<a class="enlaceEliminar" href="{{ path("ruta", {id: objeto.id}) }}">...</a>

Con esto logro que el enlace ya tenga el link de la forma correcta. Luego en el js hago algo como lo siguiente:

$(".encaleEliminar").on("click", function(e){
   e.preventDefault(); // Evito que la pagina se recargue.
 
   // como this es el link, tengo acceso al atributo href directamente
   $.get(this.href).done(function(response){ 
      //  Proceso respuesta.
   });
});

Con eso el javascript no necesita generar el path, y el id ya viene incluido en el path del href del link.

Por otro lado, si necesitas que el id se envíe por POST, puedes hacer algo como:

<a class="enlaceEliminar" href="{{ path("ruta") }}" data-id="{{ objeto.id }}">...</a>
<!-- Guardo el id en un atributo data-id -->

Ahora leemos el valor del id desde el atributo:

$(".encaleEliminar").on("click", function(e){
   e.preventDefault(); // Evito que la pagina se recargue.
 
   // como this es el link, tengo acceso al atributo href directamente
   $.post(this.href, { id: $(this).data('id') }).done(function(response){ 
      //  Proceso respuesta.
   });
});

Espero te sirva, saludos!

@manuel_j555

29 enero 2016, 21:16

@manuel_j555 maestro me solucionó el problema gracias tremenda explicación ya me funcionó muchísimas gracias. @javiereguiluz gracias por su tiempo y también por la colaboración. :)

Saludos.

@OXRL

29 enero 2016, 21:42

#10

Hola @OXRL,

La forma en que soluciono este tipo de problema es usando el FOSJsRoutingBundle

Es muy sencillo de usar y facilita mucho la vida, aquí dejo un ejemplo de como lo uso.

En los parámetros de la ruta dentro de las anotaciones del controlador le coloco expose.

/**
     * Finds and displays a Category entity.
     *
     * @Route("/{slug}", name="category_show", options={"expose"=true})
     * @Method("GET")
     * @param Category $entity
     *
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function showAction(Category $entity)

Y dentro de la vista coloco el Routing.generate('nombreDeLaRuta', {'parametroKey': valor})

$.ajax({
                url: Routing.generate('ajax_product_name', {'code': $product}),
            }).done(function (data) {
 
                $('#row_detail_' + $index).find('div').text(data.name);
 
            });

Eso es todo, espero sea de ayuda.

@miguelplazasr

5 febrero 2016, 18:21

#11

Yo lo soluciono de la misma manera que @miguelplazasr y en verdad que es demasiado sencillo, porque lo que hace el Bundle es precisamente emular la funcion path de twig en javascript.

Pruebalo y veras lo sencillo que es.

Saludos desde Chile.

@SebaRiquelmeP

13 febrero 2016, 4:51