Alternative for ajax async: false

Question

break property fires before ajax completed. Only solution I've found is to make "async: false". But it is deprecated. Is there any better option to wait until ajax completed without setting async to false?

$.getJSON(jsonUrl, function(data) {
  var type, json, options;

  var globalData = data;

  $.each(globalData.properties, function(key, value) {
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          success: function(data) {
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });

        break;
    }


    listItem += '<li class="questionnaire_item">' + 
                  '<label>' + 
                    '<div class="question">' + 
                      value.description + ':' + 
                    '</div>' + 
                    '<div class="input">' + 
                      type + 
                    '</div>' + 
                  '</label>' +
                '</li>';

    type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

The solution is to use promises, however another issue you have is that you're creating multiple `select` elements with the same `id` attribute — Rory McCrossan, Mar 31 '17 at 14:47
oh, id will be deleted) how can i use promise in this case? I tried few variants, but they did not work... — Yuriy Rybin, Mar 31 '17 at 14:53
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Mar 31 '17 at 14:55

score 1 · Accepted Answer · answered Mar 31 '17 at 14:51

The best way to fix this would be to put your break, or your action, in the success callback of your ajax request, beside that you could use a boolean set in a beforeSend callback of your ajax request and wait while your boolean is still false :

$.getJSON(jsonUrl, function(data) {
var type, json, options;

var globalData = data;

  $.each(globalData.properties, function(key, value) {
  var isBusy = false;
    switch(value.type) {
      case 'string':
        type = '<input type="text">'
        break;
      case 'int':
        type = '<input type="number" min="0">'
        break;
      case 'decimal':
        type = '<input type="number" min="0" step="0.01">'
        break;
      case 'date':
        type = '<input type="date">'
        break;
      case 'boolean':
        type = '<input type="checkbox">'
        break;
      case 'json':
        json = './assets/json/' + value.json_name + '.json'

        $.ajax({
          async: false,
          url: json,
          beforeSend: function(){
            isBusy = true;
          },    
          success: function(data) {
            isBusy = false;
            $.each(data, function(index, item) {
              options += '<option value=' + item.key + '>' + item.value + '</option>'
            })

            type = '<select id="issue-form"><option disabled selected value></option>' + options + '</select>';
          }
        });
            while(isBusy) {}
        break;
    }


listItem += '<li class="questionnaire_item">' + 
              '<label>' + 
                '<div class="question">' + 
                  value.description + ':' + 
                '</div>' + 
                '<div class="input">' + 
                  type + 
                '</div>' + 
              '</label>' +
            '</li>';

type = '';
  })

  form.innerHTML += listItem;
  $('.content').append(form)});

But once agains it breaks the whole point of having an AJAX request, you better just prepare your data before loading the page and then show it.

To be honest this solutions is not the best one, i would go with promise as Rory said in the comments.

when i put the break to callback or in promise it throws error( — Yuriy Rybin, Mar 31 '17 at 15:03
well you should add the actions you are trying to do after the break into the success, it will break anyways it's asynchrone — Nicolas, Mar 31 '17 at 15:05

Alternative for ajax async: false

1 Answers1

Linked