The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

Question

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

I am in search of a solution that will allow an AJAX API call to finish before the containing function does without relying on jQuery as a dependency for just one REST call...

After going through multiple solutions, all of which involve using jQuery, I came across this question How do I return the response from an asynchronous call?. However, I am determined to find a way to achieve this without adding jQuery as a dependency.

Currently, when a failing zip code value is inputted and the user clicks Submit, an alert pops up displaying other failed business rules but not the error related to "Mismatch in State and Zip."). Upon console logging, it seems that the REST call is successfully made and a response is received, but the alert(error) gets triggered before the async REST call completes and appends the value of error.

JS

function checkForm(form){
  var state = form.state;
  var zip = form.zip;
  var error = '';
  var flag = 0;

  var ckZip = checkZip(state, zip);
  if (ckZip.flag == 1){
    flag = 1;
  }
  error += ckZip.error;

  // show error and disable form submit if flag == 1
  if (flag == 1){
    alert(error);
    return false;
  }
}

function checkZip(state, zip){
  var state = form.state;
  var zip = form.zip;
  var error = '';
  var flag = 0;

  // check if value entered
  if (zip == ''){
    error += "Please provide a zip/postal code.\r\n";
    flag = 1;
  }

  // business rule: cannot enter - in a ZIP
  if (zip.search(/\x2d/) != -1){
    error += "Please remove dash from zip or postal code.\r\n";
    flag = 1;
  }

  // check if state and zip match
  // IMPORTANT: Fill in your client key
  var clientKey = "this-is-a-valid-key";
  var zipcode = zip.substring(0, 5);
  var url = "https://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" + zipcode + "/radians";
  // Make AJAX request
  var request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400) {alert("Got it");
        // Success!
        var data = JSON.parse(this.responseText);alert(data.state);
        if (data.state != state){
          error += "Mismatch in State and Zip.\r\n";
      flag = 1;
        }
      } else {
        // Error :(
        var response = JSON.parse(this.responseText);
        error += "error: " + response.error_msg;
      }
    }
  };

  request.send();
  request = null;

  return {flag: flag, error: error};
}

HTML

<form>
  <select id="state" name="state">
      <option value="" selected=""></option>
      <option value="AA">APO AA</option>                
      <option value="AE">APO AE</option>                
      <option value="AP">APO AP</option>                
      <option value="AL">Alabama</option>               
      <option value="AK">Alaska</option>                
      <option value="AZ">Arizona</option>               
      <option value="AR">Arkansas</option>                
      <option value="CA">California</option>                
      <option value="CO">Colorado</option>                
      <option value="CT">Connecticut</option> 
      <!-- ... -->              
  </select>

  <input type="text" id="zip" name="zip" value="">   
  <input type="Submit" id="Submit" name="Submit" value="Continue" onclick="return checkForm(this.form)">
</form>

javascript ajax

Answer 1

Answer №1

To actually retrieve information from the ajax call within your function, you may consider making the ajax call synchronous. However, I advise against this approach as it can freeze the UI of the browser tab, leading to a negative user experience. In addition, it is not necessary.

Instead, opt for an asynchronous call and learn how to handle the inability of the function to return information directly as a return value. You can refer to this question and its answers for guidance on how to achieve this. It's simpler than one might think. :-)

If you want to make your checkZip function work asynchronously, follow these steps:

Firstly, move the ajax call from the submit button to the form itself:

<form onsubmit="return checkZip(this)">

Next, ensure that checkZip always prevents form submission by returning false, and then submit the form once the ajax call is completed:

function checkZip(form) {

    // ...

    request.onreadystatechange = function() {
        // ...
        if (/* it's okay to submit the form*/) {
            form.submit(); // Does NOT call the handler again
        } else {
            // show error to user
        }
    };

    // Prevent initial form submission
    return false;
}

Keep in mind that since the form was not actually submitted when the "Submit" button was pressed, it will not include the Submit field with the value

Continue</code. If needed, you can remove the <code>name

from the submit button and add a hidden field instead:

