Display the HTML element prior to initiating the synchronous AJAX request

Question

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax()

Here's my HTML:

<div id="waiting_div"></div>

This is the CSS:

#waiting_div {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 999;
    display: block;
}

These are the JavaScript functions:

jQuery(document).ready(function() {
    jQuery("#waiting_div").hide();
});

function set_response_waiting() {
    jQuery("#waiting_div").show();
}
function del_response_waiting() {
    jQuery("#waiting_div").hide();
}

Here's the main JavaScript code:

jQuery("#save_changed_prices").click(function(){
    set_response_waiting(); <-- the div is displayed here

    var len = window.prices.length; //array with data for sending
    var i = 0;

    for (i = 0; i < len; i++) {
        if (window.prices[i].price >= 0) {
            jQuery.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {...... },
                async: false
            }).done(function (data) {
                ...
            }).fail(function () {
                ...
            }).always(function () { 
                ...
            });
        }
    }

    del_response_waiting(); <-- the div is hidden here
});

However, the set_response_waiting() function doesn't display my "#waiting_div" before sending.

I need to refresh or update the DOM tree before sending. Any suggestions on how to achieve this?

The following approach also doesn't work:

jQuery.ajax({
                        type: 'POST',
                        url: ajaxurl,
                        data: {
                            'action': 'update_price',
                            'car_id': car_id,
                            'dep_city_id': window.prices[i].dep,
                            'arr_city_id': window.prices[i].arr,
                            'price': window.prices[i].price
                        }, 
                        beforeSend: set_response_waiting(),
                        async: false
                        })

javascript jquery html css ajax

Answer 1

Answer №1

Ajax operates asynchronously as you likely know, so within your JavaScript function, it progresses directly from set_response_waiting() to del_response_waiting(); the AJAX requests are not executed 'in a linear manner' here. Consider the following approach:

jQuery("#save_changed_prices").click(function(){
        var length = window.prices.length; // array containing data to send
        var index = 0;

        for (index = 0; index < length; index++) {

            if (window.prices[index].price >= 0) {

                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                      del_response_wait(); // hiding the div
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(set_response_waiting()); // displaying the div here
            }
        }

  });

Answer 2

Ajax operates asynchronously as you likely know, so within your JavaScript function, it progresses directly from set_response_waiting() to del_response_waiting(); the AJAX requests are not executed 'in a linear manner' here. Consider the following approach:

jQuery("#save_changed_prices").click(function(){
        var length = window.prices.length; // array containing data to send
        var index = 0;

        for (index = 0; index < length; index++) {

            if (window.prices[index].price >= 0) {

                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                      del_response_wait(); // hiding the div
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(set_response_waiting()); // displaying the div here
            }
        }

  });

Answer 3

Answer №2

Utilize, Commit.

When using jQuery ajax, remember that it is an asynchronous method. This means that your function will show and immediately hide.

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- display div here

        var len = window.prices.length; //array containing data to be sent
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            if (window.prices[i].price >= 0) {
                deferreds.push(
                    jQuery.ajax({
                        type: 'POST',
                        url: ajaxurl,
                        data: {...... },
                        async: false
                    }).done(
                        function (data) {
                           ...
                        }
                    ).fail(function () {
                            ...
                        }
                    ).always(function () { ...
                        });
                );
            }
        }
        // wait for all ajax requests to be done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hide div
        });
  });

--- UPDATE

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- display div here

        var len = window.prices.length; //array containing data to be sent
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            var deferred = $.Deferred();
            deferreds.push(deferred.promise());

            if (window.prices[i].price >= 0) {
                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(function () {
                        deferred.resolve(); // Resolve it here!
                        ...
                    });
                );
            }
        }
        // wait for all ajax requests to be done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hide div
        });
  });

---- UPDATE (last)

jQuery("#save_changed_prices").click(function(){
    var send_price = function() {
      var deferreds = [];

      var len = window.prices.length; //array containing data to be sent
      var i = 0;
      for (i = 0; i < len; i++) {
          if (window.prices[i].price >= 0) {
              deferreds.push(
                jQuery.ajax({
                    type: 'POST',
                    url: 'http://jsonplaceholder.typicode.com/posts',
                    data: { price : window.prices[i].price },
                    async: false
                }).done(function (data) {
                    console.log('done', data);
                }).fail(function () {
                    console.error(done, data);
                }).always(function () { 

                })
              );
          }
      }
      $.when.apply(null, deferreds).done(function() {
          del_response_waiting();
      });

    }
    set_response_waiting();
    setTimeout(send_price); // setTimeout for browser to redraw the screen!!

});

