從ajax調用返回後顯示並隱藏div

在我的頁面上，我使用jquery對服務器進行了幾次調用。我想顯示一個結果div，其中顯示關於成功/失敗的信息，例如，綠色div與成功信息和紅色div與失敗信息。這個div應該被看到1-2秒並自動消失。我創建了一個視圖模型用於此目的：從ajax調用返回後顯示並隱藏div

public class ResultMessageViewModel 
{ 
    public ResultMessageKind KindOfMessage {get;set;} 
    public string Content {get;set;} 
}

在我的控制器行動我返回PartialView如下：

return PartialView("ResultMessagePartial", new ResultMessageViewModel() { KindOfMessage= ResultMessageKind.Success", Content="Operation finished successfully"});

我的Ajax調用類似的東西：

$(function() { 
      $(document).on("click", "#AnswerTheQuestion", function (e) { 
       e.preventDefault(); 
       var answerContent = $("#AnswerContent").val(); 
       var messageId = $(this).parent().children("#rootMessageId:first").val(); 
       $.ajax({ 
        url: this.href, 
        type: 'GET', 
        data: { rootMessageId: messageId, content: answerContent }, 
        cache: false, 
        success: function (result) { 
         //show success result div 
        }, 
        error: function() { 
         //show failure result div 
        } 
       }); 
      });

我的問題是：我怎樣才能實現一個功能，其中我的結果div會自動顯示特定的時間量（如1-2秒）在成功/錯誤處理程序？這將是某種用戶的通知，無論過程是否成功完成。我想盡可能保留DRY原則來實現這種功能。

來源

2013-04-15 Piotr Ptak

您可以使用setTimeout()在指定的時間後執行一個功能。

實施例：setTimeout(function, delay);

你會調用該方法並將結果傳遞/輸出和所需的時間間隔。

success: function (result) { 
    // show message for 2 seconds 
    show_message(result, 2) 
}

用來顯示/隱藏錯誤可能是這樣的方法：

var show_message = function(message, interval){ 
    $('.message-div') 
     .text(message) 
     .css('display', 'block') 
     .animate({ 
      opacity:1 
     }, 200); 
    setTimeout(
     $(function(){ 
      $('.message-div') 
       .animate({ 
        opacity:0 
       }, 200, function(){ 
        $(this).css('display','none'); 
       }); 
     }), interval * 1000 
    ); 
}

來源

2013-04-15 18:41:57

var hideSuccess = function(){ $('#success').hide() }); 
    var hideFailure = function(){ $('#failure').hide() }); 

    $(function() { 
     $(document).on("click", "#AnswerTheQuestion", function (e) { 
      e.preventDefault(); 
      var answerContent = $("#AnswerContent").val(); 
      var messageId = $(this).parent().children("#rootMessageId:first").val(); 
      $.ajax({ 
       url: this.href, 
       type: 'GET', 
       data: { rootMessageId: messageId, content: answerContent }, 
       cache: false, 
       success: function (result) { 
        //show success result div 
        $('#success').show() 
        setTimeout(hideSuccess,3000); 
       }, 
       error: function() { 
        //show failure result div 
        $('#failure').show() 
        setTimeout(hideFailure,3000); 
       } 
      }); 
     });

來源

2013-04-15 18:49:11 George

試試這個：

success: function(result){ 
    ('#successmsg').css('visibility', 'visible'); 
    setTimeout("jQuery('#successmsg').hide();",3000); 
}

同樣的錯誤：

error: function{ 
    ('#errormsg').css('visibility', 'visible'); 
    setTimeout("jQuery('#errormsg').hide();",3000); 
}

假設成功或錯誤消息是在div與id="successmsg"和id="errormsg"和他們被設置爲visibility:hidden由CSS，這將設置visibility:visible，並在3秒後再次隱藏它。

來源

2013-04-15 18:53:53 Zeeshan

從ajax調用返回後顯示並隱藏div

回答

相關問題