jquery提交併加載gif

即時通訊使用jQuery提交一個php表單。在提交期間，它將驗證有效字段。所以當用戶點擊提交按鈕時，我希望在處理表單時顯示加載gif。當它完成時，加載gif消失。jquery提交併加載gif

我的jQuery提交如下：

$(document).ready(function(){ 
$("#loadinggif").hide(); 
$(function(){ 
    $("#form").submit(function(){ 
    $.post("/postform.php", $("#form").serialize(), 
    function(data){ 
    // Put an animated GIF image insight of content 
    $("#loadinggif").fadeIn().animate({ opacity: 1.0 },3000).fadeOut(); 

    if(data.error != null){ 

    $("#ajax_messagepost").html(data.error); 
    } 
    else{ 
    var url = "/confirmation.php"; 
    $(location).attr('href',url); 
    } 
    }, "json"); 

    return false; 

    }); 
}); 
});

現在發生什麼事是當點擊提交按鈕，加載GIF節目和繼續顯示返回的數據，即使之後。數據返回時如何隱藏它？

來源

2010-06-22 nuttynibbles

豎起這顯示和隱藏在任何AJAX控件：

var loadingMessage = 'Please wait loading data for ' + defaulttext; 
$(function() 
{ 
    $("#Errorstatus") 
    .bind("ajaxSend", function() 
    { 
     $(this).text(loadingMessage); 
     $(this).show(); 
    }) 
    .bind("ajaxComplete", function() 
    { 
     $(this).hide(); 
    }); 
});

其中#Errorstatus是有背景

<div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus"> 
        <span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span> 
        <span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText"> 
        </span> 
</div>

跨度的CSS是：

.ajaxLoading 
{ 
    width: 100%; 
    background-image: url("../Images/ajax-loader.indicator.gif"); 
    background-repeat: no-repeat; 
    background-position: left middle; 
}

現在，這些消息會顯示在任何帶有動畫gif的ajax調用中，以及您在跨區域中放置的文本

來源

2010-06-22 18:08:45

你應該在這裏使用'ajaxStart'和'ajaxStop'，否則返回的* first *請求（如果同時多個）隱藏加載器（儘管其他的仍在完成），並且每個請求不是第一個請求工作。 – 2010-06-22 18:17:41

@Nick Craver - 可能是真的，儘管我也用它來改變文本，以便我可以展示更多的細節，如果我有多個同時進行（請參閱我的div中的兩個跨度）。在一般情況下，你是正確的。 – 2010-06-23 14:48:51

既然你在提交併希望動畫進行AJAX出現和消失，我建議你在jQuery的使用全局AJAX助手：

ajaxStart
ajaxStop

GRZ，克里斯。

來源

2010-06-22 18:05:29 XIII

jquery提交併加載gif

回答

相關問題