[SOLUCIONADO] Crear formulario emergente (Form modal) con jquery

[yonynet]

Saludos.....

Estoy intentando que me aparezca un formulario emergente dentro de una misma vista en symfony2, es decir tengo una lista de estudiantes y deseo que al dar clic sobre uno de ellos me aparezca un formulario de registro de notas, al cual debo pasarle como parámetro el id del estudiante previamente seleccionado.

Por favor si me pueden dar una idea de como puedo hacer que me aparezca ese formulario dentro de la misma vista..y si es posible realizar eso en symfony2 De antemano les agradezco.

[hhs]

Se puede hacer perfectamente usando jquery+ajax y el uso de los frameworks de html como foundation o bootstrap que traen implementado ventanas modales, ya es cosa de elección.

[yonynet]

Lo estoy realizando y ya sale el formulario como yo deseo... ahora tengo el siguiente inconveniente:

Tengo una lista de estudiantes y la misma la estoy recorriendo con un for:

Código PHP:

   
{% for est in estudiantes %} 
 
     <li><a class='activate_modal' name='modal_window' id="foos" >Evaluar</a>  </li> 
 
{%endfor%}  
   

Ahora deseo que al dar clic en el enlace se almacene en otra variable el siguiente valor: {{est.id}}, porque esa variable lo necesito luego para poder enviar a guardar los datos del formulario.


Yo le intente de la siguiente manera:

Código PHP:

   
{% for est in estudiantes %} 
 
     <li><a class='activate_modal' name='modal_window' id="foos" {% set codigo= est.id %} >Evaluar</a>  </li> 
 
{%endfor%}  
   

Pero no se graba ese valor en la variable código... Alguna idea de como solucionarlo, de antemano gracias...

[fhederico]

Puedes hacer algo simple, como ponerle una funcion "onclick" a tu LI o algo un poco mas completo como capturar ese evento con JQuery cuando hagan click.

1) Por ejemplo, con onclik

Código PHP:

{% for est in estudiantes %}
 
     <li><a class='activate_modal' name='modal_window' id="foos" onclick="cargaVentana({{ est.id }});">Evaluar</a>  </li>
 
{%endfor%}
 

En tu codigo Javascript

Código Javascript:

function cargaVentana(id)
{
     alert("pinchaste en un LI con el codigo "+id);
}
 

2) Ahora con Jquery podrias capturar el evento con un click

Código PHP:

{% for est in estudiantes %}
 
     <li><a class='activate_modal' name='modal_window' id="{{ est.id }}">Evaluar</a>  </li>
 
{%endfor%}
 

Ojo, le agregamos el "est.id" al ID del A

En el javascript (recuerda que debes incluir una llamada al archivo JQuery)

Código Javascript:

$(document).ready(function() 
    {
       $(".activate_modal").click(function ()
        {
            alert("el ID del LI seleccionado es "+$(this).attr("id"));
        });
    });
 

Saludos

[yonynet]

Ya lo hago de la manera que me indica pero ese {{est.id}} tendo que almacenarle en una variable en dentro de la plantilla twig, debido que la misma necesito para poder pasarle como parámetro del accion del formulario modal asi:

Entonce en una variable llamada codigo se me debe almacenar el valor del {{est.id}} cuando le de clic en la lista antes mencionada

Código PHP:

  
<form action="{{path('docente_notas_x_estudiante',{'codigo': codigo})}}"  id="login" method="post" {{
                 form_enctype(formulario) }}>

                        <fieldset>                  
                            {{form_label(formulario.promedio,'Calificación:')}}{{form_errors(formulario.promedio)}}{{form_widget(formulario.promedio, { 'attr': {'autocomplete' : 'off','size': 2 } }) }}  <br>  
                            {{form_label(formulario.mesevaluacion,'Mes evaluado:')}}{{form_errors(formulario.mesevaluacion)}}{{form_widget(formulario.mesevaluacion, { 'attr': {'autocomplete' : 'off' } }) }}              <br>                                        
                            {{form_label(formulario.tiponota,'Nota de:')}}{{form_errors(formulario.tiponota)}}{{form_widget(formulario.tiponota, { 'attr': {'autocomplete' : 'off' } }) }} <br>   
                            {{form_label(formulario.descripcion,'Descripción:')}}{{form_errors(formulario.descripcion)}}{{form_widget(formulario.descripcion, { 'attr': {'autocomplete' : 'off' } }) }}    
                            </fieldset>   


         {{form_rest(formulario)}}                   
                            <input  class="boton" type="submit" value="Guardar"/>
                        </form>  
   

Ahora yo le hice asi:

Código PHP:

  
<li ><a class='activate_modal' name='modal_window' id="foos" onclick="{% set codigo= est.id %}"  >Evaluar</a></li>  
   

Pero veo que en la variable codigo, me almacena el ultimo {{est.id}} de las lista, y no el {{est.id}} del cual yo le di clic..

[fhederico]

No es posible hacer esto, ya que el for lo que hace es ir pisando el valor en cada iteracion, por lo tanto esta correcto que te muestre el ultimo est.id. Ademas piensa que la plantilla de twig se genera y se convierte en HTML antes de mostrartela a ti, por lo tanto el no sabe el codigo que tu debes seleccionar.

Lo que puedes hacer es en un campo oculto setear el ID que tu seleccionaste y al enviar el formulario rescatarlo en tu controller o simplemente reemplazar el action por ejemplo asumiendo que tu "codigo" no va como parametro, es decir, que la ruta de tu controller es asi

Código HTML:

{{ path('docente_notas_x_estudiante') }}
 

y te generara algo asi por ejemplo

Código HTML:

/hola/symfony/web/edit/
 

Empezamos con el ejemplo de JQuery

Código PHP:

{% for est in estudiantes %}
     
         <li><a class='activate_modal' name='modal_window' id="{{ est.id }}">Evaluar</a>  </li>
     
    {%endfor%}
 

Código Javascript:

$(document).ready(function() 
    {
       $(".activate_modal").click(function ()
        {
                    //A la ruta le agregamos el codigo como parametro
            _url = '{{path('docente_notas_x_estudiante')}}' + "?codigo="+$(this).attr("id");
                   //Reemplazaos el action
                  $("#login").attr("action", _url);
        });
    });
 

Porque le envio el codigo despues de que genero la ruta? porque como te dije antes la plantilla twig la genera antes de mostrartela, por lo tanto le anexamos el parametro "codigo" despues con Javascript, que esto lo hace en el cliente, recuerda agregar el llamado al archivo JQuery o cambiar esto por un onclick tambien funcionaria.

Si lo haces como un parametro oculto o hidden seria algo similar y en tu controller lo rescataras asi

Código PHP:

$this->getRequest()->get('codigo')
 

Saludos

[yonynet]

Gracias... de la ultima manera alli ya pude conseguir solucionar ese inconveniente...