Envíe solo una solicitud de publicación de Ajax con keydown () - jQuery

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();

preguntado el 03 de mayo de 12 a las 20:05

También puede verificar si el XHR existente aún está pendiente y no enviarlo. -

@mattytommo El problema con keyup() es que si mantengo presionada la tecla TAB, entonces $(esto) terminará siendo un elemento aleatorio en la página. -

@Juan Mendes ¿Puede dar un ejemplo? -

@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 exactamente. la pestaña NO activará la pulsación de tecla ya que no es un "carácter". -

3 Respuestas

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

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

Por favor vea mi respuesta a @mattytommo. ¿Cualquier otra sugerencia? - istos

@istos Por favor, eche un vistazo a la respuesta actualizada. Posiblemente el problema propuesto ayudará. - Visión

    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 or haz tu propia pregunta.