[SOLUCIONADO] cómo implementar ajax en mi proyecto symfony2

[weltxo]

Hola amigos, llevo unas semanas iniciándome en el mundo de los frameworks, y más concretamente con Symfony2. Ya comienzo a tener bastante soltura con la metodología de trabajo de este interesante framework. Mi objetivo ahora es implementar algo de AJAX para darle un toque más profesional y vanguardista a mi aplicación.

Tengo una página que imprime un listado de ciudades ordenadas alfabéticamente, por ejemplo algo así:

*Barcelona
*Bilbao
*Madrid
*Pamplona
*Vitoria
*Zaragoza

Y tengo unos botones, de la A hasta la letra Z, en los que al pulsar sobre un botón de ellos, la página imprimá únicamente las ciudades que empiezan por la letra pulsada.

Es un mecanismo realmente sencillo, y estoy buscando tutoriales con los que pueda empezar, pero realmente me siento muy perdido. Espero que alguien pueda echarme un cable. Gracias de antemano.

[GeekGirl]

Y cuál es el problema que tenés con el AJAX? El js se puede implementar igual que en cualquier HTML normal. Necesitás pasarle alguna variable del twig?

Si lo que buscás es un tutorial de AJAX, acá hay uno bueno: http://www.ajaxya.com.ar/

[albertostudium]

Te aconsejo este manual, yo he realizado peticiones ajax sin ningun tipo problema siguiendolo.
Espero que te sirva

[weltxo]

Iniciado por albertostudium

Te aconsejo este [URL="http://www.maestrosdelweb.com/curso-symfony-2-integrando-jquery/"]manual[/URL], yo he realizado peticiones ajax sin ningun tipo problema siguiendolo.
Espero que te sirva

Perfecto! Agradezco tu recomendación, estoy siguiendo los pasos de ese tutorial y he conseguido el efecto esperado!

Ahora me surge la necesidad de mejorar mi código. Ya que tengo 26 links que representan el abecedario (de la A a la Z) me gustaría evitar repetir líneas de código.

Código:

<div class="row">
  <div class="col-sm-12 col-xs-12">
        <a class="btn btn-info btn-xs" href="#" id="link_paises_a">A</a>
        <a class="btn btn-info btn-xs" href="#" id="link_paises_b">B</a>
         ......
        <a class="btn btn-info btn-xs" href="#" id="link_paises_z">Z</a>
      </div>
</div>

Código:

<script type="text/javascript">
  $(function() {
    $("#link_paises_a").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': 'a'}) }}");
    })
    
    $("#link_paises_b").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': 'b'}) }}");
    })

    .......

    $("#link_paises_z").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': 'z'}) }}");
    })
  });
</script>

Ya que de jQuery no tengo apenas conocimientos... ¿alguien podría enseñarme a cómo factorizar las 26 funciones de jquery en 1 sola? ¿O irremediablemente es necesario hacerlo así? Espero vuestras respuesta

[bNd170]

Utiliza la funcion data de jQuery.

En el DOM debes hacer algo así:

Código HTML:

<div class="row">
  <div class="col-sm-12 col-xs-12">
        <a class="btn btn-info btn-xs letra" href="#" data-letra="a">A</a>
        <a class="btn btn-info btn-xs letra" href="#" data-letra="b">B</a>
         ......
        <a class="btn btn-info btn-xs letra" href="#" data-letra="z">Z</a>
      </div>
</div>
 

He añadido una clase para localizar los botones y un atributo de clase data para almacenar la letra.

Ahora en jQuery simplemente debes hacer un listen al evento que desees y capturar lo que necesites:

Código Javascript:

$(".letra").on('click', function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': $(this).data('letra')}) }}");
    })
 

Por cierto, es recomendable que TODO código de jQuery se englobe dentro de la funcion .ready() al document, para que el javascript se ejecute una vez la página (el DOM) esté lista.

Código Javascript:

$(document).ready(function() {
  // Aqui vuestro código JQuery
});
 

[weltxo]

Iniciado por bNd170

