Keyup function is only working once for first letter of input

Question

I have a text input where the user enters a desired page name

I am trying to use the keyup function to fire Ajax to check if the page exists, however when typing something like index Ajax is only sending the I (first letter) and not running again.

Script:

If I add console.log(html); It shows the values correctly in the log, but $("#NotAllowed").replaceWith(data); is only showing the first letter or 2 (if I type fast!)

What am I missing?

user_5947043 · Answer

The issue has nothing to do with your AJAX call (although async:false is still unnecessary and bad practice in general).

The problem is what the jQuery replaceWith function does. As per the documentation it removes the element(s) it matches, and replaces the entire element with the content you supply to the function. Note it replaces the entire element, not just its inner content!

So the reason it only works once is simply because after the first execution, the "NotAllowed" element no longer exists - replaceWith has removed it and replaced it with the response from your AJAX request!

If you want to update the content of an element without removing it, in jQuery you can use .html() or .text() (depending on whether the content is HTML or plain text). In this case .text() would be fine:

success: function(response) {
    $("#NotAllowed").text(response);
    $('#loader_image').hide();
}

Demo: https://jsfiddle.net/k3461n7h/2/

user_1762224 · Answer

You should wrap your keyup function in a debounce. This will save you some time and load when requesting data from the server.

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    const [ { target } ] = args;
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(target, args);
    }, wait);
  };
}

const handleKeyUp = debounce(function() {
  $('#loader-image').show();
  $.ajax({
    type: 'GET',
    async: false,
    url: 'CheckPageName.php',
    data: { 'PageName': $(this).val() },
    cache: false,
    success: function(data, textStatus, jqXHR) {
      $('#not-allowed').html(data);
      $('#loader-image').hide();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#not-allowed').html('Not found...');
      // Hide the mask after 1 second, to mimic waiting for a response
      // Remove this timeout once the response is hooked-up
      setTimeout(function() {
        $('#loader-image').hide();
      }, 1000);
    }
  });
}, 250); // Search only after 250ms once typing has stopped

$('#loader-image').hide();
$('#page-name').on('keyup', handleKeyUp);

#loader-image {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  font-weight: bold;
}





  
    
      Search existing page name
      
      Check for an existing page.
    
  
  
  

Loading...

Keyup function is only working once for first letter of input

2 Answers