2017-06-01 58 views
0

我嘗試使用顯示某些數據庫統計信息的Grails 3構建gsp。一些統計數據需要一些時間才能生成。我想在統計信息應該出現的div中顯示佔位符「Please wait」。數據可用後,應將這些佔位符替換爲實際數據。Grails gsp等待數據以div的形式顯示

我想讓頁面的其餘部分呈現,因此用戶無法認爲頁面沒有響應。

我想是這樣的測試功能的控制器:

def addMe = { 
    sleep(5000) 
    render { 
     div(id: "bla", "some text inside the div") 
    } 
} 

這普惠制內:

<g:include action="addMe" /> 

但該函數的頁面等待完成,直到到底是加載。如何跳過等待?

+0

你有沒有考慮使用Ajax和某種形式的進度條或當前工作的象徵? –

+0

我是新來的。我不知道如何做到這一點。一個進度條會很好,但:)任何工作的例子,你可以指向我? –

回答

0

以下內容應該足以讓您大致瞭解如何實施。

點擊按鈕後,會調用一個javascript函數,它從DbStatsController的getStats函數中獲取數據。

您應該看到工作完成時顯示的微調圖標,默認情況下隱藏&由showSpinner函數顯示/隱藏。

錯誤將顯示在具有id resultDiv的div中,您的操作的結果將返回給JSON。

dbStats\index

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="layout" content="main" /> 

    <script type="text/javascript"> 
     function showSpinner(visible) { 
      if (visible) $('#spinner').show(); 
      else $('#spinner').hide(); 
     } 

     $(document).ready(function(){ 
      $('#dbStats').click(function() { 
       $.ajax({ 
        url: "${g.createLink(controller: 'dbStats', action: 'getStats')}", 
        type: "get", 
        timeout: 5000, 
        success: function (data) { 
         $('#resultDiv').html(data) 
        }, 
        error: function(jqXHR, textStatus, errorThrown) { 
         $("#resultDiv").addClass('alert alert-danger').text('Unable to get stats ' + errorThrown) 
        }, 
        beforeSend: function() { showSpinner(true) }, 
        complete: function() { showSpinner(false) } 
       }); 
      }) 
     }); 
    </script> 
</head> 
<body> 

<asset:image src="spinner.gif" id="spinner" style="display: none" /> 

<div id="resultDiv"></div> 

<g:form> 
    <button type='button' id="dbStats">Get DB stats</button> 
</g:form> 

</body> 

DbStatsController

import grails.converters.JSON 

class DbStatsController { 

    def index() { } 

    def getStats() { 
     render ([stat1: 123, stat2: 321]) as JSON 
    } 
} 
+0

非常感謝!有用 :) –