Databases
StackOverflow2013
Postsdbo
POjQuery AJAX triggering too quickly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery AJAX triggering too quickly
    primarykey
    data
    text
    <p>I have a relatively simple jQuery AJAX call wrapped in a function and I am testing my error functionality. The problem I am facing is the AJAX call happens too quickly! It is causing my 'H6' and '.loading' elements to start repeating. The behaviour I require is to remove the elements, then call the ajax.</p> <pre><code>function getAvailability(form) { var str = $(form).serialize(), warning = $('#content h6'); if ( warning.length &gt; 0 ) { $(warning).remove(); $('&lt;div class="loading"&gt;Loading&amp;hellip;&lt;/div&gt;').insertAfter(form); } else { $('&lt;div class="loading"&gt;Loading&amp;hellip;&lt;/div&gt;').insertAfter(form); } $.ajax({ type: "POST", url: "someFile", data: str, success: function(calendar) { $('.loading').fadeOut(function() { $(this).remove(); $(calendar).insertAfter(form).hide().fadeIn(); }); }, error: function() { $('.loading').fadeOut(function() { $('&lt;h6&gt;Unfortunately there has been an error and we can not show you the availability at this time.&lt;/h6&gt;').insertAfter(form); }); } }); return false; } </code></pre> <p>I would love to sequence it like so -> Remove 'warning' from page, add .loading. Then trigger AJAX. Then fade out .loading, add &amp; fade in warning/calendar dependent on success.</p> <hr> <p>I have amended my original code, and I have got the function to behave as expected, primarily because I have disabled the submit button during the ajax process.</p> <pre><code>function getAvailability(form) { var str = $(form).serialize(), btn = $('#property_availability'); // Disable submit btn, remove original 'warning', add loading spinner btn.attr("disabled", "true"); $('.warning').remove(); $('&lt;div class="loading"&gt;Loading&amp;hellip;&lt;/div&gt;').insertAfter(form); $.ajax({ type: "POST", url: "public/ajax/returnAvailability1.php", data: str, success: function(calendar) { $('.loading').fadeOut(function() { $(this).remove(); $(calendar).insertAfter(form).hide().fadeIn(); }); }, error: function() { $('.loading').fadeOut(function() { $(this).remove(); $('&lt;h6 class="warning"&gt;Unfortunately there has been an error and we can not show you the availability at this time.&lt;/h6&gt;').insertAfter(form); btn.removeAttr("disabled"); }); } }); return false; } </code></pre> <p>I believe that the original sequence was not working as expected due to the time delay created by the fadeOut() functions.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USfreeMagee
    1. USfreeMagee
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery AJAX triggering too quickly
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt isn't possible for your ajax to start before warning is removed the way your current code is written. If you are seeing otherwise, it might be a rendering issue, or you are using `async: false` in `ajaxSetup` somewhere. Also, `$(warning).remove` should be `warning.remove`
      singulars
      1. POjQuery AJAX triggering too quickly
      1. USKevin B
    2. COyou could wrap your ajax inside of a `setTimeout` or dont put it in the same function as the warning remove
      singulars
      1. POjQuery AJAX triggering too quickly
      1. USDavid Chase
    3. COAlso, `if ( warning.length > 0 )` is unnecessary in this case.
      singulars
      1. POjQuery AJAX triggering too quickly
      1. USBlazemonger
 

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