jQuery ajax async false to modify html in page

Question

Need an help to solve the issue, got stuck and invested a lots of time.

What I am doing here,

I am submitting form using post traditional method but before the submitting the form, I am using the above jquery ajax code to do some operation and it's working fine.

Using this code when some one click on button, I want to show loader but it do not show because of using async:false in jquery ajax. It shows the loader after completing the ajax success.

In this case it seems for there is nothing happening and no loader works just after click of button.

Html code for showing loader is like this

<button type="submit" id="submit" class="btn btn-primary add_campaign_handler_button" name="submit">
    <i class="fa fa-spinner fa-spin" id="url_button_loader" style="display:none;"></i>
    Save Settings
</button>

jQuery:

$("#submit").click(function() {
  $('#url_button_loader').css('display', 'inline-block');
  var submit_flag = "yes";
  var where_to_appear_for_db = "";
  /* create custom post url */
  var post_name = $("#custom_post_slug").val();
  if (post_name != "") {
    var data = {
      data: post_name
    };
    $.ajax({
      url: ajaxurl,
      type: 'POST',
      data: {
        'action': 'create_custom_post_url',
        'data': data
      },
      beforeSend: function() {
        $('#url_button_loader').css('display', 'inline-block');
      },
      async: false,
      success: function(response) {
        if (response == "exists") {
          Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: wpmlBackObj.smart_link_exists
          });
          $("#retargeting_url").val("");
          submit_flag = "no";
          $('html,body').animate({
            scrollTop: 0
          });
          return;
        }
        $("#tooltip_error").hide();
        $("#campaign_post_id_hidden").val(response);
        get_retargeting_url(response, "");
      }
    });
    if (submit_flag == "yes") {
      return true;
    } else {
      $('#url_button_loader').css('display', 'none');
      return false;
    }
  });
});

If your Server doesn't return something right away, you could have problems with `async:false`. Don't use it. — StackSlave, Dec 16 '19 at 09:40
While you've tried to get around the asynchronous part of **a**jax by using async:false (not recommended) you still have to handle the asynchronous part of `swal`. — freedomn-m, Dec 16 '19 at 09:40
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Dec 16 '19 at 09:41
@StackSlave Will you please suggest me some other way to wait the form submit until I get the ajax response? — Deepak Lakhara, Dec 16 '19 at 10:05
If you are using an HTML `
` and it is submitted, then it will be submitted the "traditional" way `onsubmit`, so you would need to `$('#formId').submit(function(){ /* get rid of that submit button click and put your code in here */ event.preventDefault(); });` or the page will appear to reload. Use AJAX in place of submission. — StackSlave, Dec 16 '19 at 10:38

score 2 · Answer 1 · answered Dec 16 '19 at 09:42

2

Using this code when some one click on button, I want to show loader but it do not show because of using async:false in jquery ajax. It shows the loader after completing the ajax success.

This is why async: false is deprecated.

It locks up the UI completely.

If you want to do anything while the request is being made, don't use async: false.

Instead: Always prevent the default behaviour, and then (if desired) retrigger it once the async operation is complete.

answered Dec 16 '19 at 09:42

Quentin

914,110
126
1,211
1,335

But I don't use this, it submit the form without waiting of ajax request response. Is there any way to stop submit the form until to get the ajax response. – Deepak Lakhara Dec 16 '19 at 09:44
@DeepakLakhara — I refer you to the last paragraph of this answer. – Quentin Dec 16 '19 at 09:45

jQuery ajax async false to modify html in page

1 Answers1