javascript - Delay jQuery Ajax loader for 3 seconds after submit button is pushed - Stack Overflow

admin管理员组

文章数量:1396787

I'm using a simple jQuery to show an animation DIV created with CSS after SUBMIT button is pushed. My issue is that when the server response is fast, the DIV is shown for justs some milliseconds. I'd like to display it for at least 3 seconds, regardless if the server response is fast or slow.

HTML:

<form class="search_cars" action="" method="get">

    <label>
        <select name="model">
            <option value="" selected="selected">Select Make</option>
            <option value="Acura">Acura</option>
            <option value="...">...</option>
        </select>
    </label>

    <label>
        <select name="type">
            <option value="" selected="selected">All Models</option>
            <option value="...">..models script...</option>
        </select>
    </label>

    <label><input name="zip" type="tel" maxlength="5" id="zip" placeholder="zip code" /></label>

    <label><input name="submit" type="submit" value="search" class="search_button" /></label>

</form>

jQUERY:

$(".search_button").click(function(e) {
    $('#loadingProgressG').show();
    $.ajax({
        success: function(data) {
            $('#loadingProgressG').hide();
        },
        error: function() {
            $('#loadingProgressG').hide();
        }
    });
});

Looking at other threads at StackOverflow, I already tried this possible solution, changing:

$('#loadingProgressG').hide();

By

$('#loadingProgressG').delay(3000).hide(400);

But it didn't work. Also tried changing the same line by:

setTimeout(function() {
    $('#loadingProgressG').hide();
}, 3000);

And nothing. The most probably is that I'm doing something wrong, I'm not a jQuery guru. Any help or advice is appreciated.

** I just noticed that using setTimeout works for the time set, only if some form validation stop the process.

I'm using a simple jQuery to show an animation DIV created with CSS after SUBMIT button is pushed. My issue is that when the server response is fast, the DIV is shown for justs some milliseconds. I'd like to display it for at least 3 seconds, regardless if the server response is fast or slow.

HTML:

<form class="search_cars" action="http://www.domain./searchresults" method="get">

    <label>
        <select name="model">
            <option value="" selected="selected">Select Make</option>
            <option value="Acura">Acura</option>
            <option value="...">...</option>
        </select>
    </label>

    <label>
        <select name="type">
            <option value="" selected="selected">All Models</option>
            <option value="...">..models script...</option>
        </select>
    </label>

    <label><input name="zip" type="tel" maxlength="5" id="zip" placeholder="zip code" /></label>

    <label><input name="submit" type="submit" value="search" class="search_button" /></label>

</form>

jQUERY:

$(".search_button").click(function(e) {
    $('#loadingProgressG').show();
    $.ajax({
        success: function(data) {
            $('#loadingProgressG').hide();
        },
        error: function() {
            $('#loadingProgressG').hide();
        }
    });
});

Looking at other threads at StackOverflow, I already tried this possible solution, changing:

$('#loadingProgressG').hide();

By

$('#loadingProgressG').delay(3000).hide(400);

But it didn't work. Also tried changing the same line by:

setTimeout(function() {
    $('#loadingProgressG').hide();
}, 3000);

And nothing. The most probably is that I'm doing something wrong, I'm not a jQuery guru. Any help or advice is appreciated.

** I just noticed that using setTimeout works for the time set, only if some form validation stop the process.

• javascript
• jquery
• html
• ajax
• loader

Share Improve this question Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Jul 31, 2014 at 14:23 JohnA10JohnA10 32611 gold badge44 silver badges1818 bronze badges 2

• You may need to post more of your code to get a fuller scope of what's going on, especially if you have form validation tied to it. – jonsuh Commented Jul 31, 2014 at 14:41
• The form has 3 select menus (model, type, max price), and 1 input (zip code) and the submit button. I disabled all JS validations to see if there is a conflict among them, and I'm just playing with this LoadingProgressBar, it doesn't work anyway in whatever way I've tried. – JohnA10 Commented Jul 31, 2014 at 14:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Your example should work. My only guess is that since you have the submit button tied to a form, it's processing the form as opposed to successfully running the function after the AJAX is pleted.

In order to prevent the form from processing, you want to preventDefault() then run what you want to run.

EDIT: Assuming that you need the form to actually process, you would submit the form after the 3000 setTimeout. Like such:

JSFiddle: DEMO

For the submit button, use a <button> instead:

<label><button class="search_button">search</button></label>

Then do the following for the JavaScript:

$(".search_cars").submit(function (e) {
    e.preventDefault();

    var form = this;
    $("#loadingProgressG").show();
    setTimeout(function () {
        $("#loadingProgressG").hide();
        form.submit();
    }, 3000); // in milliseconds
});

You will want to wrap $('#loadingProgressG').hide(); into a settimeout function.

Example:

setTimeout(function() {
$('#loadingProgressG').hide();
}, 3000)

The page is loaded before the end of the JavaScript.

You have to prevent the default behavior. Use the function preventDefault() on your e object like this:

$(".search_button").click(function(e) {
    e.preventDefault();
    $.ajax({
        success: function(data) {
            $('#loadingProgressG').hide();
            $(".search_cars").submit();
        },
        error: function() {
            $('#loadingProgressG').hide();
        }
    });
});

本文标签： javascriptDelay jQuery Ajax loader for 3 seconds after submit button is pushedStack Overflow