Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/07/2014, 20:53
mariofernip
 
Fecha de Ingreso: julio-2014
Mensajes: 6
Antigüedad: 9 años, 9 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}}&nbsp{{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.