1

Tengo el siguiente controller :

public function indexAction(Request $request)
    {
        if (!$request->isXmlHttpRequest())
        {
            $this->denyAccessUnlessGranted('ROLE_ESP_NAC', null, 'Imposible acceder a este recurso !!');

            $repositoryRiesgos = $this->getDoctrine()->getRepository('AppBundle:Riesgo');


            $listado = $repositoryRiesgos->findAll(); //findByPages($request->get('page', 1));
            return $this->render('AppBundle:CodifRiesgos:index.html.twig', array('riesgos' => $listado));
        } else
        {
            try
            {
                $this->denyAccessUnlessGranted('ROLE_ESP_NAC', null, 'Imposible acceder a este recurso !!');
            } catch (AccessDeniedException $denyExc)
            {
                return new Response($denyExc->getMessage(), 403);
            }

            $repositoryRiesgos = $this->getDoctrine()->getRepository('AppBundle:Riesgo');
            $listado = $repositoryRiesgos->findAll();

            return $this->render('AppBundle:CodifRiesgos:tablaRiesgos.html.twig', array('riesgos' => $listado));
        }
    }

Incluso en el controller prácticamente repetí el código tanto para la petición vía AJAX como la normal.

Ahora bien la plantilla index.html.twig es la siguiente:

{% extends "::base.html.twig" %}

{% block title %} PAMI - Codificadores {% endblock %}

