Along with transitioning away from jQuery, my main focus is to make my code more efficient. In large scale enterprise applications, the excessive use of jQuery and JavaScript can become problematic.
I have decided to switch back to vanilla JavaScript for better development practices. Although I rely on jQuery to make KendoUI work in my applications, I aim to keep the rest of my code clean and streamlined by using shorthand and asynchronous techniques whenever appropriate.
The JavaScript statement I want to execute should accomplish the following objectives:
- Locate the tabs container
- Attach an event listener to monitor the tabs Id when it's event is triggered as
shown - Asynchronously load a KendoUI grid while waiting for completion
So, to achieve this using concise vanilla JavaScript, I implemented the following:
//Find the tabs using the query selector
document.querySelector('#main-tabs')
//Add an event listener that listens for the `shown` bootstrap tab event
.addEventListener('shown.bs.tab', (e) => {
//Extract the id of the tab and if its name equals "overview-tab",
//then load the grid; otherwise, do nothing.
(e.target.id == "overview-tab") ? load_grid_opportunities() : null;
});
Now, let's move forward and create the asynchronous function responsible for loading the grid. I created the async function called load_grid_opportunities, followed by standard KendoUI jQuery widget binding.
const load_grid_opportunities = async () => {
$('#grid_opportunities').kendoGrid({
//shortened for brevity
});
}
At this point, I am stuck wondering how to properly await the async function in my if/else statement. My initial instinct was to use the await keyword inline like this:
(e.target.id == "overview-tab") ? await load_grid_opportunities() : null;
However, this approach did not work as it resulted in an unexpected argument error. I also attempted using parentheses to encapsulate the request, but that did not resolve the issue either.
(e.target.id == "overview-tab") ? (await load_grid_opportunities()) : null;
So, I am now puzzled about how to correctly utilize await with my function. Any suggestions would be greatly appreciated!