Buenas a todos, estoy empezando a internarme en el mundo ajax y aunque creia haber comprendido el funcionamiento basico hay algo que no logro hacer, a ver si consigo explicarme.
Tengo un HTML con una tabla que simula un calendario anual, en las filas los meses y en las columnas los dias.
Lo que estoy intentando es que al clickar en una celda se haga una peticion AJAX al servidor en la cual almacenaré en una base de datos las fechas clickadas. Hasta aqui no hay problema.
Para añadir efecto visual, pretendo que al hacer click en la celda de la tabla, dicha celda se me ponga con el fondo amarillo y al recibir la respuesta de que todo ha ido bien pase el fondo de la celda a color rojo (una forma de decir que amarillo=se esta procesando la peticion, rojo=la peticion ha sido procesada correctamente).
El caso es que parecia que funcionaba, pero cuando he puesto un retardo en el proceso que se ejecuta contra bases de datos para que me diera tiempo en la pagina original a clickar varias celdas a la vez y ver si las procesaba, solo me cambia de color a rojo la ultima celda clickada, quedandose en amarillo las demas.
He puesto un id a cada <td> con la fecha a la que corresponde. En primer caso lo habia hecho con el evento onClick del <td> y con una funcion:
Código:
function clickCierres(element,xurl){
element.className='cerrando';
request=getAjaxRequest();
request.onreadystatechange=function(){
if (request.readyState==4){
if (request.status==200 || window.location.href.indexOf("http")==-1){
var ele=document.getElementById(request.responseText);
ele.className='';
ele.style.backgroundColor='red';
// alert(request.responseText);
}
else{
//alert("ERROR " + request.responseText)
}
}
}
var datos="xdate="+escape(element.id);
request.open("POST", xurl, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(datos);
//alert(element.id);
}
Quedando los <td> de la tabla de la siguiente forma:
Código:
<table id="large">
<thead>
<th>Mes</th>
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th>17</th><th>18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th>24</th><th>25</th><th>26</th><th>27</th><th>28</th><th>29</th><th>30</th><th>31</th>
</thead>
<tr>
<th id="xnone">Enero</th>
<td id="2010-01-01" onClick="clickCierres(this,'http://www.miservidor/proceso.php');">x</td>
<td id="2010-01-02" onClick="clickCierres(this,'http://www.miservidor/proceso.php');">x</td>
<td id="2010-01-03" onClick="clickCierres(this,'http://www.miservidor/proceso.php');">x</td>
<td id="2010-01-04" onClick="clickCierres(this,'http://www.miservidor/proceso.php');">x</td>
// etc....
Pero no funcionaba asi que hice un cambio, pensando que igual era un problema por usar en todos la misma funcion asi que cambie la asignacion del onclick a una asignacion dinamica con esta funcion....
Código:
<script type="text/javascript">
$(document).ready(function(){
var tabla=document.getElementById("large");
var filas = tabla.rows;
for(var i=0; i<filas.length; i++) {
var fila = filas[i];
var columnas = fila.cells;
for(var j=0; j<columnas.length; j++) {
var columna = columnas[j];
if((columna.id!="xnone")&&(columna.id!=""))
columna.onclick=function(){
var xurl='http://www.miservidor/proceso.php';
//alert(xurl+"---->"+this.id);
this.className='cerrando';
request=getAjaxRequest();
request.onreadystatechange=function(){
if (request.readyState==4){
if (request.status==200 || window.location.href.indexOf("http")==-1){
var ele=document.getElementById(request.responseText);
ele.className='';
ele.style.backgroundColor='red';
// alert(request.responseText);
}
else{
//alert("ERROR " + request.responseText)
}
}
}
var datos="xdate="+escape(this.id);
request.open("POST", xurl, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(datos);
}
}
}
});
</script>
Peor tampoco funciona.
No se si me he explicado bien, si me he explicado bien, alguien sabe que pasa??
Saludos.