Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: SoyJoaquin. en 31 de Julio de 2010, 16:52:23 pm
-
Haber chicos... Antes que nada pido gente que por favor sepa en el tema y no que tire respuestas por decir algo.
Estoy creando un sistema de noticias que sera muy transitado :S
Necesito usar ajax para no recargar la pagina y se muestre el comentario una ves enviado, se que ajax aveces es algo "peligroso" para el servidor pero dudo que en esta clase de cosas "afecte" sin decir que el servidor que uso es bueno.
En fin... ¿Como puedo empezar? Me descargue un ejemplo hecho a base de los comentarios del Google Wave pero sinceramente... No entiendo nada. Ademas lo que quiero es algo sencillo, nada del otro mundo :S
Tan solo que al enviar el formulario, aparezca una imagen de "cargando" (Si es posible), Subir los datos a la SQL y a la final... mostrar el comentario "SIN ACTUALIZAR LA PAGINA"
¿Alguien que me eche una mano en esto?
Saludos.
-
Utiliza un frame es buena idea, pero puedes utilizar ajax no malo es que o te buscas uno que entiendas o te
lo fabricas tu mismo.
Saludos
-
Utiliza un frame es buena idea, pero puedes utilizar ajax no malo es que o te buscas uno que entiendas o te
lo fabricas tu mismo.
Saludos
Si fuera con iframe seria demasiado mierda :S
Estoy googleando y sin embargo... el único ejemplo que encuentro es ese de google wave, los otros resultados son plugins para el wordpress
-
Lo que tienes que hacer, como siempre primero creas el objeto xml, luego verifica si la pagina ya cargo, luego usa el responsetext, y eso. Si necesitas que te haga el codigo avisa.
-
Con jQuery como siempre la cosa es la mar de sencilla! Puedes usar $.ajax que puedes personalizarlo bien, algo así
<form name="hola" onsubmit="comentar(this);">
...
</form>
El form muy sencillo, ahora el JS
function comentar(form) {
var params = ''; // inicializo la variable params (= parametros)
$(form).find('input, select').each(function() { // usando el objeto del form, BUSCO cada input o select y uso each para recorrerlos
params += '&' + $(this).attr('name') + '=' + encodeURIComponent($(this).val()); // añado a params el parametro correspondiente al elemento, this hace referencia al input, select etc. val() obtiene el valor ya sea un input, un select,un checkbox...
});
params = params.substring(1); //elimino el primer caracter de params que es "&" porque no debe empezar como tal.
// AJAX :D
$.ajax({
url: '/ajax/comentar.php',
method: 'GET/POST',
data: params,
dataType: 'html', // esto indica el dato que devolverá el archivo; html, xml o json
cache: false, // esto añade a la url ?_=TIME() que evita que el navegador cachee la web y devuelva siempre lo mismo
beforeSend: function() {
// en esta funcion puedes hacer algo como bloquear los input para que no haya leches, se ejecuta antes de enviar el ajax, en este caso bloqueare los input y select del form.
$(form).find('input, select').attr('disabled', 'disabled'); // añado un atributo disabled con valor disabled a cada elemento, no se si se puede hacer directamente al form, pruebalo y me haces el favor de sacarme la duda. xd
},
success: function(t) { // esta funcion se ejecuta al completarse exitosamente la peticion, el primer parametro (t en este caso) devuelve el texto del archivo, hay más pero no nos interesan.
if(t.charAt(0) == '0') { // si el primer caracter es un 0... (esto lo entenderemos al ver el PHP)
alert(t.substring(1)); // mostramos el error quitando el 0
} else {
$('#bloquedecomentarios').append(t); // añadimos el texto a un div que contiene los comentarios
}
}
});
Cabe decir que esta hecho un poco a mi manera, pero espero que lo principal lo hayas entendido...
*: El encodeURIComponent codifica caracteres para que no fastidien la url, ya explicaré por qué si eso.
Ahora el PHP, es sencillo, como si procesaramos un form normal.
<?php
// imagina que ussamos post
if(!esta_logeado) { die('0Logeate'); }
if(!mysql_query("INSERT...")) { die('0Error'); } else {
echo '<div id="comentario">'.$textocomentario.'</div>...';
}
?>
Como ves para identificar errores usamos un 0 y die, que para la ejecución del script. Si todo va bien mostramos el html del comentario que se insertará mas tarde. Por supuesto hay muchas más opciones pero esta es para mí la más aconsejable.
Si no has entendido algo no dudes en decirlo, xd
-
Con jQuery como siempre la cosa es la mar de sencilla! Puedes usar $.ajax que puedes personalizarlo bien, algo así
<form name="hola" onsubmit="comentar(this);">
...
</form>
El form muy sencillo, ahora el JS
function comentar(form) {
var params = ''; // inicializo la variable params (= parametros)
$(form).find('input, select').each(function() { // usando el objeto del form, BUSCO cada input o select y uso each para recorrerlos
params += '&' + $(this).attr('name') + '=' + encodeURIComponent($(this).val()); // añado a params el parametro correspondiente al elemento, this hace referencia al input, select etc. val() obtiene el valor ya sea un input, un select,un checkbox...
});
params = params.substring(1); //elimino el primer caracter de params que es "&" porque no debe empezar como tal.
// AJAX :D
$.ajax({
url: '/ajax/comentar.php',
method: 'GET/POST',
data: params,
dataType: 'html', // esto indica el dato que devolverá el archivo; html, xml o json
cache: false, // esto añade a la url ?_=TIME() que evita que el navegador cachee la web y devuelva siempre lo mismo
beforeSend: function() {
// en esta funcion puedes hacer algo como bloquear los input para que no haya leches, se ejecuta antes de enviar el ajax, en este caso bloqueare los input y select del form.
$(form).find('input, select').attr('disabled', 'disabled'); // añado un atributo disabled con valor disabled a cada elemento, no se si se puede hacer directamente al form, pruebalo y me haces el favor de sacarme la duda. xd
},
success: function(t) { // esta funcion se ejecuta al completarse exitosamente la peticion, el primer parametro (t en este caso) devuelve el texto del archivo, hay más pero no nos interesan.
if(t.charAt(0) == '0') { // si el primer caracter es un 0... (esto lo entenderemos al ver el PHP)
alert(t.substring(1)); // mostramos el error quitando el 0
} else {
$('#bloquedecomentarios').append(t); // añadimos el texto a un div que contiene los comentarios
}
}
});
Cabe decir que esta hecho un poco a mi manera, pero espero que lo principal lo hayas entendido...
*: El encodeURIComponent codifica caracteres para que no fastidien la url, ya explicaré por qué si eso.
Ahora el PHP, es sencillo, como si procesaramos un form normal.
<?php
// imagina que ussamos post
if(!esta_logeado) { die('0Logeate'); }
if(!mysql_query("INSERT...")) { die('0Error'); } else {
echo '<div id="comentario">'.$textocomentario.'</div>...';
}
?>
Como ves para identificar errores usamos un 0 y die, que para la ejecución del script. Si todo va bien mostramos el html del comentario que se insertará mas tarde. Por supuesto hay muchas más opciones pero esta es para mí la más aconsejable.
Si no has entendido algo no dudes en decirlo, xd
Entendí lo el html, que carga la función del js. Pero el php no entendí un *****. x'D
Supongamos que tengo este html...
<form name="hola" onsubmit="comentar(this);">
<textarea rows="2" name="comentario" cols="20"></textarea><br>
<input type="submit" value="Enviar" name="enviar">
</form>
Del js... "Me imagino" que no cambio nada excepto la url el php
url: '/ajax/comentar.php',
y del php...
No entendí absolutamente nada del 1er if()
Si yo tengo el $_POST['comentario'] (El del textarea) y el $_POST['enviar'] (input)
se me ocurrió algo así....
<?
if(isset($_POST["enviar"])) {
if(!mysql_query("INSERT INTO comentarios (comentario, fecha) VALUES ('".$_POST['comentario']."','".date("d-m-Y")."'")) { die('0Error'); } else {
echo '<div id="comentario">'.$textocomentario.'</div>...';
}
}
?>
Saludos...
-
a ver, quitando que se hackea con la punta... del dedo del pie, el echo debes cambiarlo por el codigo HTML de un comentario normal
-
a ver, quitando que se hackea con la punta... del dedo del pie, el echo debes cambiarlo por el codigo HTML de un comentario normal
obviamente.. es lógico.. lo que puse fue es un ejemplo.. x'DDD
Ni de ptm lo coloco así x'd
En fin...
¿Algo así seria...?
-
obviamente :/