{% block principal %}    
    <br/>
    <div class="breadcrumb">        
        <a href="{{ path('app_homepage') }}">Inicio<span class="glyphicon glyphicon-chevron-right"></a>&nbsp;
        Riesgos<a class="lnkRecargarRiesgos" href="{{ path('riesgos_listado') }}"> <span class="glyphicon glyphicon-refresh"></span></a>               
    </div>           

    <div id="tablaDatos">
        <table id="tablaRiesgos" class="table table-condensed table-hover table-responsive">
            <thead>
                {% if app.user and is_granted('ROLE_ESP_NAC') %}
                    <tr>
                        <th colspan="5"><a id="lnkRegistrarRiesgo" href="{{ path('riesgos_registrar_nuevo') }}"><span class="glyphicon glyphicon-plus"></span> Nuevo</a></th>
                    </tr>               
                {% endif %}
                <tr>
                    <th>Nombre</th>
                    <th>Descripci&oacute;n</th>
                    <th>Alto</th>
                    <th>Editar</th>
                    <th>Eliminar</th>
                </tr>
            </thead>
            <tbody>
                {% for riesgo in riesgos%}
                    <tr id="filaRiesgo_{{ riesgo.id }}">
                        <td>{{ riesgo.nombre }}</td>
                        <td>{{ riesgo.descripcion }}</td>
                        <td>
                            {% if riesgo.calificaComoAltoRiesgo %}
                                <span class="glyphicon glyphicon-hand-up"></span>
                            {% endif %}
                        </td>
                        <td><a class="lnkEditarRiesgo" href="{{ path('riesgos_editar', {'id':riesgo.id}) }}"><span class="glyphicon glyphicon-edit"></span></a></td>
                        <td><a class="lnkEliminarRiesgo" href="{{ path('riesgos_eliminar', {'id':riesgo.id}) }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                    </tr>
                {% endfor %}
            </tbody>            
        </table>   
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(document).ready(function(){

            $('a.lnkRecargarRiesgos').on('click', function(e) {
                    e.preventDefault();
                    var url = $(this).attr('href');
                    $.ajax({
                        'datatypes': 'html',
                        'type': 'GET',
                        'url': url,
                        beforeSend: function() {
                            $('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
                        }
                    }).done(function(data) {
                        $('#tablaDatos').html(data);
                    }).fail(function(jqXHR) {
                        $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
                    }).always(function() {
                        $('#indicador').fadeOut('slow', function() {
                            $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                        });
                    });
                });           


                $('#tablaRiesgos tbody tr a.lnkEliminarRiesgo').on('click', function(e) {
                    e.preventDefault();
                    var idRiesgo = $(this).attr('id');
                    var url=$(this).attr('href');
                    var trPadre=$(this).parents('tr');
                    $.ajax({
                        'datatypes': 'html',
                        'type': 'GET',
                        'url': url,
                        beforeSend: function() {
                            $('#indicador').addClass('cargando-satisfactorio').fadeIn('fast');
                        }
                    }).done(function(data) {
                        $(trPadre).remove();
                        $('#indicador').html(data);
                    }).fail(function(jqXHR) {
                        $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
                    }).always(function() {
                        $('#indicador').fadeOut(4900, function() {
                            $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                        });
                    });
                });
        });
    </script>
{% endblock %}

El problema es el siguiente:

  1. Cuando la plantilla es cargada inicialmente, el evento onclick asociado al a.lnkEliminarRiesgo funciona correctamente.
  2. Luego, al hacer click en el a.lnkRecargarRiesgos, recargo la misma información actualizada (mediante AJAX) en div#tablaDatos.
  3. Pero ahora, como se volvió a generar el a.lnkEliminarRiesgo, no se dispara el evento .on('click',... que había asociado originalmente. En cambio, se sigue el enlace del href porque no se ejecutó e.preventDefault().

Yo quiero que el evento on click siga funcionando igual que al inicio.

No sé si es que mi enfoque del trabajo con las plantillas en Symfony2 es incorrecto o me falta algo o no estoy enfocando bien el uso de las llamadas asíncronas, o la forma en que estoy incluyendo el JavaScript.

1
  • Hola @Francisco. Me tomé la libertad de editar tu pregunta con la intención de que quede más clara. Si hay algo con lo que no estés de acuerdo, no dudes en revertir el cambio, editar la pregunta nuevamente o comentarlo.
    – Mariano
    Commented el 2 oct. 2016 a las 6:17

3 respuestas 3

1

Te recomiendo enlazarlo de esta manera:

$(document).on("click",'a.lnkEliminarRiesgo', function (event, xhr, settings) {
//Contenido Script
});

En las respuestas anteriores el bind está hecho al body, si el body cambia puede romperse el bind o incluso generar algo conocido como "double firing"... por eso lo recomendado es hacer el enlace al documento. También se instancia a parte del evento, el callback xhr y settings, los cuales pueden ayudarte en el debug.

También tendrías que revisar si que la funcion si requiere de algún plugging siga esta tendencia o tendrás que recargar los plugging N cantidades de veces y hacer el unbind roto.

12
  • ¿Cómo es esta respuesta diferente a las dos que ya hay en la publicación? (y que parecen más detalladas y mejores porque describen por qué eso solucionaría el problema)
    – Alvaro Montoro
    Commented el 23 jun. 2017 a las 19:50
  • en las anteriores el bind esta hecho al body, si el body cambia puede romperse el bind o incluso generar algo conocido como "double firing"... por eso lo recomendado es hacer el enlace al documento, tambien se instancia a parte del evento, el callback xhr y Settings, el cual puede ayudarte en el debug.
    – user46896
    Commented el 23 jun. 2017 a las 21:14
  • stackoverflow.com/questions/1644418/jquery-ajax-option-xhr
    – user46896
    Commented el 23 jun. 2017 a las 21:15
  • son iguales en el ámbito de que solucionan el mismo problema el detalle esta en aprovechar mejor la tecnología.
    – user46896
    Commented el 23 jun. 2017 a las 21:16
  • xhr (Function): Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.It's not available in jQuery 1.2.6 and in any early version.
    – user46896
    Commented el 23 jun. 2017 a las 21:18
0

Una de las formas correctas de hacerlo es

$('body').on('click', '#tablaRiesgos tbody tr a.lnkEliminarRiesgo', function(e) { ... }

De esta manera, mantienes el evento enlazado al elemento body (que en teoría, no variará en el DOM de tu aplicación) y realizas un filtrado sobre el selector #tablaRiesgos tbody tr a.lnkEliminarRiesgo, así no es necesario está enlazando continuamente un evento click con elementos de nueva creación.

2
  • es recomendable entonces enlazar todos los eventos al body ?. Es que tengo un div central donde se cargan vía ajax las vistas y es apartir del id de ese div desde donde enlazo los enventos de las etiquetas <a>. Creo debo abrir otra pregunta porque es una duda un poco más específica.
    – Francisco
    Commented el 24 abr. 2017 a las 12:51
  • Está un poco basado en la opinión y experiencia de cada uno, hay quien prefiere enlazarlo al elemento body, otros al document. La cuestión es que lo hagas sobre un elemento fijo del DOM. No obstante, usar document para ello tiene un coste de ejecución mayor, ya que document suele ser un elemento mayor que body.
    – Muriano
    Commented el 24 abr. 2017 a las 13:10
0

A la hora de bindear las eventos, inicié el filtro en una etiqueta div con id='vistas', que para esta aplicación en específico será en ese elemento donde se carguen todas las vistas de las llamadas AJAX, por tanto este no desaparecerá de la página. Y en el caso de la funcionalidad eliminar, siempre se realiza en una tabla con id='tablaDatos' $('#vistas').find('#tablaDatos tbody tr a.lnkEliminarRegistro').on('click', function(e) { ... }

De esta manera se mantendrá siempre el vínculo del evento click sobre las etiquetas <a> con clase, por ejemplo: lnkEliminarRegistro.

De esa manera me sirve la implementación para la funcionalidad eliminar de todas las tablas de las vistas cargadas dentro de <div class='vistas'></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.