Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema en notebook ajax

Estas en el tema de Problema en notebook ajax en el foro de Frameworks JS en Foros del Web. Hola Gente! Tengo un problema con el Ajax. El problema es el siguiente. Yo tengo que mandar un formulario a la base de datos, que ...
  #1 (permalink)  
Antiguo 23/05/2010, 17:18
Avatar de MaRcElTeLlA  
Fecha de Ingreso: mayo-2010
Ubicación: Martorell
Mensajes: 66
Antigüedad: 14 años, 5 meses
Puntos: 5
Problema en notebook ajax

Hola Gente! Tengo un problema con el Ajax.

El problema es el siguiente. Yo tengo que mandar un formulario a la base de datos, que almacena un asunto y un mensaje.

El objetivo es crear un blog.

Quiero que el usuario pueda dejar una nota,y entonces la nota valla a la db. Pero también quiero que pueda borrarla.

A su vez, quiero que no sobrepase los 10 mensajes una sola persona.
Y también, que no se cometan redundancias como escribir dos veces un mensaje con el mismo asunto(simplificacion de escribir 2 mensajes iguales).

Bueno, os pego los códigos por aqui.

Los scripts funcionan bien pero tienen cosas extrañas:

Lo que sospecho es que cuando pulsas en enviar, ajax envia, pero si rápidamente vuelves a pulsar, vuelve a hacer una segunda peticion, y se me cuela un mensaje javascript con el mismo asunto y mensaje, pero en la db no.

Alguna idea para que no pase eso?

Gracias.




Código de INDEX.PHP


Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Blog</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="blogstyle.css"/>



  <script language="javascript" type="text/javascript">
  // <!--
  

MENSAJESPERMITIDOS = 10;


/*El blog tiene varias cosas.

1.Función que crea un nuevo div con el contenido, ademàs de (meterlo en la db).

2.Función que carga todos los comentarios anteriores de la db.

*/

accion='accion';

function AJAX(){

if(window.XMLHttpRequest){
peticion_http = XMLHttpRequest();
}
else if(window.ActiveXObject){
peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}




//Realizo la petición http

peticion_http.open('GET','procesablog.php?contenido='+contenido+'&asunto='+asunto+'&accion='+accion,true);

peticion_http.send(null);


	peticion_http.onreadystatechange = function(){	if(peticion_http.readyState==4){ respuesta=peticion_http.responseText;}}
	
	return respuesta;
}









//Display
function CreaDiv(DivRoot,asunto,contenido){
//identifico el nodo raiz
DivRoot = document.getElementById(DivRoot);
//Creo los elementos hijos de la raiz
Div = document.createElement("div");
Div.setAttribute("id","post");


Asunto = document.createElement("h3");

/*CRUZ PARA CERRAR**************/

Cruz = document.createTextNode("Cerrar");
Cerrar = document.createElement("a");
Cerrar.appendChild(Cruz);
Div.appendChild(Cerrar);
Cerrar.setAttribute("onclick","accion='borrar';borracomentario(this.parentNode);");



//Asignando un id a la cruz.
Cerrar.setAttribute("id","cerrar");

/**********************************************/





//Creo los elementos nietos de la raiz
Texto = document.createTextNode(contenido);
AsuntoTexto = document.createTextNode(asunto);

//Enlazo nieto e hijo, hijo y padre.
Asunto.appendChild(AsuntoTexto);
Div.appendChild(Asunto);

//Enlazo hijo y padre
Div.appendChild(Texto);


//uno el padre con la raíz
DivRoot.appendChild(Div);



}





//Procesando la informacion

function Procesa(){

DivRoot = "blogdisplay";
//Saco el input
asunto= document.getElementById("blogasunto").value;
//Saco el textarea
contenido = document.getElementById("blogmensaje").value;


//Miro cuantos div hay, y si hay que añadir más o no.
if(document.getElementById(DivRoot).childNodes.length<=MENSAJESPERMITIDOS){



//La función procesa también llamarà a AJAX.

		respuesta = AJAX();//calcula una respuesta entre otras cosas.

		
				if( respuesta == 1){
				//Creo Div
				CreaDiv(DivRoot,asunto,contenido);
				}
				else alert(respuesta);
	
}

}


