Quiero un checkbox en una página web. Cuando hago clic en él, envía una solicitud ajax al servidor. Cuando el servidor responde, quiero que el checkbox cambie. Puedo arreglar todo, excepto el hecho de que el checkbox cambia de inmediato al hacer clic.
Respuestas
¿Demasiados anuncios?¿Estás seguro de que realmente quieres hacer esto? Una solicitud Ajax puede llevar su tiempo. Cuando el usuario no recibe ninguna respuesta, puede verse tentado a hacer clic una y otra vez, hasta que suceda algo. Cuando esto desactiva el botón (otra vez después de algún tiempo), el usuario se confunde aún más.
Más bien piensa en proporcionar una respuesta inmediata (por ejemplo, marcando la casilla) y muestra un indicador al lado de ella, que señale la comunicación con el servidor (por ejemplo, la famosa rueda giratoria). Cuando el resultado regrese, oculta el indicador y desactiva la casilla si es necesario. También puedes querer evitar enviar el formulario durante la solicitud ajax.
Probablemente puedas hacer algo como esto: cuando se hace clic en la casilla, establece la casilla como "deshabilitada" (esto vuelve la casilla de verificación gris y la vuelve no editable), haz tu llamada ajax, y una vez que recibas el retorno ajax elimina la "deshabilitación" de la casilla. Algo así (usando jQuery, no probado):
$('#mycheckbox').click( function() {
var checkbox = this;
$(checkbox).attr('disabled','1');
$.post( url, data, function() {
// si es exitoso
$(checkbox).removeAttr('disabled');
}
}
this.checked=!this.checked
restablecerá el estado del checkbox a lo que era antes de hacer clic. Esto debería funcionar en todos los navegadores sin que el estado parpadee demasiado.
sendAjaxRequest()
hará su magia y cuando la solicitud regrese, establecerá el estado correspondiente del checkbox. Pasar this
a sendAjaxRequest()
debería darte una referencia al checkbox para que puedas ajustar su estado. Si eso falla, simplemente utiliza document.getElementById("theChkbox")
para recuperar una referencia y establecer su estado.
- Ver respuestas anteriores
- Ver más respuestas