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

Issue: "Access-Control-Allow-Origin does not allow origin null" error message is returned when attempting to access a PHP file using jQuery's ajax method with dataType text/html selected

Setting model value in Angular 2 and 4 from loop index

Ways to incorporate ng-app into an HTML element when HTML access is limited

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Ways to change attributes of deeply embedded objects?

Employing global variables in JavaScript files with Vue3

The 'canvas' module could not be located in the system.Here are the required stacks:- /var/task/index.js- /var/runtime/index.mjs

Is there a way to bring in a variable from the front end script?

What is preventing the Image Handler from being triggered by an AJAX client?

Error: Vue is unable to access the property '_modulesNamespaceMap' because it is undefined

Adaptive Container with Images that are not stretched to full width

encountering a type mismatch error while trying to retrieve data from an array

What is the best way to distinguish between inline javascript and dynamically created content in Express/Node.js?

When working with AngularJS, you can enhance your application by implementing a global AJAX error handler if one has

What causes the child component to re-render when only the prop is changed and useCallback is used?

Failure to inherit props in child components when using React-Redux

I encounter obstacles when trying to execute various tasks through npm, such as downloading packages

Struggling to convert a JSON file into a TableView within a JavaScript application developed with Appcelerator

How can I implement a pause in my JavaScript code?

Exploring the properties of individual Vue components on a single page with v-for loop