Grails gspがデータをdivで表示するのを待ちます

Grails 3でデータベース統計を表示するgspを構築しようとしています。統計のいくつかは生成されるのに時間がかかります。私は、統計情報が表示されるべきdivのプレースホルダ「Please wait」を表示したいと思います。データが利用可能になったら、これらのプレースホルダーを実際のデータと置き換えてください。Grails gspがデータをdivで表示するのを待ちます

残りのページをレンダリングして、ページが応答していないと思わないようにします。

は私がコントローラーに機能をテストするには、このような何かを試してみました：

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

そして、これはGSP内：最後になるまで

<g:include action="addMe" />

しかし、関数のページのを待つが終了しますロードされる。待ち合わせをスキップするには？

出典

2017-06-01 uti.devel

あなたは、プログレスバー、または現在作業シンボルの何らかの形でAJAXを使用して検討していますか？ –

私はこれが初めてです。私はどのようにこれを行うか分かりません。プログレスバーは素晴らしいだろう:)あなたが私を指すことができる任意の実例？ –

以下は、実装方法の概要を説明するのに十分なはずです。

ボタンをクリックすると、DbStatsController getStats関数からデータを取得するjavascript関数が呼び出されます。

作業中に表示されるスピナーアイコンは、showSpinner関数で表示/非表示にされるデフォルトでは非表示になっています（&）。

エラーは、resultDivというidの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 
    } 
}

出典

2017-06-01 10:49:17

ありがとう！できます：） –

Grails gspがデータをdivで表示するのを待ちます

答えて

関連する問題