Utiliza la funcion [URL="http://api.jquery.com/jquery.data/"]data [/URL] de jQuery.

En el DOM debes hacer algo así:

Código HTML:

<div class="row">
  <div class="col-sm-12 col-xs-12">
        <a class="btn btn-info btn-xs letra" href="#" data-letra="a">A</a>
        <a class="btn btn-info btn-xs letra" href="#" data-letra="b">B</a>
         ......
        <a class="btn btn-info btn-xs letra" href="#" data-letra="z">Z</a>
      </div>
</div>
 

He añadido una clase para localizar los botones y un atributo de clase data para almacenar la letra.

Ahora en jQuery simplemente debes hacer un listen al evento que desees y capturar lo que necesites:

Código Javascript:

$(".letra").on('click', function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': $(this).data('letra')}) }}");
    })
 

Por cierto, es recomendable que TODO código de jQuery se englobe dentro de la funcion .ready() al document, para que el javascript se ejecute una vez la página (el DOM) esté lista.

Código Javascript:

$(document).ready(function() {
  // Aqui vuestro código JQuery
});
 

Hola, he probado lo que me comentas, pero hay un problema, y es que estamos mezclando código javascript en código twig

Código:

{{ path('paises_letra' , {'letra': $(this).data('letra')}) }}

Esta página está desarrollada con el motor de plantillas TWIG, y al insertar el código jquery dentro del código TWIG casca.
Precisamente otra de las preguntas que formulé, es cómo poder solucionar este problema:
http://www.forosdelweb.com/f68/como-pasar-valor-variable-js-twig-1113556/

[bNd170]

Epa, no me fijé la verdad.

¿Podrías pegarme el código con el cual generas los botones de la A a la Z?

¿O lo has hecho uno a uno a pelo?

Mi consejo es que incluyas el enlace directamente en la etiqueta del botón, dentro del HREF por ejemplo o lo metas tambien dentro de un data, por ejemplo "data-href" para evitar que si clickan antes de que el DOM esté listo, no se de un caso indeseado y cargue la página por método tradicional.

[weltxo]

Iniciado por bNd170

Epa, no me fijé la verdad.

¿Podrías pegarme el código con el cual generas los botones de la A a la Z?

¿O lo has hecho uno a uno a pelo?

Mi consejo es que incluyas el enlace directamente en la etiqueta del botón, dentro del HREF por ejemplo o lo metas tambien dentro de un data, por ejemplo "data-href" para evitar que si clickan antes de que el DOM esté listo, no se de un caso indeseado y cargue la página por método tradicional.

Hola de nuevo, para generar los enlaces que representan el abecedario lo hago así:

Código:

<div class="row">
  <div class="col-sm-12 col-xs-12">
    {% for letter in 'a' | upper .. 'z' | upper %}
    <a class="btn btn-info btn-xs" id="link_paises_{{ letter | lower }}">{{ letter }}</a>
    {% endfor %}
  </div>
</div>

irremediablemente, para generar las jquery's debo hacerlo a mano

Código:

<script type="text/javascript">
  $(function() {
    $("#link_paises_a").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': 'a'}) }}");
    })

.....
    
    $("#link_paises_z").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': 'z'}) }}");
    })
  });
</script>

[bNd170]

¿Porque dices que para generar el jQuery debes hacerlo a mano?

Twig puede hacerlo de igual forma eh.

Código Javascript:

<script type="text/javascript">
  $(function() {
    {% for letter in 'a' | upper .. 'z' | upper %}
    $("#link_paises_{{ letter|lower }}").click(function() {
      $("#paises").load("{{ path('paises_letra' , {'letra': letter|lower }) }}");
    })
    {% endfor %}
  });
</script>
 

No entiendo que problema tienes xD

[SirDuque]

La mejor solución es separar Javascript de Twig, normalmente se mesclan por que necesitan pasar las "rutas" al JS. para existe un bundle que simplifica todo. Es de FOS (friends of symfony) https://github.com/FriendsOfSymfony/...s/doc/index.md

Se instala muy simple y sale funcionando :P