Various successful functions in Ajax

Question

Various successful functions in Ajax

I am currently using an Ajax script to fetch data from my database and insert it into multiple textboxes. Along with posting the data, I also need to perform calculations using these textboxes.

However, upon running the script, I noticed that all calculations are being executed simultaneously. Is there a way to incorporate multiple onSuccess functions in the script to ensure that the codes run in the correct sequence?

Below is the snippet of my current script:

$(document).on('change', '[id^=vat1]', function getVat12() { 
  console.log("getVat2 before ajax", jQuery('#vat1').val());
  jQuery.ajax({ 
    url: './get/get2.php', 
    method: 'POST', 
    data: {'id' : $('#vat1').val()},
    success: function(response){ 
      console.log("getPrice after ajax", jQuery('#vat1').val());
      jQuery('#percentage1').val(response);

      // code 1 
      var numVal1 = Number(document.getElementById('quantity1').value);
      var numVal2 = Number(document.getElementById('price_ex1').value);
      var totalValue1 = numVal1 * numVal2
      document.getElementById('totalprice1').value = totalValue1.toFixed(2);

      //code 2
      var numVal3 = Number(document.getElementById('totalprice1').value);   
      var totalValue2 = numVal3;
      document.getElementById('subtotal').value = totalValue2.toFixed(2);

      //code 3
      var numVal4 = Number(document.getElementById('totalprice1').value);
      var numVal5 = Number(document.getElementById('percentage1').value);
      var totalValue3 = numVal4 / 100 * numVal5
      document.getElementById('vat2').value = totalValue3.toFixed(2);
    }, 
    error: function (request, status, error) { 
      alert(request.responseText); 
    }, 
  });     
});

javascript ajax

Answer 1

Answer №1

If promises are within your realm of expertise, the same outcome can be reached by following these steps.

$(document).on('change', '[id^=vat1]', function fetchVat12() { 
    // Utilize Ajax to retrieve the product price 
    console.log("Obtaining Vat2 before Ajax", jQuery('#vat1').val());
    jQuery.ajax({
        url: './get/get2.php',
        method: 'POST',
        data: {
            'id': $('#vat1').val()
        },
        success: function (response) {
            // Insert the price into the text field 
            console.log("Setting Price after Ajax", jQuery('#vat1').val());
            jQuery('#percentage1').val(response);
            calculateTotalPrice().then(function(res) {
                calculateSubTotal().then(function(res1) {
                    calculateFinalTotal().then(function(res2) {
                        console.log('All Set');
                    });
                });
            });
        },
        error: function (request, status, error) {
            alert(request.responseText);
        },
    });
  });

 function calculateTotalPrice() {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            var numVal1 = Number(document.getElementById('quantity1').value);
            var numVal2 = Number(document.getElementById('price_ex1').value);
            var totalValue1 = numVal1 * numVal2
            document.getElementById('totalprice1').value = totalValue1.toFixed(2);
            resolve('totalGenerated');
        }, 0)
    });
}

function calculateSubTotal() {
    return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal3 = Number(document.getElementById('totalprice1').value);
        var totalValue2 = numVal3;
        document.getElementById('subtotal').value = totalValue2.toFixed(2);
        resolve('subTotalGenerated');
    }, 0)
});
}

function calculateFinalTotal() {
return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal4 = Number(document.getElementById('totalprice1').value);
        var numVal5 = Number(document.getElementById('percentage1').value);
        var totalValue3 = numVal4 / 100 * numVal5
        document.getElementById('vat2').value = totalValue3.toFixed(2);
        resolve('finalAmountGenerated');
    }, 0)
});
}

Answer 2

If promises are within your realm of expertise, the same outcome can be reached by following these steps.

$(document).on('change', '[id^=vat1]', function fetchVat12() { 
    // Utilize Ajax to retrieve the product price 
    console.log("Obtaining Vat2 before Ajax", jQuery('#vat1').val());
    jQuery.ajax({
        url: './get/get2.php',
        method: 'POST',
        data: {
            'id': $('#vat1').val()
        },
        success: function (response) {
            // Insert the price into the text field 
            console.log("Setting Price after Ajax", jQuery('#vat1').val());
            jQuery('#percentage1').val(response);
            calculateTotalPrice().then(function(res) {
                calculateSubTotal().then(function(res1) {
                    calculateFinalTotal().then(function(res2) {
                        console.log('All Set');
                    });
                });
            });
        },
        error: function (request, status, error) {
            alert(request.responseText);
        },
    });
  });

 function calculateTotalPrice() {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            var numVal1 = Number(document.getElementById('quantity1').value);
            var numVal2 = Number(document.getElementById('price_ex1').value);
            var totalValue1 = numVal1 * numVal2
            document.getElementById('totalprice1').value = totalValue1.toFixed(2);
            resolve('totalGenerated');
        }, 0)
    });
}

function calculateSubTotal() {
    return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal3 = Number(document.getElementById('totalprice1').value);
        var totalValue2 = numVal3;
        document.getElementById('subtotal').value = totalValue2.toFixed(2);
        resolve('subTotalGenerated');
    }, 0)
});
}

function calculateFinalTotal() {
return new Promise(function(resolve, reject) {
    setTimeout(function(){
        var numVal4 = Number(document.getElementById('totalprice1').value);
        var numVal5 = Number(document.getElementById('percentage1').value);
        var totalValue3 = numVal4 / 100 * numVal5
        document.getElementById('vat2').value = totalValue3.toFixed(2);
        resolve('finalAmountGenerated');
    }, 0)
});
}

