Recargar página tras envío exitoso de formulario.

ramiro_md · #1 (**permalink**) 24/10/2012, 15:03

Buenos días, sinceramente estoy medio confundido y no sé si esta será la sección correcta, ya que mezclo un poco de todo. Cualquier cosa, son libres de moverlo de foro.

La cuestión es la siguiente, tengo un panel de administración que posee varias secciones (usuarios, perfiles, etc...). En este caso me voy a enfocar en el CRUD de los perfiles.

Una de las funcionalidades de esta aplicación es poder exportar e importar los perfiles a un archivo con formato csv. Por ahora estoy liando con la exportación.

A priori tengo mi script PHP para generar el archivo. Este script funciona bien.

El tema fue cuando quise informarle al usuario sobre el estado de la operación (satisfactoria o fallida). Lo cual lo hago con un div estilizado e imprimiendo el valor de una variable de sesión.
He aquí el problema, para descargar el archivo una vez generado por el script "genera.php" tuve que cambiarle los headers a "genera.php" para que me fuerce la descarga del csv. Pero una vez hecho esto no podía redirigir al CRUD "perfiles.php" ya que una vez modificados los headers no permite redirección.

Entonces opté por añadirle "target=popup" al formulario de exportación. Eso hizo que se descargue sin inconvenientes el archivo csv. Pero no informa que la operación fue exitosa. Para eso tengo que refrescar el navegador a mano.

Entonces lo que busco, si es posible, lograr mediante eventos (estuve leyendo, pero creo que no hay ninguno exactamente para lo que necesito) que una vez descargado el archivo el navegador se refresque automáticamente (esto si lo se hacer con js :P ). Pero el problema radica en cómo saber cuando el formulario se envió y el script "genera.php" finalizó su ejecución. Para después claro, refrescar el navegador y leer la variable de sesión que contiene el mensaje del estado de la operación.

No sé si hice mucho lio o se entendió. Agradezco cualquier tipo de opinión o ayudita.
Saludos y desde ya, muchas gracias !.

emprear · #2 (**permalink**) 24/10/2012, 18:58

Si, es medio confuso sin visualizar el conjunto, voy a ver si lo simplifico

en una página tenés un botón o un form con un submit que tiene como destino una script php, la cual genera un csv, para forzar la descarga supongo que harás algo así

<?php
header('Content-Type: application/octet-stream');
echo "A,B,C";
?>

El usuario descargaria un archivo conteniendo
A,B,C

Obviamente tu php no puede tener impreso nada más que eso.
Vos entonces querés algún tipo de aviso para indicar que el csv se generó (que lo descargue ó no ya dependerá de el)

Eso de recargar el index y la sesion no lo tengo muy claro. Pero para lo del mensaje, sería necesario un paso intermedio, guardando el archivo.
Hay una condición para todo esto , que estés usando Apache (bueno puede que sea opcional pero habría que hacer algun cambio), en todo caso en este ejemplo si
Podés hacer toda la operación con Ajax, pero no me parece que se justificaría, usando un iframe oculto se puede lograr

Primero como vamos a guardar el csv, en la carpeta que los guardes, un .htaccess para forzar l descarga

.htaccess

Código Apache:

Ver originalAddType application/octet-stream .csv

perfil.php (paso algo con get solo para la demostración)

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function mensaje(texto){
document.getElementById('mensaje').innerHTML = texto;
}
//]]>
</script>
</head>
<body>
<a href="genera.php?perfil=X,Z,Y" target="genera">Descargar Perfil</a>
<div id="mensaje">
</div>
<iframe src="about:blank" name="genera" id="genera" width="0" height="0" frameborder="0"></iframe>
</body>
</html>

y ahora el genera.php

Código PHP:

Ver original<?php
$datos = $_GET['perfil'];
$crearcvs = file_put_contents("temp.csv",$datos,LOCK_EX);
if($crearcvs !== false){
    ?>
<script type="text/javascript">
//<![CDATA[
/* script */
parent.mensaje('Se generó el archivo');
window.location.href='temp.csv';
//]]>
</script>
 
<?php
}else{
?>
<script type="text/javascript">
//<![CDATA[
/* script */
parent.mensaje('error');
//]]>
</script>
<?php
}
 
?>

