Databases
StackOverflow2013
Postsdbo
POHow to force javascript to execute sequentially
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to force javascript to execute sequentially
    primarykey
    data
    text
    <p>I have a page where the user can click a button to retrieve data via an xhr get request. While the data is loading and being parsed, I want a loading message to be displayed, which will be replaced with the data once it is ready. I'm using dojo libraries, so would rather not include jQuery or other libraries.</p> <p>This is a simplified version of the set up I'm using:</p> <p>HTML</p> <pre><code>&lt;div id = "clickMe"&gt; Click Me! &lt;/div&gt; &lt;div id = "results" class = "hidden"&gt; Please wait while we retrieve the results &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.hidden {display: none;} </code></pre> <p>Javascript</p> <pre><code>// Bind function to click me div var clickMe = document.getElementById('clickMe'); clickMe.addEventListener('click', getResults, false); function getResults () { // Display the loading message while results are retrieved var resultsDiv = document.getElementById('results'); resultsDiv.classList.remove('hidden'); // Get the data and parse it here using a standard dojo.xhrGet method var displayResults = getData(); // Output data to resultsDiv, overwriting loading message resultsDiv.innerHTML = displayResults; } </code></pre> <p>The problem I'm having is that the getResults function always waits until the getData function has completed before removing the 'hidden' class and showing the results div. This means that the user never sees the loading message, only the retrieved data, even if there's a delay while the data is processed. However, if I put an alert in the middle the function is forced to pause, the loading message is displayed:</p> <pre><code>function getResults () { // Display the loading message while results are retrieved var resultsDiv = document.getElementById('results'); resultsDiv.classList.remove('hidden'); // The loading message will be displayed if this alert is included alert ("Hello world!"); // Get the data and parse it here using a standard dojo.xhrGet method var displayResults = getData(); // Output data to resultsDiv, overwriting loading message resultsDiv.innerHTML = displayResults; } </code></pre> <p>I have tried replacing the alert with console.log, but it reverts to not showing the loading message. I've also tried setting up getting the data as a callback function inside displaying the loading message, but again it doesn't show anything. I have also tried with the get request set to sync: true as well as sync: false, but again no luck.</p> <p>How can I make sure the loading message is displayed while waiting for getData?</p> <p>Edit:</p> <p>This is the getData function. I have tried both with and without syncing.</p> <pre><code>function getData() { var targetUrl = //some url; var restResponse; dojo.xhrGet({ url: targetUrl, sync: true; // no difference when this is omitted load: function(result) { restResponse = result; } }); // Parse the rest response - fairly long function so I won't paste it here var parsedResponse = parseResult(restResponse); return parsedResponse; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UShopper
    1. USEmma
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to force javascript to execute sequentially
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. CORemove the `=` from the CSS :-)
      singulars
      1. POHow to force javascript to execute sequentially
      1. USBergi
    2. COduplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call)
      singulars
      1. POHow to force javascript to execute sequentially
      1. USBergi
    3. CO@ Bergi - apologies, I wrote this quickly rather than copy and paste. The = isn't there in my original code :) Have edited accordingly.
      singulars
      1. POHow to force javascript to execute sequentially
      1. USEmma
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload