生成下載文件時的友好等待消息

我打電話給一個生成Excel文件的web服務，當它完成時，用戶可以下載文件。該文件大約需要20秒才能生成。有沒有一種方法使用jQuery給用戶一些反饋，他們必須等待幾秒鐘，而不是狀態欄。我不喜歡保存或緩存文件serverside。生成下載文件時的友好等待消息

我希望類似下面的工作，但顯然它不會

var myhref = "DownloadFile.ashx?foo=bar" 
    $.get(myhref, function (data) { 
      window.location = this.href; 
     }, 
     function (data) { 
      alert("Could not generate file"); 

     });

所以我想是保持UI活着，而正在生成下載

來源

2011-05-30 Arnoldiusss

我想要一個類似的問題，當我想用ajax執行一些操作時，並沒有花費太多時間，但足以讓用戶思考「發生了什麼？難道是在做我想要什麼？」。

我發現一個jQuery插件稱爲blockUI（太酷了！），其顯示的消息，而你正在處理你的東西。

這裏是我如何使用它。首先

function proceedToSend(requesterName, requesterId) 
{ 
    //Here the wait/processing message is displayed 
    $().ajaxStart($.blockUI({ message:$('#waitMessage')})); 

    $.ajax({ 
     type :"POST" , 
     url  : http://example.com/myurl.php 
     dataType: yourDataType , 
     data : myData , 
     success :function (response) 
     { 
      //response processing if needed 

      // Here the wait/processing messages is hidden 
      $().ajaxStop($.unblockUI({ message:null })); 
     } , 
     error :function() 
     { 
      alert('there was an error processing the request!!'); 
      $().ajaxStop($.unblockUI({ message:null })); 
     } 
    }); 
}

最後，你必須添加這個頁面上，所以被顯示的消息：處理該請求的功能

<div id="waitMessage" class="dataContainer" style="display: none;"> 
    <p style="font-size: 30px;">Processing request...</p> 
</div>

就是這樣，H操作它有幫助！ ;）

來源

2012-04-27 15:02:00 Manei

thanx，看起來不錯，我可能會實現它。 – Arnoldiusss 2012-04-29 09:45:20

嘗試過。不起作用。總是一個錯誤:( – djack109 2017-10-26 07:55:31

這應該工作：

<div id="waitMessage" style="display:none"> 
      Please wait while the file is generated 
    </div> 

<a href='DownloadFile.ashx?foo=bar' id='download'>Download me</a> 


<script type="text/javascript"> 
     $(function() {   
      $("#download").click(function() { 
       $("#waitMessage").fadeIn() 
      }); 
     }); 
    </script>

來源

2011-05-30 14:41:00 aquinas

這不完全是我想要完成的用戶體驗。當你點擊鏈接時，div會出現，但是UI會凍結。 Iam正在尋找動畫保持運行的姿態，之後正在提供下載或顯示錯誤消息。 – Arnoldiusss 2011-05-30 21:35:16

請將「正在生成文件時請稍候」替換爲動畫GIF :)。我不知道你還在尋找什麼... – aquinas 2011-05-31 18:48:15

<input type="button" onclick="example_ajax_request()" value="Click Me!" /> 
<div id="example-placeholder"> 
    <p>Placeholding text</p> 
</div>

function example_ajax_request() { 
    $('#example-placeholder').html('<p><img src="/images/ajax-loader.gif" width="220" height="19" /></p>'); 
    $('#example-placeholder').load("/examples/ajax-loaded.html"); 
}

來源

2011-05-30 14:43:49

生成下載文件時的友好等待消息

回答

相關問題