Anónimo
Recargar página en un div
He probado lo que me dijiste:
"Hola Mónica, que tal:
A ver, si no te he entendido mal, tienes una página cargada en el div mediante load, y dentro de esa página tienes un formulario. Quieres hacer un submit de ese formulario (get o post, da igual) y claro, se te pira la página principal. Lo que quieres es que el resultado del submit se te cargue en el div como siempre, ¿no?
Bueno, si tu problema es ese, esta es la solución: el jQuery Form Plugin
Su uso es muy fácil. Primero, en tu
<head>
, referencia el script del plugin, o bien te lo descargas a tu servidor:
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43">
Después, en el document.ready(), o en un script al final de la página, mete este código:
var params= {target:'#div'};
$('#miFormulario').ajaxForm(params);
... Y ya está. La respuesta html que se genere tras hacer un submit de tu formulario se cargará en el div que le hayas definido en el parámetro "target". Se le pueden meter más parámetros, como se puede ver en estos ejemplos, pero con el target sólo te vale.
Espero haber entendido tu pregunta, y que el rollo que te acabo de soltar te sirva. Un saludo:
Carlos."
Pero no me funciona,
en la pagina del formulario tenia esto
<script type="text/javascript">
$(document).ready(function(){
var params= {target:'#content'};
$('#pag').ajaxForm(params);
}); ahora lo he puesto despues del </html>
donde tengo pag he probado a poner tb content
y en la pagina donde hago el submit pongo esto <script type="text/javascript">$("#content").load("../temaVista.php");</script>
Primero la página del submit se abre en una entera y la redirección no la hace
"Hola Mónica, que tal:
A ver, si no te he entendido mal, tienes una página cargada en el div mediante load, y dentro de esa página tienes un formulario. Quieres hacer un submit de ese formulario (get o post, da igual) y claro, se te pira la página principal. Lo que quieres es que el resultado del submit se te cargue en el div como siempre, ¿no?
Bueno, si tu problema es ese, esta es la solución: el jQuery Form Plugin
Su uso es muy fácil. Primero, en tu
<head>
, referencia el script del plugin, o bien te lo descargas a tu servidor:
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43">
Después, en el document.ready(), o en un script al final de la página, mete este código:
var params= {target:'#div'};
$('#miFormulario').ajaxForm(params);
... Y ya está. La respuesta html que se genere tras hacer un submit de tu formulario se cargará en el div que le hayas definido en el parámetro "target". Se le pueden meter más parámetros, como se puede ver en estos ejemplos, pero con el target sólo te vale.
Espero haber entendido tu pregunta, y que el rollo que te acabo de soltar te sirva. Un saludo:
Carlos."
Pero no me funciona,
en la pagina del formulario tenia esto
<script type="text/javascript">
$(document).ready(function(){
var params= {target:'#content'};
$('#pag').ajaxForm(params);
}); ahora lo he puesto despues del </html>
donde tengo pag he probado a poner tb content
y en la pagina donde hago el submit pongo esto <script type="text/javascript">$("#content").load("../temaVista.php");</script>
Primero la página del submit se abre en una entera y la redirección no la hace
1 Respuesta
Respuesta de krlosnow
1
Yo pondría el script justo antes de
</body>
(Cerrar tag body). Para asegurarte de que el script se ejecuta, mete un alert():
<script type="text/javascript">
$(document).ready(function(){
alert("Cargado javascript para enlazar el formulario con ajax");
var params= {target:'#content'};
$('#pag').ajaxForm(params);
});
</script>
Si el alert() no sale, dímelo, pero por lo que dices, al hacer el submit lo que hace es abrir una ventana nueva. Eso lo que indica es que no encuentra el elemento con id=content, por lo que al no encontrarlo, carga el resultado del submit en una nueva ventana. Si eso no tira, lo de la redirección posterior tampoco va a ir.
Prueba lo que te he dicho y me cuentas. Tiene que funcionar.
</body>
(Cerrar tag body). Para asegurarte de que el script se ejecuta, mete un alert():
<script type="text/javascript">
$(document).ready(function(){
alert("Cargado javascript para enlazar el formulario con ajax");
var params= {target:'#content'};
$('#pag').ajaxForm(params);
});
</script>
Si el alert() no sale, dímelo, pero por lo que dices, al hacer el submit lo que hace es abrir una ventana nueva. Eso lo que indica es que no encuentra el elemento con id=content, por lo que al no encontrarlo, carga el resultado del submit en una nueva ventana. Si eso no tira, lo de la redirección posterior tampoco va a ir.
Prueba lo que te he dicho y me cuentas. Tiene que funcionar.
EL alert si lo hace, pero en la página donde ejecuto el submit
si pongo
<script type="text/javascript">$("#content").load("../temaVista.php");</script>
¿Se queda la página en blanco y debería de funcionar?
si pongo
<script type="text/javascript">$("#content").load("../temaVista.php");</script>
¿Se queda la página en blanco y debería de funcionar?
Debería funcionar, siempre que esa página se cargue en el div famoso. Si se está abriendo una ventana emergente, habría que poner:
<script type="text/javascript">opener.$("#content").load("../temaVista.php");</script>
<script type="text/javascript">opener.$("#content").load("../temaVista.php");</script>
YO cargo temaVista.php en el div content que es donde esta el formulario, si yo hago en esa página $('#content'). load() si la carga en el div, pero cuando hago el submit y voy a otra pagina y ahi hago $('#content'). load() al terminar de ejecutar el codigo php ejecutar $('#content'). load() se queda la pagina en blanco, por eso digo que no se carga en el div.
Sin embargo si pongo location si va, pero claro a la página principal(director.php) no a la página que estaba. Podría poner history.back()
Sin embargo si pongo location si va, pero claro a la página principal(director.php) no a la página que estaba. Podría poner history.back()
Prueba a poner:
<script>eval("$('#content').load('../temaVista.php');");</script>
<script>eval("$('#content').load('../temaVista.php');");</script>
¿Hay otra forma de hacerlo?
Es que no me funciona.
Es que no me funciona.
Si, hay otra forma de hacerlo. Hay un parámetro que se le puede pasar cuando se configura el ajax form, que le indica que cuando haya hecho el submit correctamente, ejecute un script. El parámetro se llama success y aquí te pongo un ejemplo de como sería:
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
<span style="white-space: pre;">$('#content').load('../temaVista.php')</span>;
}
};
$('#pag').ajaxForm(params);
});
</script>
Espero que vaya bien. Se nos agotan los recursos...
Carlos.
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
<span style="white-space: pre;">$('#content').load('../temaVista.php')</span>;
}
};
$('#pag').ajaxForm(params);
});
</script>
Espero que vaya bien. Se nos agotan los recursos...
Carlos.
Pues se nos van a terminar los recursos porque sigue sin irme.
YA no se que hacer
YA no se que hacer
Parece que el copy-paste me hizo una mala pasada. Prueba con esto:
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
$('#content').load('../temaVista.php');
}
};
$('#pag').ajaxForm(params);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
$('#content').load('../temaVista.php');
}
};
$('#pag').ajaxForm(params);
});
</script>
NO me funciona, algo tengo que tener mal porque sino no me lo explico
Verifica poniendo un alert() que la función del success se ejecuta cuando has hecho el submit del formulario.
NO entra en el success:function{}, ¿A qué puede ser debido?
¿Pero el resultado del submit lo está metiendo ya en el div o lo abre en una emergente? Es para asegurarme que el plugin del form está funcionando...
No entiendo tu pregunta.
Por ejemplo la página que cargo en div content, es temaVIsta:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
</script>
</head>
<body >
<form>
</form>
<div id="pag"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
alert('no');
$('#content').load('temaVista.php');
}
};
$('#pag').ajaxForm(params);
});
</script>
</html>
en el submit del form te refieres que si pongo el $("").load()???
Por ejemplo la página que cargo en div content, es temaVIsta:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
</script>
</head>
<body >
<form>
</form>
<div id="pag"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var params= {
target:'#content',
success:function(){
alert('no');
$('#content').load('temaVista.php');
}
};
$('#pag').ajaxForm(params);
});
</script>
</html>
en el submit del form te refieres que si pongo el $("").load()???
Creo que se lo que pasa: el elemento con id="pag" tiene que ser el formulario al cual le quieres dar el comportamiento ajax. Por lo que veo, tu tienes un div con ese "id", cuando el form es el que tendría que tener ese id. Además, el form por lo que veo no tiene ni campos ni botón submit ni nada. ¿Está eso bien?
el formulario si tiene botones y otros controles pero te he puesto el esquema, voy a probar lo de <form id="pag">.
De todas maneras tengo una idea, aunque no queda muy bien, si el submit lo abro en otra página y antes de cerrarla hago opener. $(). load; y cierro la ventana si me funciona.
Eso si me parece raro que el load si abro otar ventana lo haga y sino no
De todas maneras tengo una idea, aunque no queda muy bien, si el submit lo abro en otra página y antes de cerrarla hago opener. $(). load; y cierro la ventana si me funciona.
Eso si me parece raro que el load si abro otar ventana lo haga y sino no
HOla de nuevo, el success no me va ponga
<div id="pag"><form></form></div>
o
<form id="pag">
Asi que lo hare como te he comentado
<form target="_blank">
<div id="pag"><form></form></div>
o
<form id="pag">
Asi que lo hare como te he comentado
<form target="_blank">
Este código te tendría que funcionar. Cambia el formulario para que te valga (campos y action):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
</script>
</head>
<body >
<form id="formulario" action="submitForm.php">
<input type="text" name="campo1" value="valor1"></input>
<input type="submit"></input>
</form>
<script type="text/javascript">
alert("ejecutando script para convertir el formulario en ajax");
var params= {
target:'#content',
success:function(){
alert("ejecutando script para cargar en el div la página temaVista.php, tras el submit()");
$('#content').load('temaVista.php');
}
};
$('#formulario').ajaxForm(params);
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
</script>
</head>
<body >
<form id="formulario" action="submitForm.php">
<input type="text" name="campo1" value="valor1"></input>
<input type="submit"></input>
</form>
<script type="text/javascript">
alert("ejecutando script para convertir el formulario en ajax");
var params= {
target:'#content',
success:function(){
alert("ejecutando script para cargar en el div la página temaVista.php, tras el submit()");
$('#content').load('temaVista.php');
}
};
$('#formulario').ajaxForm(params);
</script>
</body>
</html>
Siento decirte que tampoco funciona. EL 1ºalert si sale pero el segundo no porque no redirecciona después del submit. Se queda la página en blanco.
¿Tienes bien incluida la referencia al script del form plugin de jquery, en la página principal?
¿Existe la página php a la que quieres hacer el submit?
¿El formulario en cuestión tiene el mismo id que el que usas en el script (#formulario)?
Me extraña mucho que no te funcione...
¿Existe la página php a la que quieres hacer el submit?
¿El formulario en cuestión tiene el mismo id que el que usas en el script (#formulario)?
Me extraña mucho que no te funcione...
El script esta puesto, incluso he probado a bajarlo y descargarlo al momento.
el id del form es el mismo ("#formulario").ajaxForm
La página del submit por supuesto que existe.
En la página del submit tengo que poner el $("content"). ¿Load, no?
Gracias de todas maneras
el id del form es el mismo ("#formulario").ajaxForm
La página del submit por supuesto que existe.
En la página del submit tengo que poner el $("content"). ¿Load, no?
Gracias de todas maneras
En la página del submit no habría que poner el $("content"). load(), porque ya lo estás poniendo en el success del form. Si quieres, lo puedes poner en la página a la que llamas en el submit, pero quitando lo del success, que de todas maneras no te estaba funcionando (no te saltaba el alert me dijiste).
Para no dar más palos de ciego, si quieres, me puedes enviar a [email protected] el código de las tres páginas: la principal, la del form y la del submit, y miro que leches pasa, que ya estoy intrigado.
Para no dar más palos de ciego, si quieres, me puedes enviar a [email protected] el código de las tres páginas: la principal, la del form y la del submit, y miro que leches pasa, que ya estoy intrigado.
Alucina, en otra página si me función con
<script type="text/javascript">
var params= {target:'#content'};
$('#nuevo').ajaxForm(params);
</script>
Si te das cuenta hay una llave despues del target que no habia, pero vamos lo pruebo enotra pagina y no me va asi que tengo que tener algo mal. En Condiciones Vista me funciona pero si tengo puesto en la pagina del submit load();
En temaVista no me funciona.
Ya te lo mando al correo.Mil Gracias
<script type="text/javascript">
var params= {target:'#content'};
$('#nuevo').ajaxForm(params);
</script>
Si te das cuenta hay una llave despues del target que no habia, pero vamos lo pruebo enotra pagina y no me va asi que tengo que tener algo mal. En Condiciones Vista me funciona pero si tengo puesto en la pagina del submit load();
En temaVista no me funciona.
Ya te lo mando al correo.Mil Gracias
En la única página que por el momento no me funciona es en la que en vez de enviar el formulario con un botón submit, lo hago desde javascript con form.submit().
¿Puede ser eso? En las otras me funciona hasta el success
¿Puede ser eso? En las otras me funciona hasta el success
Efectivamente, eso hace que no funcione, pero he encontrado una forma de usar el form plugin que hace que funcione:
var params= {target:'#content', success:function(){$('#content').load('temaVista.php');}};
$('#formulario').submit(function(){$(this).ajaxSubmit(params);return false;});
Pruébalo y me cuentas.
var params= {target:'#content', success:function(){$('#content').load('temaVista.php');}};
$('#formulario').submit(function(){$(this).ajaxSubmit(params);return false;});
Pruébalo y me cuentas.
Siento decirte que sigue igual, no hace le success. NO entiendo muy bien el código
Aver te comento, si hace el submit pero no refresca la página donde esta el formulario. Tengo que dar en el menu para que salga refrescada. Vamos que el success no lo hace
En las páginas que te pasé por correo, sustituye la página "formSuccess.html" por esta otra:
<html>
<head>
</head>
<body>
FORM SUCCESS
<form id="formulario" method="post" action="submitSuccess.html" onsubmit="alert('haciendo submit con success')">
<input type="submit" value="Submit"></input>
<input type="button" value="Submit con script" onClick="$('#formulario').submit()"></input>
</form>
<script>
var params= {
target:'#content',
success:function(){
$("#content").load("fin.html");
}
};
$('#formulario').submit(function() {
$(this).ajaxSubmit(params);
return false;
});
</script>
</body>
</html>
Haz la prueba a ver si te funciona (a mi me funciona), y adáptala a tu código.
<html>
<head>
</head>
<body>
FORM SUCCESS
<form id="formulario" method="post" action="submitSuccess.html" onsubmit="alert('haciendo submit con success')">
<input type="submit" value="Submit"></input>
<input type="button" value="Submit con script" onClick="$('#formulario').submit()"></input>
</form>
<script>
var params= {
target:'#content',
success:function(){
$("#content").load("fin.html");
}
};
$('#formulario').submit(function() {
$(this).ajaxSubmit(params);
return false;
});
</script>
</body>
</html>
Haz la prueba a ver si te funciona (a mi me funciona), y adáptala a tu código.