Consecutively making asynchronous calls can be messy. Is there a cleaner alternative?
The issue with the current approach is its lack of clarity:
ajaxOne(function() {
// do something
ajaxTwo(function() {
// do something
ajaxThree()
});
});
In this code snippet, the anonymous functions serve as callbacks triggered upon receiving a response from the server.
Since I'm relying on a third-party API for AJAX requests, I am in search of a more standardized solution.
Utilizing functional programming can be beneficial in solving this issue. For instance, with jsdeferred, you can structure your code like this:
next(ajaxOne).next(ajaxTwo).next(ajaxThree).error(function(e){alert('An error occurred:' + e)})
The "sequential" ajax functions - ajaxOne, ajaxTwo, and ajaxThree - are designed to receive the return value of their predecessor function as a parameter. If additional parameters need to be passed, they can be defined in a global object before initiating the chain of ajax calls.
If you find yourself with a single nested function, feel free to keep it as it is. However, when dealing with multiple nested calls, it's best practice to extract these callbacks into a separate method and invoke it from the nested function...
ajaxOne(function(result) { handleAjaxOneCallback(result, someExtraNeededArg); } );
function handleAjaxOneCallback(result, someExtraNeededParam) {
// perform actions
ajaxTwo(function(result) { handleAjaxTwoCallback(result, myFoo, myBar); });
}
function handleAjaxTwoCallback(result, foo, bar) {
// take appropriate steps
ajaxThree(/* ... */);
}
Although I am relatively new to JavaScript, I recently faced a similar issue when using the jQuery ajax function. The task was to upload multiple documents via POST to a server in a specific order. Nesting callbacks seemed like it would lead to messy code. After reading some answers, I devised a solution that worked well for me. I created a single function with a switch statement to handle different callback scenarios:
var callback = function(sCallIdentifier, callbackParameters){
switch(sCallIdentifier){
case "ajaxOne":
doYourStuff(callbackParameters); //do your stuff for ajaxOne
ajaxTwo(function(newCallbackParameters){
/*define a anonymous function as actual method-callback and pass the call-identifier, together with all parameters, to your defined callback function*/
callback("ajaxTwo", newCallbackParameters);
});
break;
case "ajaxTwo":
doYourStuff(callbackParameters);
ajaxThree(function(newCallbackParameters){
callback("ajaxThree", newCallbackParameters);
});
break;
case "ajaxThree":
doYourStuff();
break;
}
});
If there are better alternatives, please feel free to share. While I may not be a JavaScript expert, this approach has proven effective for me.
Best, René
Edit:
I later discovered that Promises offer a more efficient solution to this problem.
When you find yourself not needing the closure scope in your callbacks, it's best to put the callbacks into separate functions and invoke them by their respective names. Here's an example:
var requestOne = function() {
makeAjaxCall(responseOne);
}
var responseOne = function() {
//perform some actions...
makeAjaxCall(responseTwo);
}
var responseTwo = function() {
//carry out additional actions...
}
I need to make a change in my form where I want to disable a button, but not all the inputs are mandatory. Even though I have specified which inputs need to be filled in the code, I still have to fill all the inputs in the form. How can I modify this? $ ...
Currently, I am working on developing a simple game using next.js and node.js. However, when I test the game, I notice that there are multiple "connected" logs being displayed. Even though I have only one client (with just a single tab open in Chrome), the ...
Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...
I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. My expectation i ...
Struggling to find a way to remove a substring within an angular expression while using the ng-repeat directive. The controller resides in an external JavaScript file, and here is the corresponding HTML code snippet. function myController($scope, $http ...
I have a simple HTML page that contains a table with two columns and two rows. My goal is to convert these two columns into tabs, so that when each row is clicked, it will display either a paragraph or another basic table with one row and column. All of t ...
I've been working on setting up a lambda function to handle authentication, validation, and sending of a contact form. As I'm new to lambda functions, my code might have some flaws. However, despite my efforts, I am struggling to modify the resp ...
I'm encountering an issue with the search functionality when it uses Ajax to load data from a JSON file. For example, if I search for Yemen, the record for Yemen does not get selected or highlighted properly. Here is the complete source code - could ...
I'm attempting to create a countdown timer that reveals a link after 20 minutes. Currently, this is my progress... <script type="text/javascript"> window.onload = function() { countDown('my_div1', '<a href="cdtl.html" ...
I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...
As I venture into using Material UI along with React, my goal is to create organized "pages" consisting of steps in sets of four for a specific process. My initial attempt displayed all 10 steps on a single view, despite having the pagination correctly ca ...
Within my data, there exists a value {{catadata2.EndorsementList['0'].Rating}}. This value can be either 3, 4, or 5. Based on this value, I am looking to display the image <img src="/assets/img/rating.png" /> a certain number of times. For ...
The data is being fetched from the API and here is the response object: { "abc": [{ "xyz": "INFO 1", "pqr": "INFO 2" }, { "xyz": "INFO 3", "pqr": "INFO 4" } ] } We are lookin ...
Currently, I am in the process of developing an Authentication page using a combination of node.js, express.js, and mysql2. The user ID and password entered on the webpage are then passed through app.post('/login',...). However, upon submitting t ...
Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...
Trying to incorporate a media query breakpoint in Chakra UI global styles has presented some challenges. An attempt was made using template literals for property names, but it was discovered that this approach is not supported: import { ChakraProvider, e ...
I am experimenting with loading content from a different page using AJAX. The website I am currently testing on is dev.dog-company.com. Here's the code snippet that I have been working on: $('a[rel="load"]').click(function(){ //var sit ...
This code is located inside a loop <div class="card card-fluid"> @php $counterId++; $formId = 'startLog'.$counterId; @endphp {!! Form::open(['id'=>$formId,'class'=>'ajax-form','method& ...
Out of nowhere, I started encountering the error message below: TypeError: $.ajax(...).done(...).fail(...).complete is not a function Below is my code snippet: this.sendRequest = function (type, extension, data, successCallback, successMsg, failMsg, ...
I'm currently trying to extract the ID that is selected (#about, #home, #blog) or the full path (http://localhost:3000/#about, http://localhost:3000/#home) from the router. I am working with Next.js version 14.0.3 This is my approach: My current URL ...