title: How to make a progress loading in Ajax function while the function is inserting the data in the database?
body: <p>I have problem regarding inserting the data in the database. I have a function which inside the function has a 4 ajax, so to make story short.</p>
  
  <p>I want to make a progress loading inside of on click function to determine that my 4 ajax inserting data already done or finish. after already insert the data in the database. It will automatically redirect my page to the other page. Is it possible to make it on the on click function? if so can you help me guys to make that kind of progress bar.</p>
  
  <p><strong>Goal: If I click the submit button, the progress bar will load automatically until the storing the data in the database finish, and after loading the progress bar it will automatically redirect to the other page.</strong></p>
  
  <p>I have here my on click function for submitting all the ajax function.</p>
  
  <pre><code>var orderNumber;
  var orders = [];
  var menu;
  
  var customer_id = $('#hidden_customer_id').val();
  
  $('#add_to_cart').on('click', function() {
  
    orders = [];
    menu = undefined;
  
    $('.tbody_noun_chaining_order').children('tr').each(function() {
  
      $row = $(this);
  
      if ($row.hasClass('condimentParent')) {
  
        // store a previous menu to the orders array if exists.
        if (menu) {
          orders.push(menu);
        }
        menu = {
          'total': $row.find('.total').text(),
          'name': $row.find('.parent_item').text(),
          'customer_id': customer_id,
          'condiments': {
            'Item': [],
            'Qty': [],
            'Total': []
          }
        };
  
      } else if ($row.hasClass('editCondiments')) {
  
        menu.condiments.Item.push($row.find('.child_item').text());
        menu.condiments.Qty.push($row.find('.condiments_order_quantity').text());
        menu.condiments.Total.push($row.find('.total').text());
      }
    });
  
    if (menu) {
      orders.push(menu);
    }
  
  
  
     storeOrder(orders);
  
    $('table#noun_chaining_order').find('.tbody_noun_chaining_order').empty();
    $('.append_customer_noun_order_price').text('0.00');
    $('.total_amount').text('0.00');
    $('.total_amount').text('0.00');
    $('.rate_computation').text('0.00');
  
  
  });
  </code></pre>
  
  <p>This is my function inside of this are the ajax inserting data in the database.</p>
  
  <pre><code>    function storeOrder(data) {
  
    var customer_id = $('#hidden_customer_id').val();
    var place_customer = $('#place_customer').text();
    // reset 
  
  
    $id = "";
    $total_amount  = $('.total_amount').text();
    $append_customer_noun_order_price = $('.append_customer_noun_order_price').text();
    $tax_rate = $('.rate_computation').text();
    $delivery_rate = $('.del_rate').text();
  
    var sessionTransactionNumber_insert = localStorage.getItem('sessionTransactionNumber');
  
      $.ajax({
        url:'/insert_customer_order_properties',
        type:'POST',
        data:{
          'hidden_customer_id': customer_id,
          'hidden_customer_address': place_customer,
          'sessionTransactionNumber': sessionTransactionNumber_insert
        },
        success:function(data) {
  
          $id = data[0].id;
  
          $.ajax({
            url:'/insert_customer_payment_details',
            type:'POST',  
            data:{
              'hidden_customer_id': customer_id,
              'total_amount': $total_amount,
              'customer_sub_total': $append_customer_noun_order_price,
              'tax_rate': $tax_rate,
              'id_last_inserted': $id
            },
            success:function(data) {
  
               localStorage.removeItem('sessionTransactionNumber');
  
            }
          })
        }
      })
  
    for (var num in orders) {
  
  
      // simulate storing the order
      $.ajax('/insert_wish_list_menu_order', {
  
        type: 'POST',
        // as the call is asynchronous, make sure to provide all required reference data along with the call.
        context: orders[num].condiments,
  
        data: {
          // 'json': '{"orderNumber":' + (orderNumber++) + '}',
          'append_customer_noun_order_price': orders[num].total,
          'append_customer_noun_order': orders[num].name,
          'customer_id': customer_id
        },
        success: function(orderNumber) {
  
          $order_number = orderNumber[0].id; // meron na tayong kuha ng main item..
  
          $.ajax({
            url:'/insert_customer_order_details_properties',
            type:'POST',
            data:{
              'order_number': $order_number,
              'data_attribute_wish_order_id': $id,
            },
            success:function(data) {
  
                console.log(data);
  
            }
          })
  
          if (orderNumber !== undefined) {
  
            $.ajax('/insert_wish_list_menu_belong_condiments', {
              context: orderNumber,
              type: 'POST',
              data: {
                'ParentId': orderNumber,
                'Item': this.Item,
                'Qty': this.Qty,
                'Total': this.Total
              },
              success: function(result) {
  
                console.log(result);
  
  
                // setTimeout(function () { 
                //   swal({
                //     title: "Wow!",
                //     text: "Message!",
                //     type: "success",
                //     confirmButtonText: "OK"
                //   },
                //   function(isConfirm){
                //     if (isConfirm) {
                //       window.location.href = "//stackoverflow.com";
                //     }
                //   }); }, 1000);
  
              },
  
            })
  
          }
        }
      })
    }
  }
  </code></pre>