Skip to main content
3 de 4
Etiquetas
Muriano
  • 4.1k
  • 20
  • 33

No se dispara el evento click luego de recargar el contenido mendiante una petición AJAX en Symfony2

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.

Francisco
  • 739
  • 8
  • 21