jQuery Tips — Multiple Ajax Requests, Scrolling, and Search Parts of an Attribute

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.

Wildcards in jQuery Selectors

There are a few ways to add wildcards to selectors that we use for getting elements with jQuery.

To get an element that has an ID that starts with the given string, we can write:

$("[id^=foo]")

The ^ means that we look for an element with an ID that starts with foo .

We can use the $ symbol to search for an element with an ID that ends with the given string.

For example, we can write:

$("[id$=foo]")

The $ means that we look for an element with an ID that ends with foo .

We can substitute id with any other attribute.

Also, we can use the asterisk to look for part of an attribute anywhere.

For instance, we can write:

$("[id*=foo]")

* means that we look for foo in ID’s value anywhere.

Check if a User has Scrolled to the Bottom

We can check if a user has scrolled to the bottom, we can call the scroll method with a callback.

In the callback, we can call the scrollTop property to get current vertical position of the scroll bar for the window.

We add that to the height of the window.

Then we sum that up and then compare that against the document’s height.

For instance, we can write:

$(window).scroll(() => {
   if ($(window).scrollTop() + $(window).height() === $(document).height()) {
     console.log("scroll to bottom");
   }
});

We compare the scrolled height with the document’s height to see if the user scrolled to the bottom.

Wait Until All jQuery Ajax Requests are Done

To wait until all jQuery Ajax requests are done, we can call the when method with the jQuery ajax calls as arguments.

This way, we wait for all requests to be done and get all the results.

For instance, we can write:

const ajax1 = () => {
  return $.ajax({
    url: "/foo",
    dataType: "json",
    data,
    //...
  });
}

//...

$.when(ajax1(), ajax2(), ajax3())
  .done((a1, a2, a3) => {
    //...
});

We have 3 Ajax functions ajax1 , ajax2 , and ajax3 .

They all return the promise that we get by calling $.ajax .

We make the promise for each request, then we pass in that result.

Then we call done to get the result for all the promises.

a1 , a2 , and a3 are the result for each promise.

Since $.ajax return promises, we can pass that into Promise.all .

For instance, we can write:

Promise.all([ajax1(), ajax2(), ajax3()])
  .then(([a1, a2, a3]) => {
    //...
  }).catch(() => {
    //...
  })

Promise.all lets us get the results for all the requests just like jQuery’s when .

We pass in an array of promises, which ajax returns.

Then we call then to do something after the promises are done.

The result for each promise is in an array in the first parameter of the then callback.

With the async and await syntax, we can write:

const makeRequests = async () => {
  try {
    const results = await Promise.all([ajax1(), ajax2(), ajax3()]);
  } catch(ex) {
    console.log(ex);
  }
}

We just rewrite the code with a shorter syntax, but the code does the same thing as the then .

results has an array of results from all the promises.

Select <a> Element with href that Ends with Some String

We can get an <a> element that ends with a given string with the $= operator.

For instance, we can write:

$('a[href$="foo"]')

This will get the href attribute that ends with the foo .

In addition to $= , there are many operators to let us check for other parts of the string.

= is exactly equal.

!= is not equal.

^= means starts with.

$= is ends with.

*= means contains.

~= means the match contains a word.

|= means it starts with the given prefix. A prefix is something like prefix- .

Conclusion

There are many operators to let us match various parts of an attribute value.

Also, we can check if the user scrolled to the bottom by comparing the height.

Wildcards can be included with CSS selectors used with jQuery.

There are many ways to run code after all jQuery Ajax requests are done.