Envíe solo una solicitud de publicación de Ajax con keydown () - jQuery
Frecuentes
Visto 2,967 veces
1
Así que aquí esta mi situación:
Tengo un montón de elementos DOM en una clase ".editable" con el atributo contentEditable adjunto.
Para cada elemento, instalo un Ajax POST con
keydown()
, pero antes de que se envíe la solicitud ajax, verifico si keydown() me da una tecla TAB o ENTER, y si es así, entonces el POST ajax tiene éxito.
El problema que tengo en este momento es que si se mantiene presionada la tecla TAB o la tecla ENTRAR, termino enviando múltiples Ajax POST. ¿Cómo haría para detener esto?
NOTA: No quiero separar el evento con .off() porque quiero que esos eventos sigan existiendo después de que finalice el POST de ajax.
¡Cualquier ayuda o recomendación sería muy apreciada!
(function($, window, document) {
/* Namespace */
$.fn.SaveEditable = function() {
var settings = {
context: null,
position: null,
content: "(empty)",
element: "(empty)",
data_id: "(empty)"
};
var s, keyCode;
function init(e, options) {
s = $.extend({}, settings, options);
keyCode = e.keyCode || e.which;
//If Enter or Tab key is pressed
if(keyCode == 9 || keyCode == 13) {
e.preventDefault();
s.context.blur();
sendAjax();
}
} //End init
function sendAjax() {
$.ajax({
url: 'save.php',
type: 'POST',
data: { user_id: <?=$user_id;?>, sort_id: <?=$currentSort;?>, element: s.element, data_id: s.data_id, content: s.content },
success: function (data) {
if(data) {
var obj = jQuery.parseJSON(data);
//Do something with obj
}
$(".ajax-status")
.addClass("success")
.html("Updated content successfully");
},
error: function() {
$(".ajax-status")
.addClass("error")
.html("An error has occurred. Please try again.");
}
});
} //End sendAjax
/* Initilize */
return this.each(function(i, domEl) {
$(this).on({
keydown: function(e) {
init(e, {
context: $(this),
position: i,
content: $(this).text(),
element: $(this).data('element'),
data_id: $(this).data('id')
});
}
});
});
};
})(jQuery, window, document);
Entonces se llama así:
$('.editable').SaveEditable();
3 Respuestas
2
Este es un ejemplo de prevención de una solicitud XHR si todavía está pendiente
$(function(){
var xhr;
$("#my-input").keydown(function(){
if (!xhr || xhr.readyState === 4) {
xhr = $.ajax({...});
}
});
});
contestado el 03 de mayo de 12 a las 21:05
Más o menos... Excepto que los semáforos generalmente se asocian con la prevención de que los subprocesos se pisoteen entre sí. Así que no enturbiaría el término... Juan mendes
1
Hm, ¿qué tal usar keyup
¿evento?
Como se dice en documentos de jQuery:
El evento keyup se envía a un elemento cuando el usuario suelta una tecla en el teclado.
ACTUALIZACIÓN: Para corregir el enfoque del elemento, puede dejar keydown
evento con:
keydown: function(e) {
e.preventDefault();
if ((e.keyCode || e.which) == 9) {
return false;
}
}
contestado el 03 de mayo de 12 a las 20:05
1
function init(e, options) {
var check = true;
s = $.extend({}, settings, options);
keyCode = e.keyCode || e.which;
//If Enter or Tab key is pressed
if(keyCode == 9 || keyCode == 13) {
e.preventDefault();
s.context.blur();
if(check)
sendAjax();
check = false;
}
} //END init
Al activar la tecla, verifique que vuelva a ser verdadero.
contestado el 03 de mayo de 12 a las 22:05
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery ajax events keydown or haz tu propia pregunta.
También puede verificar si el XHR existente aún está pendiente y no enviarlo. - Juan Mendes
@mattytommo El problema con keyup() es que si mantengo presionada la tecla TAB, entonces $(esto) terminará siendo un elemento aleatorio en la página. - istos
@Juan Mendes ¿Puede dar un ejemplo? - istos
@jbabey Utilicé keypress() al principio, pero la verificación keyCode == 9 no funcionará. ¿Cómo verifico si se presionó la tecla TAB al usar la función keypress() de jQuery? El check keyCode == 13 para la tecla Enter funciona bien. - istos
@istos exactamente. la pestaña NO activará la pulsación de tecla ya que no es un "carácter". - jbabey