La carpeta que guarde los csv tendría que tener permisos de escritura.
Bueno, esa es la idea general, tendrías de seguro que adaptar cosas, como el nombre del archivo generado, la eleiminación de los archivos temporales, etc

Saludos

ramiro_md · #3 (**permalink**) 24/10/2012, 19:42

Emprear, gracias por la respuesta. Y si, la verdad que hasta me he mareado para describir la situación.
A continuación coloco algo de código y explicando que hace y cómo tengo encarado el sistema.

Perfiles.php
Es la pantalla de administración de perfiles. Básicamente interesa el formulario y el div que contiene el alerta de éxito o fracaso.
El dichoso div:

Código PHP:

 
<!-- Mensajes de la aplicacion -->
<div class="g_12">
     <?php
          if ( isset($_SESSION['ABMStatus']) ){
               if ($_SESSION['ABMStatus']['Success'] == true){
                    echo "<div class='success iDialog'>".$_SESSION['ABMStatus']['Msg']."</div>";
               }else{
                    echo "<div class='error iDialog'>".$_SESSION['ABMStatus']['Msg']."</div>";
               }
          }
          unset($_SESSION['ABMStatus']);
     ?>
</div>

Básicamente, si existe la variable de sesión ABMStatus, es porque vino de alguna operación del ABM (todas las operaciones que he desarrollado definen esta variable).Entonces informa el mensaje.

Ahora el formulario, como lo tengo ahora:

Código HTML:

Ver original<form id="exportPerfil" target="popup" method="POST" action="Bin/exportPerfil.php">
        <!-- Submit -->
        <div class="line_grid">
            <div class="g_3"><span class="label">Iniciar     exportaci&oacute;n</span></div>
            <div class="g_9">
                <input type="submit" value="Exportar" class="submitIt simple_buttons"/>
            </div>
        </div>
    </form>

Ahora el script que genera el dichoso csv. Coloco solo la parte donde fuerzo la descarga y establezco los valores de ABMStatus:

Código PHP:

  $format = ".csv";
$filename = $_SERVER['DOCUMENT_ROOT']."/Cache/perfiles".date('dmY').$format;

/*
 * Aca cargo el archivo y lo cierro. Funciona, así que no viene al caso.
 */
if ($_SESSION['ABMStatus']['Success'] == true){
    
    $_SESSION['ABMStatus']['Msg'] =  "Perfiles exportados correctamente.";

    header("Content-disposition: attachment; filename=perfiles".date('dmY').$format);
    header("Content-type: application/octet-stream");
    readfile($filename);

    
}else{
    $_SESSION['ABMStatus']['Msg'] = "La exportaci&oacute;n de los perfiles ha fallado inesperadamente.";
}

El formulario al tener target popup me descarga el archivo sin dramas, pero no me actualiza perfiles.php para leer el nuevo valor de ABMStatus.
Y si intento redireccionar desde el script PHP, no voy a poder hacerlo porque ya toque los headers.
Se entiende un poco más ahora ? je.

emprear · #4 (**permalink**) 24/10/2012, 20:18

Si, más o menos, ahora veo que el mensaje lo tenés definido en la sesión, la cosa es recargar la página perfil.php

bueno, con una variante de lo que te puse antes

perfil.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function mensaje(texto){
document.getElementById('mensaje').innerHTML = texto;
}
//]]>
</script>
</head>
<body>
    <p>
    <?php echo time(); ?>
</p>
<form action="genera.php" target="genera" method="post" id="fperfil">
<p>
<input type="text" value="" name="perfil" /> <input type="submit" value="generar perfil"  onsubmit="this.form.reset();"/>
</p>
</form>
<div id="mensaje">
    <!-- fix -->
</div>
<iframe src="about:blank" name="genera" id="genera" width="0" height="0" frameborder="0"></iframe>
</body>
</html>

genera.php

Código PHP:

Ver original<?php
$datos = $_POST['perfil'];
$crearcvs = file_put_contents("temp.csv",$datos,LOCK_EX);
if($crearcvs !== false){
    ?>
<script type="text/javascript">
//<![CDATA[
/* script */
//parent.mensaje('Se generó el archivo');
parent.location.reload(true);
window.location.href='temp.csv';
//]]>
</script>
 
<?php
}else{
?>
    <script type="text/javascript">
//<![CDATA[
/* script */
//parent.mensaje('error');
//]]>
</script>
<?php
}
 
?>

