La verdad es que en parte estaba intentando responder este otro tema: http://www.forosdelweb.com/f127/formulario-ajax-321547/ pero al no estar seguro de que interese un "paso a paso" estoy iniciando este tema.
El libro de visitas es del todo artesanal (creado con el block de notas y con muchísimos errores corregidos con ayuda de estos foros)
El sitio actual es este: http://www.pepemolina.com/visitas/comentarios.php y las pruebas las estoy realizando en mi "localhost".
El código de la página es este:
Código:
Bien... la idea es que después de crear un nuevo mensaje (desde un popup) se inserte en la página padre. La resolución sin ajax era sencillamente recargar la página desde el botón enviar del editor...<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link rel="shortcut icon" href="../sucaricatura.ico" />
<style>
p {
text-indent:1cm;
margin: 0px auto;
}
body {
text-align: center;
}
</style>
<?
$linea = "<table align=center width=95% height=6>";
$linea .= "<tr><td width=100% height=100% bgcolor=blue>";
$linea .= "</td></tr></table>";
$minilinea = "<table align=left width=50% height=2>";
$minilinea .= "<tr><td height=100% bgcolor=green>";
$minilinea .= "</td></tr></table>";
?>
<title>Visitas
</title>
<script type="text/javascript" >
function abrirEditor() {
var anchoPantalla = screen.width;
var altoPantalla = screen.height;
var anchoVentana = 700;
var altoVentana = 560;
var ventana = "editor";
var enlace = "";
var params = "status=yes,width=" + anchoVentana + ",height=" + altoVentana;
params += ",top=" + (altoPantalla / 2 - (altoVentana / 2));
params += ",left=" + (anchoPantalla / 2 - (anchoVentana / 2));
window.open(enlace, ventana, params);
}
</script>
</head>
<body>
<div align=center width=100%>
<h1 style="text-align: center; font-size: 24px; color: blue;">Libro de visitas</h1>
<div style="width: 80%;" >
<div style="text-align: justify;" >
<?
function strFecha($fecha) {
if ($fecha == "00000000000000") {return "deconocida";}
$dia = substr($fecha, 6, 2);
$mes = substr($fecha, 4, 2);
$ano = substr($fecha, 0, 4);
$hora = substr($fecha, 8, 2);
$minu = substr($fecha, 10, 2);
$segu = substr($fecha, 12, 2);
$devolver = "$dia/$mes/$ano, a las $hora:$minu:$segu";
return $devolver;
}
function parrafar($dato) {
return "<p>".str_replace("<br />", "</p>\n<p>", nl2br($dato))."</p>";
}
function alternaColor($n) {
if (($n % 2) == 0)
return "#f0fff0";
else
return "#fff0f0";
}
function resultado($consulta, $linea) {
$cant = mysql_num_fields($consulta);
$ancho = 100 / $cant."%";
$num = mysql_num_rows($consulta);
for ($i = 0; $i < $num; $i ++) {
echo "<div style='padding: 5px; margin: 2px; background-color: ".alternaColor($i)."; border: 1px ridge blue' >";
$row = mysql_fetch_array($consulta);
echo "<u>Mensaje enviado por: $row[Nombre], con fecha: ".strFecha($row['fecha'])."</u>\n<br>\n";
if ($row["desde"] != "")
echo "Procede: $row[desde]\n<br>\n";
if ($row["Email"] != "")
echo "E-mail:<a href=mailto:$row[Email] > $row[Email] </a>\n<br>\n";
if ($row["URL"] != "")
echo "URL:<a href=$row[URL] target=blank> $row[URL] </a>\n<br>\n";
if ($row["califica"] != "")
echo "Calificación: <img src=$row[califica] >\n<br>\n";
echo "Comentario:\n<br>\n<table align=left width=50% height=2><tr><td height=100% bgcolor=green></td></tr></table>\n<br>\n";
echo parrafar($row['comentario'])."\n</div>";
echo "\n<br />\n$linea\n<br />";
}
}
?>
<div style='background-Color:pink; padding: 5px; margin: 2px; border: 1px ridge blue' >
<p>
<b>Nota del webmaster: Puede firmar el libro de visitas pinchando en el siguiente enlace...
<a href="editar.html" target="editor" onclick="abrirEditor()" > aquí </a>
o pulsando el botón que se encuentra a pie de página...
</p>
</div>
<?
echo "\n<br />\n$linea\n<br />";
$servidor = $_SERVER["SERVER_NAME"];
#echo $servidor."<br />";
if ($servidor == "localhost") {
include("variables-localhost.php");
}
else {
include("variables-remotas.php");
}
include("conectar.php");
$sql = "SELECT * FROM $tabla WHERE activo = 1 order by 'sitio' desc";
if ($res = mysql_db_query($basedatos, $sql))
{
resultado($res, $linea);
}
else {
echo "resultado inválido: $res";
}
?>
</div>
<form action="editar.html" target="editor" onsubmit="abrirEditor()" >
<button type="submit" ><table style="margin: 10px 0px;"><tr><td><img src="12.gif" /></td><td> Firmar en el libro </td><td><img src="12.gif" /></td></tr></table></button>
</form>
</div>
</div>
</body>
</html>
Código:
La primera modificación fue cambiar la "salida del editor por:function salida() {
opener.document.location.reload();
window.close();
}
Código:
Y en el libro diferenciar dos salidas dependiendo del soporte ajax:function salida() {
opener.actualizar();
window.close();
}
Código:
La función actualizarAjax() aún no la tengo definida...function actualizar() {
if (window.XMLHttpRequest || window.ActiveXObject)
actualizarAjax();
else
location.reload();
}
El siguiente paso fue crear el fichero que servirá para obtener los nuevos datos...
... continuará...