function borracomentario (div){

//conseguir el asunto bueno.
asunto=div.childNodes[1].firstChild.nodeValue;


div.parentNode.removeChild(div);
//Esta función hará mas cosas cuando haya que borrar el comentario de la db.

AJAX();

}











  // -->
  </script>
</head>
<body>
<h1>::El blog del Espía::</h1><br>

<div id="blog" >

	<label>Asunto</label><br><input type="text" size="26" id="blogasunto" /><br>
	<textarea rows="10" cols="30" id="blogmensaje" ></textarea><br>
	<a onclick="accion='insertar';Procesa();" id="button" >Anotar</a>


</div>
<div id="blogdisplay"></div>








</body>
</html>
y ahora el archivo que uso para procesar este blog. PROCESABLOG.PHP

Código:

<?php 






#Globales
include_once("/home/zeuslife/public_html/inc/globals.php");
#Función Query
include_once("/home/zeuslife/public_html/inc/query_i.php");
/*
#Funciones
include_once("/home/zeuslife/public_html/inc/functions.php");
#Funciones
include_once("/home/zeuslife/public_html/inc/security.php");

$user = $_SESSION['UTSW'];
$userid = $_SESSION['IDTSW'];
*/
//Cambio las variables que vienen, por las buenas.
$userid = 48;
$mensaje = $_GET['contenido'];
$asunto = $_GET['asunto'];
$accion = $_GET['accion'];


//El ajax se ha enviado por post, por tanto, tengo las variables: $userid, $asunto, $mensaje y $accion



//Pongo el userid mio, para hacer las pruevas.



$ultimolog = date("Y")."-".date("m")."-".date("d")." ".date("h").":".date("i").":".date("s");


if ($accion == "insertar"){


//Condición para insertar.
	$que = db_query("SELECT * FROM spy_notebook WHERE userid='$userid' AND asunto='$asunto'");
	$cuantas = mysql_num_rows($que);	
	
	if($cuantas==0){
	$query = db_query("INSERT INTO spy_notebook (userid,ultimoedit,nota,asunto) VALUES('$userid','$ultimolog','$mensaje','$asunto')");
	echo 1;
	}
	else  {
	echo 0;
	}
}

else if ($accion == "borrar"){

$query = db_query("DELETE FROM spy_notebook WHERE userid = '$userid' AND asunto='$asunto'");

echo 1;

}




?>

Supongo que la historia estaria en frenar el javascript, que se esperara a que la petición acabara, pero no se me ocurre como.

Otro problema que tiene, es que misteriosamente, la primera vez que quiero pulsar el boton ANOTAR, no anota, y no se bien bien porqué, y ahi si que no tengo ni sospechas ni nada, no tengo ni idea de porqué.


Muchas grácias, y saludos!!
  #2 (permalink)  
Antiguo 24/05/2010, 11:31
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 10 meses
Puntos: 9
Respuesta: Problema en notebook ajax

Bueno yo uso el framework prototype y lo que hago es que cuando AJAX hace la petición al servidor deshabilito el botón que envia datos y una vez que hace el innerHTML lo vuelvo a habilitar y luego limpiar el formulario, asi evito que el usuario pueda presionarlo varias veces. Puedes usar esa misma idea en tu función.

Por lo segundo bueno porque no chequeas la consola de errores del firefox al hacer clic en el botón. Si te sale algún tipo de error JS lo publicas, sino es problema del servidor y eso debes publicarlo en el foro correspondiente (PHP).

Suerte.
__________________
Quitenme la vida pero no la bebida.
  #3 (permalink)  
Antiguo 24/05/2010, 16:02
Avatar de MaRcElTeLlA  
Fecha de Ingreso: mayo-2010
Ubicación: Martorell
Mensajes: 66
Antigüedad: 14 años, 5 meses
Puntos: 5
Respuesta: Problema en notebook ajax