View the working example on jsfiddle. :)

https://jsfiddle.net/yourimiyi/rsu4vo3m/

Answer 4

Utilize, Commit.

When using jQuery ajax, remember that it is an asynchronous method. This means that your function will show and immediately hide.

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- display div here

        var len = window.prices.length; //array containing data to be sent
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            if (window.prices[i].price >= 0) {
                deferreds.push(
                    jQuery.ajax({
                        type: 'POST',
                        url: ajaxurl,
                        data: {...... },
                        async: false
                    }).done(
                        function (data) {
                           ...
                        }
                    ).fail(function () {
                            ...
                        }
                    ).always(function () { ...
                        });
                );
            }
        }
        // wait for all ajax requests to be done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hide div
        });
  });

--- UPDATE

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- display div here

        var len = window.prices.length; //array containing data to be sent
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            var deferred = $.Deferred();
            deferreds.push(deferred.promise());

            if (window.prices[i].price >= 0) {
                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(function () {
                        deferred.resolve(); // Resolve it here!
                        ...
                    });
                );
            }
        }
        // wait for all ajax requests to be done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hide div
        });
  });

---- UPDATE (last)

jQuery("#save_changed_prices").click(function(){
    var send_price = function() {
      var deferreds = [];

      var len = window.prices.length; //array containing data to be sent
      var i = 0;
      for (i = 0; i < len; i++) {
          if (window.prices[i].price >= 0) {
              deferreds.push(
                jQuery.ajax({
                    type: 'POST',
                    url: 'http://jsonplaceholder.typicode.com/posts',
                    data: { price : window.prices[i].price },
                    async: false
                }).done(function (data) {
                    console.log('done', data);
                }).fail(function () {
                    console.error(done, data);
                }).always(function () { 

                })
              );
          }
      }
      $.when.apply(null, deferreds).done(function() {
          del_response_waiting();
      });

    }
    set_response_waiting();
    setTimeout(send_price); // setTimeout for browser to redraw the screen!!

});

View the working example on jsfiddle. :)

https://jsfiddle.net/yourimiyi/rsu4vo3m/

Answer 5

Answer №3

In response to the initial comment made by rsn, it is true that the issue occurs but cannot be resolved in this manner.

To demonstrate how the issue manifests, I have implemented 2-second timeouts in the code below for illustrative purposes:

jQuery("#save_changed_prices").click(function() {
  $('#waiting_div').show();

  setTimeout(function(){
    jQuery.ajax({
      type: 'POST'
    }).done(
      function(data) {
        $('#waiting_div').html('show after ajax submit');
        setTimeout(function(){
            $('#waiting_div').hide();
        }, 2000);
      }
    ).fail(function() {}).always(function() {});
  }, 2000);
});

An example showcasing the issue can be viewed here

Answer 6

In response to the initial comment made by rsn, it is true that the issue occurs but cannot be resolved in this manner.

To demonstrate how the issue manifests, I have implemented 2-second timeouts in the code below for illustrative purposes:

jQuery("#save_changed_prices").click(function() {
  $('#waiting_div').show();

  setTimeout(function(){
    jQuery.ajax({
      type: 'POST'
    }).done(
      function(data) {
        $('#waiting_div').html('show after ajax submit');
        setTimeout(function(){
            $('#waiting_div').hide();
        }, 2000);
      }
    ).fail(function() {}).always(function() {});
  }, 2000);
});

An example showcasing the issue can be viewed here

Display the HTML element prior to initiating the synchronous AJAX request

Answer №1

Answer №2

Answer №3

Similar questions

Display popup depending on the post's identification number

Having trouble retrieving jQuery variables in PHP using POST method

Using Yii's CArrayDataProvider to set a unique key field for a button's ID within a

Navigating through arrays in JavaScript - optimizing performance

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

looking to retrieve the corresponding value of a specific array key

What could be causing the parameter to be null when attempting to pass an object using MS AJAX PageMethods?

Tips for choosing the class=" * " using jQuery's .html() function

Challenges with Vuex and updating arrays using axios

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

When the webpage is launched, the font styles specified in the CSS do not take effect and

Search bar that automatically adjusts based on the size of the containing div

Guide on Redirecting in Express.js

Create a custom CSS style to replace the default jQuery hide() function

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input

Customize Angular Material's Mat-Dialog background blur/darkening effect

How to make Vuetify grid columns wrap and fill the full height

Choose the currently active md-tab within the md-dialog's md-tab-group

Error in jQuery and Canvas Image Crop: The index or size is invalid, exceeding the permissible limit

Tips for connecting to multiple items in an md-select element from within a directive