Question

So here is my situation:

• I have a bunch of DOM elements in a class “.editable” with the contentEditable attribute attached to them.

• For each element I instantiate an Ajax POST with keydown(), but before the ajax request is sent, I check to see if the keydown() gives me a TAB or an ENTER key, and if so then the ajax POST succeeds.

The issue I am having right now is that if the TAB key or the ENTER key is held down, I am ending up sending multiple Ajax POSTs. How would I go about stopping this?

NOTE: I don’t want to detach the event with .off() because I want those events to still exist after the ajax POST is done.

Any help or recommendations would be much appreciated!

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

Then it is called like so:

$('.editable').SaveEditable();

Answer 1

Here’s an example of preventing an XHR request if it’s still pending

$(function(){
    var xhr;
    $("#my-input").keydown(function(){    
         if (!xhr || xhr.readyState === 4) {
            xhr = $.ajax({...});
         }
    });

});