Loader gif工具

时间:2012-05-14 15:02:26

标签: php jquery

我遇到了以这种形式实现loader gif的问题,我的表单正在提交到另一个页面,即处理器页面。这是代码:

形式:

<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
<div align='center'>


<form name="myform" id="myform" action="" method="POST">  
<!-- The Name form field -->
<font face='candara' size='3' color='#6382A1'>Ime ili prezime:</font>  
     <input type="text" name="name" id="name"  value="">

                        

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",

},
messages: {
name: "Unesite podatke.",

},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
                                $('#results').html(data);
                            });
                        }
                    });
                });
                </script>
                <style>
label.error { width: 250px; display: inline; color: red; font-family:candara;}
                    </style>


                <!-- We will output the results from process.php here -->
                <br><div id="results"></div>

所以我想知道在搜索结果之前显示加载程序gif的位置和方法?

这是加载程序gif:

<!--LOADER!-->                              


<br><div id="loadingGif" style="display:none; background: url(slike_izgled/transparent_loader.png);" align="center"><img src='ajax-loader.gif'>
<br><font face='candara' size='3'><b>Pretražujem bazu podataka, molim pricekajte...</b></font></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>


<script>

$("form").submit(function(e) {
//e.preventDefault();

$("#loadingGif").show();
});

</script>



                <!--LOADER END!-->  

1 个答案:

答案 0 :(得分:1)

在您的submitHandler中使用$.ajax代替$.post,您将能够使用beforeSend

$.ajax({
    type : 'post',
    url : 'your url',
    data : 'your data',
    beforeSend : function(){
        $('#loadingGif').show();
    },
    success : function(data){
        $('#loadingGif').hide();
        // do your stuff here
    }

});