Показывать анимацию загрузчика в течение 2-3 секунд, а затем обрабатывать - .ajaxStart и .ajaxStop - PullRequest
0 голосов
/ 09 марта 2012

Как я могу показать анимацию загрузчика в течение 3 секунд, а затем обработать файл process.php? Я пробовал это с помощью метода setTimeout () в блоке ajaxStart и ajaxStop, но это не работает.

<script type="text/javascript">
$(document).ready(function(){

$('#loading')
.hide()  // hide it initially
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
});

    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {

            $('#results').html(data);
            });
        }
    });
});
</script>

А вот и форма:

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value=""/>  
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>  
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br>
<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit"> 
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>

<div id="loading">Loading</div>

1 Ответ

0 голосов
/ 11 марта 2012

Вот краткое изложение одного из моих сценариев.

$(document).ready(function() {
    $.ajaxSetup ({  
        cache: false  
    });  
    $("#header-ajaxload").ajaxStart(function() {
        $(this).html(ajax_load);
    });
$("#header-ajaxload").ajaxStop(function() {
        $(this).html('');
    });
    $("#header-ajaxload").ajaxError(function() {
        $(this).text( "Triggered ajaxError handler." );
    });
});

var ajax_load = "<img src='home/img/ajax_load.gif' alt='loading...' />";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...