Answer 3

Answer №2

Regarding your inquiry:

Is there a way to incorporate multiple onSuccess functions in my script so that the code executes in the correct sequence?

Indeed, it is possible to create multiple onSuccess functions as stated in the jQuery ajax documentation:

Starting from jQuery 1.5, the success setting can accept an array of functions, each of which will be executed sequentially.

Based on this information, you could utilize an array of callbacks for ordered execution. Below is an example of how you can implement this concept in your code:

$(document).on('change', '[id^=vat1]', function getVat12() { 
  console.log("getVat2 before ajax", jQuery('#vat1').val());
  jQuery.ajax({ 
    url: './get/get2.php', 
    method: 'POST', 
    data: {'id' : $('#vat1').val()},
    success: [code1, code2, code3], 
    error: function (request, status, error) { 
      alert(request.responseText); 
    }, 
  });     
});

function code1(response){ 
  console.log("getPrice after ajax", jQuery('#vat1').val());
  jQuery('#percentage1').val(response);

  // Code 1 
  var numVal1 = Number(document.getElementById('quantity1').value);
  var numVal2 = Number(document.getElementById('price_ex1').value);
  var totalValue1 = numVal1 * numVal2;
  document.getElementById('totalprice1').value = totalValue1.toFixed(2);
}

function code2(response){
  // Code 2
  var numVal3 = Number(document.getElementById('totalprice1').value);   
  var totalValue2 = numVal3;
  document.getElementById('subtotal').value = totalValue2.toFixed(2);
}

function code3(response){ 
  // Code 3
  var numVal3 = Number(document.getElementById('totalprice1').value);   
  var totalValue2 = numVal3;
  document.getElementById('subtotal').value = totalValue2.toFixed(2);
}

Addressing your concern:

Upon executing the script, I notice that all calculations happen simultaneously

This observation contrasts with what Quentin articulated. Since none of the functions are asynchronous, they should run in a sequential manner.

Answer 4

Regarding your inquiry:

Is there a way to incorporate multiple onSuccess functions in my script so that the code executes in the correct sequence?

Indeed, it is possible to create multiple onSuccess functions as stated in the jQuery ajax documentation:

Starting from jQuery 1.5, the success setting can accept an array of functions, each of which will be executed sequentially.

Based on this information, you could utilize an array of callbacks for ordered execution. Below is an example of how you can implement this concept in your code:

$(document).on('change', '[id^=vat1]', function getVat12() { 
  console.log("getVat2 before ajax", jQuery('#vat1').val());
  jQuery.ajax({ 
    url: './get/get2.php', 
    method: 'POST', 
    data: {'id' : $('#vat1').val()},
    success: [code1, code2, code3], 
    error: function (request, status, error) { 
      alert(request.responseText); 
    }, 
  });     
});

function code1(response){ 
  console.log("getPrice after ajax", jQuery('#vat1').val());
  jQuery('#percentage1').val(response);

  // Code 1 
  var numVal1 = Number(document.getElementById('quantity1').value);
  var numVal2 = Number(document.getElementById('price_ex1').value);
  var totalValue1 = numVal1 * numVal2;
  document.getElementById('totalprice1').value = totalValue1.toFixed(2);
}

function code2(response){
  // Code 2
  var numVal3 = Number(document.getElementById('totalprice1').value);   
  var totalValue2 = numVal3;
  document.getElementById('subtotal').value = totalValue2.toFixed(2);
}

function code3(response){ 
  // Code 3
  var numVal3 = Number(document.getElementById('totalprice1').value);   
  var totalValue2 = numVal3;
  document.getElementById('subtotal').value = totalValue2.toFixed(2);
}

Addressing your concern:

Upon executing the script, I notice that all calculations happen simultaneously

This observation contrasts with what Quentin articulated. Since none of the functions are asynchronous, they should run in a sequential manner.

Various successful functions in Ajax

Answer №1

Answer №2

Similar questions

HeaderView in Angular Framework

Transform your CSS styles into Material-UI makestyles

Exploring the capabilities of Socket.IO in Node.js for establishing a connection with an external server

Dragging objects on a map is done using jQuery and it causes them to bounce

Transmitting Data via Socket.io: Post it or Fetch it!

Component re-rendering and initializing useReducer

"Error TS2339: The property specified does not exist within type definition", located on the input field

Unable to remove spaces in string using Jquery, except when they exist between words

I'm encountering a 400 error when using xsr.send within my AJAX request in a .NET Core application

Retrieve the chosen date from the Ajax calendar extender control

Utilizing PNG images with color in CSS, HTML, or JavaScript

What is the best way to sort through the data retrieved using jQuery.ajax()?

How can I personalize the color of a Material UI button?

I am unable to access the state after setting it in useEffect in React. Why is this happening?

The body onload function fails to run upon the page loading

React and Redux Toolkit collaborated to create a seamless shared state management system,

Is it possible to utilize Jquery in order to add an opening <tr> tag and a closing </tr> tag within a dynamic table?

Obtaining the current value with each keystroke

Utilizing the Global Module in NestJs: A Step-by-Step Guide

Utilize jQuery and Ajax for Efficient Record Insertion and Loading