Question

104

Delay jQuery Ajax loader for 3 seconds after submit button is pushed

rated 0 times [ 105] [ 1] / answers: 1 / hits: 18625 / 10 Years ago, thu, july 31, 2014, 12:00:00

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.com/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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyaleenag

Add To Favorites

Follow

Total Points: 678

Total Questions: 121

Total Answers: 105

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

harleyaleenag questions

1 How to use redis client in nestjs?

Thu, May 5, 22, 00:00, 2 Years ago

1 After build via Webpack 5 app stoped working on Internet Explorer (IE11)

Thu, Oct 22, 20, 00:00, 4 Years ago

1 TypeScript type for value of key in object

Wed, Aug 19, 20, 00:00, 4 Years ago

1 GDPR: youtube-nocookie embedded URL's, need visitors' permission?

Tue, May 19, 20, 00:00, 4 Years ago

1 How to wait for fetch to complete before rendering page in React.js

Thu, Mar 5, 20, 00:00, 4 Years ago

View All

answered 10 Years ago kristopherw · Accepted Answer

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 completed.

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

});