entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Refrescar un div con Jquery o Javascript

Hola. Necesito refrescar un div que contiene datos que se muetran con codigo PHP
Ejemplo

<?php
  $a=0;
  foreach ($this->var->list_all->data as $key => $data) {?>
  <div class="contenido">
    <p class="text-center"><?=$a+1?></p>
    <p><?=$data->nombre." ".$data->apellidos?></p>
    <p><?=empty($data->celular)? "No ha agregado" : $data->celular ?></p>
    <p><?=empty($data->email)? "No ha agregado" : $data->email ?></p>
    <p><?=$data->registro?></p>
  </div>
<?php
  $a++;}
?>

En este caso quiero actualizar el div contenido. Espero su ayuda.

Leonardo-Tadei comentado Feb 28

y por qué vía obtendrás los datos que querés mostrar?

elmerson comentado Feb 28

Por que arriba de ese código tengo un formulario y quiero actualizar la los datos cuando actualizo la información y sin recargar la pagina.

Leonardo-Tadei comentado Feb 28

Sin el código del formulario de más arriba, solo podemos adivinar como sería la solución a tu problema!

elmerson comentado Feb 28

Pues cual seria. Por que solo necesito refrescar el div contenido despues de que se guarden los datos y nada mas.

Leonardo-Tadei comentado Feb 28

La solución que adivino es enviar el formulario con JavaScript usando un objeto XMLHTTPREquest que envíe los datos por POST y que al obtener una respuesta válida en formato JSON desde el servidor cambie los valores de los P con los datos que fueron enviados y nada más!

1 Respuesta

1voto

pedrourday Puntos2440

Hola @elmerson

Un truco muy sencillo y sin usar Ajax es usar un iframe oculto y agregar al formulario el atributo target que haga referencia a ese iframe. Luego, cuando el formulario se envíe, agregas el evento onload al iframe, lees el contenido del mismo cuando llege la respuesta del servidor y luego eliminas el evento. Te muestro un ejemplo de eso:

<?php
if (isset($_GET['prueba'])) {
    print "Hola mundo!";
    exit;
}
?>
<form id="my-form" target="submit-iframe" action="?" method="get">
    <input type="submit" name="prueba" value="Probar iframe">
</form>
<iframe id="submit-iframe" name="submit-iframe" style="display: none"></iframe>
<script>
    function alertResponse() {
        var response = event.target.contentDocument.body.innerHTML;
        alert(response);
        event.target.removeEventListener('load', alertResponse);
    }

    document.getElementById("my-form").addEventListener("submit", function(){
        document.getElementById('submit-iframe').addEventListener('load', alertResponse);
    });
</script>

Cuando recibís la respuesta y esta se carga en el iframe; esta respuesta debe estar en JSON. De esa manera podes usar algún sistema de plantillas y renderizar el div. Como ejemplos tenes: Mustache, Handlebars, Underscore.js, EJS, etc. Podes investigar un poco de eso.

Pero todo esto tiene una contra y es que la url no se actualiza y cuando hagas refresh te volverá al index. Podes solucionarlo usando la "History API", o sea, los métodos history.pushState y history.replaceState. Pero esa parte es la más complicada.

Esta solución es un poco "sucia", pero funciona y creo que eso es lo que importa.
Si te sirve esta respuesta, intentá acomodar el código fuente para que haga lo que pides.

Saludos!

elmerson comentado Mar 19

Gracias lo voy a probar :)

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta