0

私はjquery.formプラグインを使用していますが、ajaxローディングgifがjQueryで正しい選択をしたとは思いません。以下は私のコードです、誰かがローディングgifを正しく配置する方法を教えてもらえますか？

どうもありがとう。

jQuery：

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#loader').css('visibility','visible');
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
})

HTML：

<div id="loader"> <img src="images/loader.gif" width="18" height="18" / >

CSS：

#loader{
    float:left;
    margin:0px;
    position:relative;
    visibility:hidden;
}
4

1 に答える 1

2

私が見ている問題の1つは、投稿されたHTMLの形式が正しくないことです。GIFを#loaderdiv内に配置する場合は、タグを必ず閉じる必要があります。

<div id="loader">
  <img src="images/loader.gif" width="18" height="18"/>
</div>

#loaderそれが問題ではない場合は、 divが初期visibility設定で正しく表示されることを確認しましたvisibleか？

編集：

もう1つの大きな問題は、フォームが正常に投稿された後$('#loader').css('visibility','visible');にのみローダーが表示されることです—成功コールバックにあります。JSを次のように変更してみてください。

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $('#loader').css('visibility','visible');
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
});
于 2012-07-30T06:48:38.843 に答える