
28/07/2014, 20:53
|
| | Fecha de Ingreso: julio-2014
Mensajes: 6
Antigüedad: 10 años, 7 meses Puntos: 1 | |
Llenar formulario emergente (Form modal) con jquery Saludos.
He creado un fomulario emergente al que accedo mediante un enlace, en el enlace obtengo el identificador del registro que voy a modificar en la base de datos y si lleno datos en el formulario y lo mando a guardar el proceso se realiza satisfactoriamente pero ahora lo que deseo es que al momento de dar click en el enlace el fomulario se cargue con los datos de acuerdo a su identificador de enlace.
Lo que se ha hecho hasta el momento es lo siguiente:
En el CONTROLADOR
Código:
public function listaestudiantesxseccionesmateriaAction($materias, $nivel) {
$em = $this->getDoctrine()->getEntityManager();
$listamaterias = $em->getRepository('academicoBundle:Estudiante')->getMateriasxNivel($nivel);
$periodo = $em->getRepository('administrativoBundle:Periodo')->getPeriodoActual();
$codigo= $this->getRequest()->get('codigo');
$asistencia= $em->getRepository('academicoBundle:Asistencia')->findOneBy(array('id' => $codigo));
$form = $this->createForm( new AsistenciaType(), $asistencia);
$request = $this->getRequest();
if ( $request->getMethod() == 'POST' ) {
$form->bind( $request );
if ( $form->isValid() ) {
$em->persist( $asistencia );
$em->flush();
$this->get('session')->getFlashBag()->add('Info', 'Asistencia Actualizada');
}
}
if (!$periodo) {
//codigo para hacer que retorne a la pagina principal del usuario autenticado
$usuario = $this->get('security.context')->getToken()->getUser();
$rol = strtolower($usuario->getRol());
return $this->redirect($this->generateUrl('portada', array('role' => $rol)));
}
//obtiene lista de estudiantes matriculados de seccion: diurna
$diurna = $em->getRepository('academicoBundle:Estudiante')->findEstudiantexMateriaxSeccionDiurna($materias, $nivel);
//obtiene lista de estudiantes matriculados de seccion: nocturna
$nocturna = $em->getRepository('academicoBundle:Estudiante')->findEstudiantexMateriaxSeccionNocturna($materias, $nivel);
//obtiene lista de estudiantes matriculados de seccion: vespertina
$vespertina = $em->getRepository('academicoBundle:Estudiante')->findEstudiantexMateriaxSeccionVespertina($materias, $nivel);
//obtiene lista de todos los niveles
$niveles = $em->getRepository('academicoBundle:Matricula')->getTodosNiveles();
//obtine el nivel
$curso = $em->getRepository('administrativoBundle:Nivel')->find($nivel);
//seccion diurna
$paginatorSD = $this->get('knp_paginator');
$paginationSD = $paginatorSD->paginate(
$diurna, $this->getRequest()->query->get('page', 1), 10
);
$sd=0;
if($diurna){
$sd=1;
}
return $this->render('academicoBundle:default:listaestudiantesmatriculadosasistecia.html.twig', array(
'periodo' => $periodo,
'niveles' => $niveles,
'diurna' => $paginationSD,
'curso' => $curso,
'sd'=>$sd,
'materias'=>$materias,
'listamaterias'=>$listamaterias,
'form'=>$form->createView()
));
}
Ahora en la VISTA:
Código:
{% extends '::frontend.html.twig'%}
{% block title %} INICIO {% endblock%}
{% block id 'portada' %}
{% block article%}
<section id="menu_inspector">
{% include 'academicoBundle:Default:menu_inspector.html.twig' with {'niveles': niveles, 'listamaterias': listamaterias}%}
</section>
<h3><p align="center">{{curso}}</p><h3>
{#LISTA DE ESTUDIANTES: SECCION DIURNA#}
{% if sd== 1 %}
<strong><p>Seccion Diurna:</p></strong>
<div id="dt_example">
<div id="demo">
<table class="display" id="example">
<thead>
<tr >
{#<th>Cédula</th><th>Nombre</th><th>Apellido</th><th>Correo electrónico</th><th>Estado</th><th>Fecha</th><th>Acción</th>#}
<th>{{ knp_pagination_sortable(diurna, 'Cedula', 'e.cedula') }}</th>
<th>{{ knp_pagination_sortable(diurna, 'Nombre/Apellido', 'e.nombre') }}</th>
<th>{{ knp_pagination_sortable(diurna, 'Faltas Justificadas', 'a.faltasjustificadas') }}</th>
<th>{{ knp_pagination_sortable(diurna, 'Faltas Injustificadas', 'a.faltasinjustificadas') }}</th>
<th>{{ knp_pagination_sortable(diurna, 'Atrasos', 'a.atrasos') }}</th>
<th>{{ knp_pagination_sortable(diurna, 'Horas Asistidas', 'a.horasasistidas') }}</th>
<th>Accion</th>
</tr>
</thead>
{% for est in diurna %}
<tbody>
<tr {% if loop.index is odd %}class="color"{% endif %}>
<td>{{est.materiaasiganda.matricula.estudiante.cedula}}</td>
<td>{{est.materiaasiganda.matricula.estudiante.nombre | title}} {{est.materiaasiganda.matricula.estudiante.apellido | title}}</td>
<td>{{est.faltasjustificadas | title}}</td>
<td>{{est.faltasinjustificadas | title}}</td>
<td>{{est.atrasos | title}}</td>
<td>{{est.horasasistidas | title}}</td>
<td><a class='activate_modal' name='modal_window' id="{{ est.id }}">Mod</a></td>
<tr>
</tbody>
{% endfor%}
</table>
<div class="paginacion">
{{ knp_pagination_render(diurna) }}
</div>
</div>
</div>
<br>
{% endif %}
{% endblock%}
{% block javascripts %}
{{ parent() }}
</script>
//CODIGO PARA EL FORMULARIO EMERGENTE
<script type='text/javascript'>
$(document).ready(function(){
$('.modal_window').each(function(){
//codigo de modal
});
$('.activate_modal').click(function(){
var cells = $(this).parent().siblings(); // Get all TD elements in the same row
var subid = $('this').data('id');
cells.each(function(i, element){
var name = $(element).data('name');
var newRack = parentWindow.$('#rack1').clone() // Clone the row
// insert data into new rack
newRack.attr('id', 'rack' + subid);
$('input[data-name=' + name + ']', newRack)
.val($(element).text())
.attr('name', name + subid);
});
//get the id of the modal window stored in the name of the activating element
var modal_id = $(this).attr('name');
//use the function to show it
show_modal(modal_id);
//A la ruta le agregamos el codigo como parametro
_url = '{{path('estudiante_lista_matriculados_x_materia_x_secciones',{'materias': 3, 'nivel': 1,})}}' + "?codigo="+$(this).attr("id");
//Reemplazamos el action
$("#login").attr("action", _url);
});
$('.close_modal').click(function(){
//use the function to close it
close_modal();
});
});
//THE FUNCTIONS
function close_modal(){
//hide the mask
$('#mask').fadeOut(500);
//hide modal window(s)
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});
//fade in the mask to opacity 0.8
$('#mask').fadeTo(500,0.8);
//show the modal window
$('#'+modal_id).fadeIn(500);
}
</script>
{% endblock%}
{% block stylesheets %}
{{ parent() }}
<div id='mask' class='close_modal'></div>
<div id='modal_window' class='modal_window'>
{# {% render 'academicoBundle:Default:listaestudiantesxseccionesmateria' with {'materias': 3, 'nivel': 1}%}#}
<form id="login" method="post" {{
form_enctype(form) }}>
<fieldset>
{{form_row(form.periodo)}}
{{form_row(form.nivel)}}
{{form_row(form.seccion)}}
{{form_row(form.observaciones)}}
</fieldset>
{{form_rest(form)}}
<input class="boton" type="submit" value="Guardar"/>
</form>
</div>
{% endblock %}
Al ejecutar la aplicacion tengo algo como esto:
Como se observa el Formulario esta vacio, necesita ayuda para poder llenarlo con los datos correspondientes al id de su enlace, he buscado como realizar esto y me han recomendado usar Javascript pero no poseo mucho conocimiento de JS.
De antemano agradezco su ayuda. |