I have the following 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));
}
}
Even in the controller I practically repeated the code for both the request via AJAX and the normal one.
Now the template index.html.twig is as follows:
{% 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 %}
The problem is this:
onclick event associated with a.lnkEliminarRiesgo works correctly. a.lnkRecargarRiesgos , I reload the same updated information (through AJAX) in div#tablaDatos . a.lnkEliminarRiesgo was rebuilt, the event .on('click',... that had originally associated does not fire. Instead, the link of href is followed because e.preventDefault() was not executed. I want the on-click event to continue functioning as it did at the beginning.
I do not know if my approach to working with the templates in Symfony2 is incorrect or I'm missing something or I'm not focusing well on the use of asynchronous calls, or the way I'm including the JavaScript.