Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Question

Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Having one submit button for a function necessitates the running of two ajax functions when the submit button is clicked for validation purposes.

    <div class="form-group btn-group">
                  <input type="button" class="btn btn-link" value="Back" onclick="history.back()">
                  <input type="button" class="btn btn-primary" class="btn btn-link" value="View results" onclick="validateAndSubmit();">
                </div>

   async function validateAndSubmit() {
            $('.alert-danger').hide();
            $('.alert-text ul').text("");

            var hasError = false;

  <cfif form.output_type eq "cl2stats">

      $('.alert-danger').hide().find('ul').empty();
      var monthYear1 = $("#date1").val();
      var date1 = monthYear1.slice(0, 3) + "01/" + monthYear1.slice(3, 7);
      const monthYear2 = $("#date2").val(),
        splitted = monthYear2.split('/'),
        month = splitted[0],
        year = splitted[1],
        date2 = `${month}/${new Date(year, month, 0).getDate()}/${year}`;

      await makeGetRequest({
        url: "url?method=validateDateRange",
        data: {date1: date1, date2: date2}
      })
              .done(function (response) {
                if (response == "") {
                  document.getElementById("EIMEF_WATER_UTILITY_STATS").submit();
                } else {
                  $('.alert-danger').show().find('ul').html(response);
                  hasError = true;
                }
                $(window).scrollTop(0);
              });

  </cfif>

    if (hasError == false) {
      $.ajax({
        type: "POST",
        url: "url?method=regStatsExceedancesFilter2",
        dataType: "json",
        data: ({
          formString: formData
        }),
        success: function (response) {
          if (response == "success") {
            $('#EIMEF_WATER_UTILITY_STATS').trigger("submit");
          } else {
            $('.alert-danger').show();
            $('.alert-danger .alert-text ul').append(response);
            $(window).scrollTop(0);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("Status: " + textStatus + '\n' + "Error: " + errorThrown);
        }
      });
    }
  }

In case the first ajax call returns an error, it's vital that the form remains on the page instead of proceeding to the next page as it currently does.

javascript ajax coldfusion

Answer 1

Answer №1

When making an asynchronous call with ajax, your page will not wait for validations if you are using a regular submit button and form. One way to handle this is by using preventDefault() to stop the form from being submitted.

After completing the first ajax call, you can then proceed to make the second ajax call. Once the second ajax call is successful, you can choose to submit the form or not.

window.addEventListener("load", function(){
  /* Defining Functions */
  const Validations = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  }

  /* Defining Functions */
  const Validation2 = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* Second validation passed */
        /* Submit the form */
        $("#MyForm").unbind('submit').submit();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  }

  /* Attaching Events */
  // If you include your JS in a CFM page, you need to use 2 # to avoid errors
  $("#MyForm").submit(function(e){
    e.preventDefault();
    Validations();
  });


});

Alternatively, if you prefer to keep the two ajax calls separate, you can bind both ajax calls to the click event of your button. However, you won't be able to synchronize their responses.

In JavaScript, you can attach multiple events to the same element, and they will stack on top of each other.

window.addEventListener("load", function(){
  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 1 */
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  });

  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 2 */
    $.ajax({
      type: "POST",
      url: "...2",
      dataType: "json",
      data: {
        "somedata2": "...2"
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  });
});

Answer 2

When making an asynchronous call with ajax, your page will not wait for validations if you are using a regular submit button and form. One way to handle this is by using preventDefault() to stop the form from being submitted.

After completing the first ajax call, you can then proceed to make the second ajax call. Once the second ajax call is successful, you can choose to submit the form or not.

window.addEventListener("load", function(){
  /* Defining Functions */
  const Validations = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  }

  /* Defining Functions */
  const Validation2 = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* Second validation passed */
        /* Submit the form */
        $("#MyForm").unbind('submit').submit();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  }

  /* Attaching Events */
  // If you include your JS in a CFM page, you need to use 2 # to avoid errors
  $("#MyForm").submit(function(e){
    e.preventDefault();
    Validations();
  });


});

Alternatively, if you prefer to keep the two ajax calls separate, you can bind both ajax calls to the click event of your button. However, you won't be able to synchronize their responses.

In JavaScript, you can attach multiple events to the same element, and they will stack on top of each other.

window.addEventListener("load", function(){
  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 1 */
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  });

  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 2 */
    $.ajax({
      type: "POST",
      url: "...2",
      dataType: "json",
      data: {
        "somedata2": "...2"
      },
      success: function (response) {
        /* First validation passed */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Handle Error */
      }
    });
  });
});

Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Answer №1

Similar questions

Exporting modules in Node.js allows you to use functions

Opting for Fetch API over Ajax for requests that involve Allow-Credentials and require POST methods

IIS Alert: Missing Images, CSS, and Scripts!

Ajax Syntax Error: Unexpected Token U

Issue with MVC 4 Asynchronous File Upload: Controller Always Receiving Null Value

Nested Ajax request fails and triggers a full page reload

Uploading videos to YouTube via Ajax

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Getting the checked values from an AngularJS Material checkbox

Customizing the search functionality in Yii2 gridview to implement asynchronous data retrieval using

Tips for automating the click on a link that loads ajax data with selenium and python

Troubleshooting jQuery click event listeners and AJAX requests: Issue with second listener not functioning properly

The printing function for the window system can cause disruptions to the layout of the table

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Dynamically showing a div using JavaScript and AJAX after changing the window location

Utilizing AJAX to showcase individual PHP files

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Developing the latest version of ngx-charts

Issue with accessing Scope value in AngularJS directive Scope

What is the method for arranging objects in AngularJS using a custom sorting sequence?