Cita:
Iniciado por cesarpunk Ver Mensaje
Bueno yo uso el framework prototype y lo que hago es que cuando AJAX hace la petición al servidor deshabilito el botón que envia datos y una vez que hace el innerHTML lo vuelvo a habilitar y luego limpiar el formulario, asi evito que el usuario pueda presionarlo varias veces. Puedes usar esa misma idea en tu función.

Por lo segundo bueno porque no chequeas la consola de errores del firefox al hacer clic en el botón. Si te sale algún tipo de error JS lo publicas, sino es problema del servidor y eso debes publicarlo en el foro correspondiente (PHP).

Suerte.


Muchas grácias Cesar, en cuando pueda probaré, y si lo consigo solucionar cuelgo cómo lo he hecho. Sinó, ya comentaré.

En la consola JS no sale error, por tanto, yo deduzco que algo raro pasa con la variable que saco de responseText.

Explico lo que pensé.

Hacer el script php que si puedo insertar, haga echo 1; Si no puedo insertar, haga echo 0;

Y entonces cojerlo con responseText.

El caso es que creo que es una forma un poco rara...:S ya que te devuelve texto en sí... igual seria más exacto poner un string ya que és texto, i comparar el texto... pero en sí, el texto 1 o "1", si no comparo con === entra igual, con lo cual, no sé si puede estar por aquí el error.

Que dicen, podria ser?


Saludos! Gràcias!
  #4 (permalink)  
Antiguo 24/05/2010, 16:48
Avatar de cesarpunk  
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 943
Antigüedad: 16 años, 10 meses
Puntos: 9
Respuesta: Problema en notebook ajax

Si no deseas mostrar el "1" o el "0" del response puedes hacer una condicional en tu función ajax, algo asi:

Código:
if(ajax.responseText == "1") {
    capa.innerHTML= 'Si guarda';
}else{
    alert('No guarda');
}
Inclusive en el alert() puedes colocar el responseText para que te devuelva los errores del servidor (en caso la salida no sea "1").

Suerte.
__________________
Quitenme la vida pero no la bebida.
  #5 (permalink)  
Antiguo 25/05/2010, 09:39
 
Fecha de Ingreso: enero-2010
Mensajes: 39
Antigüedad: 14 años, 10 meses
Puntos: 1
Respuesta: Problema en notebook ajax

Estimada, tu problema se soluciona realizando la siguiente modificacion en tu codigo, donde dice:

Código Javascript:
Ver original
  1. peticion_http.open('GET','procesablog.php?contenido='+contenido+'&asunto='+asunto+'&accion='+accion,true);

Debes modificarlo por:
Código Javascript:
Ver original
  1. peticion_http.open('GET','procesablog.php?contenido='+contenido+'&asunto='+asunto+'&accion='+accion+"&random="+Math.random(),true);

Lo que hicimos fue agregar un numero aleatorio a tu GET para que así el navegador (Si, estúpidos navegadores) no piense que tu consulta es la misma que la anterior y cargue el CACHE almacenado anteriormente.

Espero solucione tu problema, saludos.
  #6 (permalink)  
Antiguo 25/05/2010, 14:39
Avatar de MaRcElTeLlA  
Fecha de Ingreso: mayo-2010
Ubicación: Martorell
Mensajes: 66
Antigüedad: 14 años, 5 meses
Puntos: 5
Tema solucionado

Hola chavales!!

Bueno, pues al final he resuelto esta historia. Y cómo? De una manera muy simple.

Bueno, primero he hecho caso al compañero que me decia que desactivara el boton.

He puesto una funcion en el onclick que chequeava una variable botonactivado

si esta estaba a uno, hacia su funcion, sino no.


El caso es que no habia suficiente, ya que se creaban como dos hilos en paralelo.

Por un lado ejecutava el script y por otro hacia la peticion
Y claro, al ejecutar el script, comprovaba el valor de la variable para escribir o no, pero como estaba del apartado anterior activado y no le habia dado tiempo al servidor de cambiarlo, directamente, pues me creaba otra nota.

La solución ha sido chequear el estado del servidor, y cuando éste ha cargado, entonces crear la nota.


Asi que si a alguien le pasa, por dios que mire este post.. porque ha sido cabron...


jajajaj

Saludos peña!!

Etiquetas: ajax, notebook
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:39.