Loading screen with Synchronous ajax call

Question

I am having an Web app made with Ember.js and node.js that has an option to swtich between 3 languages. The words are stored in json files. As of now i am using synchronous ajax call to fetch the data for all the pages(around 7 or 8 calls). The function

function translate(iso,coll)
{
    var x = jQuery.parseJSON(
         jQuery.ajax({
            url: window.location.origin+'/translate?iso='+iso+'&coll='+coll,
            async: false,
            dataType: 'json',
             success : function(){
             }
         }).responseText
    );
    console.log(x);
    return x;
};

My question is how can show an animated laoding screen until my calls are done. Thank you.

The problem is that i cant because all the views in Ember are dependant on the data from the json, if i put async true it throws an error — Niko, Mar 16 '15 at 12:31
Then that is your actual problem which you need to post after producing a sort of [mcve](http://stackoverflow.com/help/mcve) — deostroll, Mar 16 '15 at 12:33
Turning `async` off defeats the whole purpose of AJAX. If all the views in Ember are dependent on data fetched using AJAX, then initialize the views **after** all data has been successfully fetched, using the `.done()` deferred object/promise that is native to the `$.ajax()` method. — Terry, Mar 16 '15 at 12:34

score 1 · Answer 1 · answered Mar 16 '15 at 12:32

Create an overlay section, hide it for the initial load. when you click the button and call the translate function show the overlay and hide it as an when it goes to success callback.

HTML

<div id="dvLoading" style="
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
">
  Loading
</div>

JAVASCRIPT

function translate(iso,coll)
{
    $("#dvLoading").show();
    var x = jQuery.parseJSON(
         jQuery.ajax({
            url: window.location.origin+'/translate?iso='+iso+'&coll='+coll,
            async: false,
            dataType: 'json',
             success : function(){
                $("#dvLoading").hide();
             }
         }).responseText
    );
    console.log(x);
    return x;
};

score 0 · Answer 2 · answered Mar 16 '15 at 13:40

AJAX:

Ajax (also AJAX; /ˈeɪdʒæks/; short for asynchronous JavaScript and XML)1[3] is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used in the AJAJ variant), and the requests do not need to be asynchronous.[4]

Taken from here.

As you can see, AJAX is asynchronous by definition, therefore it is paradoxical and sub-optimal to make it synchronous. You need to modify your functionalities, so your request can run asynchronously and everything depending on it would be initialized/calculated in the .done() or the success(). Read more here.

Loading screen with Synchronous ajax call

2 Answers2