Hidden Nuggets of JQuery Goodness
Richard Alvarez
Jun 28,
2018 |
Posted in
Digital Experience
jQuery.
The name makes most front-end developers smile due to it’s ease of use and great functionality, not to mention the browser compatibility. However, it is good to remember how large the library is and there are always more benefits to be gained from it. In particularly, I’d like to bring everyone’s attention to the seldom used promises and utilizing “$.on()“ for dynamically added content.
A promise is an one-time event, which is generally the result of an AJAX call. The promise gets evaluated when the AJAX call returns and can trigger on success, failure, or completion. Here is an example of a normal AJAX event with the callbacks after each event.
|
10
11
12
13
14
15
|
$.ajax({ url: "example.json", success: successFunction(), failure: failureFunction(), complete: completeFunction()}); |
Using this method, you can only have one function inside of each callback, unless you have the function call other functions…which gets messy fast.
To make it easier to work with, you can use promises to set this callbacks. It’s easier to show then verbally explain, so take a look at the following:
|
10
11
12
13
14
15
|
var promise = $.ajax({url: "example.json"});promise.success(successFunction());promise.failure(failureFunction());promise.complete(completeFunction()); |
At first glance, this looks no better and possibly worse than the original call. However, you can now add additional event functions easily later in the code by doing a similar call. More importantly, you can chain these events with other AJAX calls to ensure both asynchronous events are done.
|
10
11
12
13
14
15
16
17
18
|
var promise1 = $.ajax({url: "example.json"});var promise2 = $.ajax({});$.when(promise1, promise2).done(function(jqXHR1, jqXHR2) {//Both AJAX calls are done and you can safely interact with the results}); |
There a ton of other possibilities with promises and I encourage you to check them out!
The other “nugget” I want to talk about is utilizing the “$.on()” for dynamically added content. You can take bind events onto the DOM element that the dynamic content will be added to and filter based off the dynamic content selector. For instance, if the dynamic content is going inside a div with the id of dyn-content and will contain a button with an id of do-something and a click event, here is what the jQuery code would look like:
|
10
|
$("#dyn-content").on("click", "#do-something", clickFunction()); |
Each click within the “dyn-content” area will have jQuery check if it matches the “do-something” id before it runs the clickFunction. Being able to run the jQuery event functions before adding the content allows you to keep all of your event functionality together and not have to re-trigger it every time content gets added and removed from the page.
Enjoy and always keep it classy!
Want to learn more? Click here to consult with an expert today.