Databases
StackOverflow2013
Postsdbo
POHow to turn on progress bar if jquery post starts to take too long
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to turn on progress bar if jquery post starts to take too long
    primarykey
    data
    text
    <p>Is it possible to only show some kind of progress after a jquery ajax post starts to take too long, but not bother showing it if fairly instantaneous? I have the following code that uses a setTimeout to delay showing my progress indicator (it's basically a twitter bootstrap modal that I enable and it has a progress indicator gif in it), but it appears to not work when I am debugging and put a brek point on my server side code, which then, in my client-side setTimeout, it should go off, but the setTimeout is never called until my server returns a response (so I never get the progress bar then if taking too long). It works fine when I don't use setTimeout to delay it (basically not delaying at all), or if I do such a short delay that the progress indicator shows up almost instantaneously, but not with the 1.5 sec delay.</p> <p>Here is my javascript:</p> <pre><code>var progressModalRunning = false; var needModalProgress = true; // document.ready events/functions to call $(function () { $("form").on("submit", function (event) { event.preventDefault(); var form = $(this); // We check if jQuery.validator exists on the form if (!form.valid || form.valid()) { toggleModalProgressAndButtons(form, true); $.post(form.attr('action'), form.serializeArray()) .done(function (json) { json = json || {}; // In case of success, we redirect to the provided URL or the same page. if (json.success) { location = json.redirect || location.href; } else if (json.errors) { displayErrors(form, json.errors); toggleModalProgressAndButtons(form, false); } }) .error(function () { displayErrors(form, ['An unknown error happened.']); toggleModalProgressAndButtons(form, false); }); } }); }); // show/hide modal progress indicator and disable/enable modal buttons var toggleModalProgressAndButtons = function (form, toggle) { if (toggle) { showProgress(); } else { hideProgress(); } } // display validation errors var displayErrors = function (form, errors) { needModalProgress = false; var errorSummary = getValidationSummaryErrors(form) .removeClass('validation-summary-valid') .addClass('validation-summary-errors'); var items = $.map(errors, function (error) { return '&lt;li&gt;' + error + '&lt;/li&gt;'; }).join(''); var ul = errorSummary .find('ul') .empty() .append(items); }; // Show a progress indicator in it's own modal var showProgress = function () { // we will delay it by 1.5 seconds - don't want to bother showing if the response is that fast, // because it makes the screen to appear to flicker since backdrop for modal is darker setTimeout(function () { if (needModalProgress) { progressModalRunning = true; $('#progress').modal({ keyboard: false, backdrop: 'static' }); } }, 1500); } // hide the progress indicator var hideProgress = function () { if (progressModalRunning) { progressModalRunning = false; needModalProgress = true; $('#progress').modal('hide'); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTheCloudlessSky
    1. USuser1368182
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POHow to turn on progress bar if jquery post starts to take too long
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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