Foros del Web » Programando para Internet » PHP » Symfony »

Llenar formulario emergente (Form modal) con jquery

Estas en el tema de Llenar formulario emergente (Form modal) con jquery en el foro de Symfony en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2014, 20:53
 
Fecha de Ingreso: julio-2014
Mensajes: 6
Antigüedad: 7 años, 4 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.

Etiquetas: symfony2
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:03.