en perfil puse el time() para que veas que se recarga.
Recordá que con lo del .htaccess que te mencioné, ya no son necesarios los headers. Y el nombre del archivo lo podés manejar con una variable. El mensaje de error lo dejamos, no está de más
la clave está en hacer

Código Javascript:

Ver originalparent.location.reload(true);

el true lo usamos para asegurarnos que se carga del server y no de la cache

Se entiende

Te dejo una demo
http://foros.emprear.com/php/perfil/perfil.php

Saludos

emprear · #5 (**permalink**) 24/10/2012, 21:01

vos sabés que la venía probando en firefox y andaba perfecto, pero en los demás browsers no, le di unas vueltas hasta que pude
quedó asi

perfil.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function recargar(){
location.reload(true);
}
function mensaje(texto){
    if(texto == 'ok'){
setTimeout('recargar()', 1500);
    }else{
document.getElementById('mensaje').innerHTML = texto;
}
}
//]]>
</script>
</head>
<body>
    <p>
    <?php echo time(); ?>
</p>
<form action="genera.php" target="genera" method="post" id="fperfil">
<p>
<input type="text" value="" name="perfil" /> <input type="submit" value="generar perfil"  onsubmit="this.form.reset();"/>
</p>
</form>
<div id="mensaje">
    <!-- fix -->
</div>
<iframe src="about:blank" name="genera" id="genera" width="0" height="0" frameborder="0"></iframe>
</body>
</html>

genera.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<?php
$datos = $_POST['perfil'];
$crearcvs = file_put_contents("temp.csv",$datos,LOCK_EX);
if($crearcvs !== false){
    ?>
<script type="text/javascript">
//<![CDATA[
/* script */
parent.mensaje('ok');
window.location.href = 'temp.csv';
//]]>
</script>
 
<?php
}else{
?>
    <script type="text/javascript">
//<![CDATA[
/* script */
parent.mensaje('error');
//]]>
</script>
<?php
}
 
?>
</body>
</html>

Demo
http://foros.emprear.com/php/perfil/perfil.php

la probé en todos y funciona

ramiro_md · #6 (**permalink**) 25/10/2012, 06:23

Emprear, gracias por todo el tiempo brindado. Te comento.
Agregue el iframe en perfiles.php y el target del formulario apunta al name del iframe.
En la última parte del script PHP coloco:

Código PHP:

Ver original/*...  SCRIPT ... */
?>
<script language="javascript">
    parent.location.reload(true);
</script>

Pero perfiles.php no se refresca (he puesto time() para corroborarlo).

ramiro_md · #7 (**permalink**) 25/10/2012, 06:29

A ver, ahora intenté esto y tampoco va:

Perfiles.php

Código HTML:

Ver original<script language="javascript">
            function recarga(){
                location.reload();
            }
        </script>
 
<!-- Sigue el código HTML .... -->
 
<form id="exportPerfil" target="genera" method="POST" action="Bin/exportPerfil.php">
        <!-- Submit -->
        <div class="line_grid">
            <div class="g_3"><span class="label">Iniciar exportaci&oacute;n</span></div>
            <div class="g_9">
                <input type="submit" value="Exportar" class="submitIt simple_buttons"/>
            </div>
        </div>
    </form>
 
<iframe src="about:blank" name="genera" width="0" height="0"></iframe>

El script PHP sigue igual, solo que agregué al final:

Código Javascript:

Ver original<script language="javascript">
    parent.recarga();
</script>

emprear · #8 (**permalink**) 25/10/2012, 07:09

Mirá, yo lo estoy probando en mi server y funciona correctamente´(firefox/chrome/IE).
La unica pequeña diferencia que encuentro es que en IE hasta que el usuario no le da a la opción de abrir o guardar en la descarga, la página no se refresca, incluso le agregué una sesión para generar el mensaje, te pongo los archivos en un zip para que los analices y los pruebes, recordá que el directorio dónde guardes tus csv tiene que tener permisos 0777

http://foros.emprear.com/php/perfil/perfil.zip
Saludos

marlanga · #9 (**permalink**) 25/10/2012, 07:34

-Post equivocado-

emprear · #10 (**permalink**) 25/10/2012, 07:56

Cita:

Iniciado por marlanga

Envía el formulario por AJAX, y cuando ajax responda, con un location.href recargas la página

.??????