jQuery Tips — Arrays, Ajax, Textbox Changes, and Arrow Keys

Despite its age, jQuery is still a popular library for manipulating the DOM.

In this article, we’ll look at some tips for working with jQuery.

Remove Specific Value from an Array Using jQuery

jQuery has a grep method to let us return a new array that doesn’t include the item that we want to remove.

For instance, we can write:

const arr = [1, 2, 2, 6, 2, 6, 8, 3];
const itemToRemove = 2;
const newArr = $.grep(arr, (value) => {
  return value !== itemToRemove;
});

We call $.grep with an array to check for.

And we pass in a callback to return an array that returns a boolean expression to return the matches.

value !== itemToRemove indicates that we return an array without the itemToRemove ‘s value.

Use Basic Authentication with jQuery and Ajax

With jQuery, we can use basic authentication if we set the request header.

To do that, we can write:

beforeSend(xhr) {
  const token = btoa(`${username}:${password}`);
  xhr.setRequestHeader ("Authorization", `Basic ${token}`);
},

We create a token from the username and password combined together.

Then we set the Authorization header with the token.

Binding Arrow Keys with jQuery

We can listen for arrow key presses by using the keydown method.

For instance, we can write:

const arrow = { left: 37, up: 38, right: 39, down: 40 };

$(window).keydown((e) => {
  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

We listen to the key down on the window.

Then we can get the event object in the parameter of the callback.

It has the which property with the key code for the key that we pressed.

Then we can use a switch statement to look for matches for the key that’s pressed.

Converting a JavaScript Object to an Array Using jQuery

We can convert a JavaScript object to an array using the map method.

It works with both objects and arrays.

For instance, we can write:

const obj = {
  1: 'foo',
  2: 'bar'
};
const array = $.map(obj, (value, index) => {
  return [value];
});
console.log(array);

We call map with our obj object as the first argument.

In the 2nd argument, we pass in a callback that takes value of each object entry as the first parameter.

The index is the key that’s being looped through is the 2nd parameter.

We return the value in the array to return put the item in the array.

It should be enclosed in an array.

Then we can check the array value with the console log.

How to Detect that a Textbox’s Content has Changed

To detect that a text box’s content has changed, we can listen to the input event.

For example, we can write:

$('#textarea').on('input', () => {
  //...
});

We can do the same thing with bind :

$('#textarea').bind('input', () => {
  //...
});

We can also listen to the propertychange and paste events to listen to input change and pasting text.

For instance, we can write:

$('#textarea').on('input propertychange paste', () => {
  //...
});

Scroll Automatically to the Bottom of the Page

We can scroll automatically to the bottom of the page by calling animate to scroll to the bottom of the page.

For instance, we can write:

$('html,body').animate({ scrollTop: document.body.scrollHeight }, "fast");

We call animate with an object.

The object has some options for scrolling.

scrollTop is the y-coordinate that we want to scroll to.

The 2nd argument is the speed of the animation.

Show Loading Spinner in jQuery

We can show and hide a loading spinner with the show and hide method.

For instance, we can write:

const spinner = $('#spinner').hide();
$(document)
  .ajaxStart(() => {
    spinner.show();
  })
  .ajaxStop(() => {
    spinner.hide();
  });

spinner has the loading spinner element.

We hide it at the beginning.

Then when the Ajax request starts, we show the spinner.

This is done by passing in a callback to the ajaxStart method and then calling show on our spinner element.

Likewise, we can hide the spinner by call spinner.hide() in the callback of the ajaxStop method.

Conclusion

jQuery has a grep method that acts like the filter method of JavaScript arrays.

We can listen to arrow key presses with jQuery.

ajaxStart and ajaxStop let us run code when the Ajax request starts and end respectively.

jQuery’s map method works with objects and arrays.