Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Formulario de edición emergente (pop up)

23 de septiembre de 2016

Hola!

Tengo una tabla de usuarios que muestra ciertos datos, como el nombre, la fecha de registro en el sistema, los días de vacaciones que tiene, etc, Quiero que al hacer click en el nombre de uno de ellos me aparezca un formulario emegerte donde pueda editar esos datos.

He visto por ahí códigos como este:

{{ user.ldapCn }}

pero a mi me dirige a otra página no me sale un pop up.

Por otro lado tengo un controlador que renderiza la vista del formulario. Como son datos a editar le tengo que pasar un id de usuario.

public function editUserAction($id){ $user = $this->getDoctrine()->getRepository('UsersBundle:ehUserInfo') ->findOneById($id);

$request = $this->getRequest();
    $form = $this->createForm(new EditUserType(), $user);
    $form->handleRequest($request);
 
    if ($form->isValid()) {
        // persist the object to the database
        $em = $this->getDoctrine()->getManager();
        $em->persist($user);
        $em->flush();
 
    return $this->redirect($this->generateUrl('homepage'));
    }
 
    else return $this->render('Users:Default:editUser.html.twig', array (
            'form' => $form->createView(),
            'user' => $user             
            ));

Muchas gracias!!!


Respuestas

#1

Hola!

Si fuera mi caso preferiría hacer que las columnas de la tabla fueran editables así si solo quieres editar los días de vacaciones lo puedes hacer.

Pero respondiendo a tú pregunta podrías hacerlo de la siguiente manera:

Suponiendo que hagas del nombre del usuario un enlace, pasarías como dato la ruta de donde vas a cargar la plantilla:

<td>
<a href="#" title="My Edit Form" data-poload="{{ path('edit_user', {'id': user.id}) }}">blabla</a>
</td>

Luego tendrías un script que al hacer click en el enlace(nombre del usuario) cargarías con jQuery el contenido de la ruta que guardaste en el atributo data-poload y se lo adjuntarías al contenido del popover de la siguiente forma:

$('*[data-poload]').click(function() {
    var element = $(this);
 
    element.off('click');
    $.get(element.data('poload'), function(result) {    
        element.popover({content: result}).popover('show');
    });
});

Si es que se demora mucho la carga del form(el popover se abre una vez terminada la petición) podrías cambiar $.get por $.ajax y usar la función beforeSend para abrir el modal con un spinner cargando y cuando termine la petición quitas el spinner y pintas la info en el contenido, algo así como cuando abres las notificaciones del facebook.

La respuesta la he traducido y modificado a tus necesidades de acuerdo a: http://stackoverflow.com/questions/8130069/load-a-bootstrap-popover-content-with-ajax-is-this-possible

Espero te sirva. Saludos.

@RoberRielo

24 septiembre 2016, 8:10
#2

Muchas gracias @RoberRielo.

A ver si me sirve :).

@helenmelenen

27 septiembre 2016, 10:23