<input type="hidden" name="Submit" value="Continue">

While it is technically feasible to make the ajax call synchronous by setting the third argument of open to false, I strongly discourage doing so.

request.open('GET', url, false);
// ----------------------^^^^^

Once again, I highly recommend avoiding synchronous ajax calls.

Answer 2

To actually retrieve information from the ajax call within your function, you may consider making the ajax call synchronous. However, I advise against this approach as it can freeze the UI of the browser tab, leading to a negative user experience. In addition, it is not necessary.

Instead, opt for an asynchronous call and learn how to handle the inability of the function to return information directly as a return value. You can refer to this question and its answers for guidance on how to achieve this. It's simpler than one might think. :-)

If you want to make your checkZip function work asynchronously, follow these steps:

Firstly, move the ajax call from the submit button to the form itself:

<form onsubmit="return checkZip(this)">

Next, ensure that checkZip always prevents form submission by returning false, and then submit the form once the ajax call is completed:

function checkZip(form) {

    // ...

    request.onreadystatechange = function() {
        // ...
        if (/* it's okay to submit the form*/) {
            form.submit(); // Does NOT call the handler again
        } else {
            // show error to user
        }
    };

    // Prevent initial form submission
    return false;
}

Keep in mind that since the form was not actually submitted when the "Submit" button was pressed, it will not include the Submit field with the value

Continue</code. If needed, you can remove the <code>name

from the submit button and add a hidden field instead:

<input type="hidden" name="Submit" value="Continue">

While it is technically feasible to make the ajax call synchronous by setting the third argument of open to false, I strongly discourage doing so.

request.open('GET', url, false);
// ----------------------^^^^^

Once again, I highly recommend avoiding synchronous ajax calls.

Answer 3

Answer №2

To ensure synchronous behavior, you have the option to use the XMLHTTPRequest object in a synchronous mode:

var request = new XMLHttpRequest();
request.open('GET', url, false);

It is worth noting that this method is generally discouraged by many developers.

Alternatively, you could place your alert function inside a setTimeout with a short delay to give the request enough time to complete processing:

setTimeout(function() {
    // Display error message and prevent form submission if flag is equal to 1
    if (flag == 1) {
        alert(error);
        return false;
    }
}, 1000);

Answer 4

To ensure synchronous behavior, you have the option to use the XMLHTTPRequest object in a synchronous mode:

var request = new XMLHttpRequest();
request.open('GET', url, false);

It is worth noting that this method is generally discouraged by many developers.

Alternatively, you could place your alert function inside a setTimeout with a short delay to give the request enough time to complete processing:

setTimeout(function() {
    // Display error message and prevent form submission if flag is equal to 1
    if (flag == 1) {
        alert(error);
        return false;
    }
}, 1000);

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

Answer №1

Answer №2

Similar questions

Updating React component when a property in an array of objects changes by utilizing the useEffect() hook

What is the best way to pass the reference of the p tag every time the button is clicked?

Passing the unique identifier of a record in NextJS to a function that triggers a modal display

What is the most elegant way to retrieve a new item from Firebase and read it?

Ways to extract information from PayFast

Utilizing a drop-down menu to display two distinct sets of data tables

Ensuring the checkbox is disabled prior to editing

Is it achievable to set a tab value for an HTML form element?

Check out how to utilize the jQuery .ajax Post method in a function

How do I specify a unique directory for pages in Next.js that is not within the src or root folders?

Setting the content-type for static assets in NuxtJS

Tips for customizing vue-bootstrap-datetimepicker: Adjusting width and adding icons for a personalized touch

Encountering an issue with NextJS useRouter when it is utilized within a function

Retrieve both the key and value from an array of objects

Show information - press the button on the current PHP page

Having npm start is causing an error to be displayed

Using ngFor in Angular 2-5 without the need for a div container wrapping

When the second click triggers the loading of a JSON lot via AJAX

Adjust the aesthetic based on whether the field is populated or empty

Disregard the popstate triggered by Safari's Initial Page Load