Question

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.

Comments

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

---

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.

---

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

---

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

---

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!

Answer 1

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!