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>
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ó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:
- Cuando la plantilla es cargada inicialmente, el evento
onclick
asociado ala.lnkEliminarRiesgo
funciona correctamente. - Luego, al hacer click en el
a.lnkRecargarRiesgos
, recargo la misma información actualizada (mediante AJAX) endiv#tablaDatos
. - 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 delhref
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.