Grails刷新圖

Question

我在我的grails項目中使用morris.js餅圖，現在我嘗試在按鈕單擊並刷新圖表後嘗試計算int。但是，如果我使用「重定向」它刷新整個網站。 那麼有沒有推薦的方法來刷新圖表？

GSP：

<g:form controller="blankTest"> 
    <g:actionSubmit value="Update" action="action"/> 
</g:form> 
<div id="myfirstchart" style="height: 250px;"></div> 

<g:javascript id="test"> 
    new Morris.Donut({ 
     // ID of the element in which to draw the chart. 
     element: 'myfirstchart', 

     label: 'Test', 

     resize: true, 

     colors : ['#00ff00', '#ff0000', '#ffff00'], 

     data: [ 
      { label: 'Number1', value: ${number}}, 
      { label: 'Number2', value: ${number1}}, 
      { label: 'Number3', value: ${number2}} 
     ], 
    }); 
</g:javascript> 

控制器：

int number = 0 

def index() { 
    [number: number, number1: 34, number2: 8] 
} 

def action() { 
    number++ 
    redirect view: 'index' 
} 

Answer 1

的想法是通過創建一個Ajax調用，它會給你，你將用於更新莫里斯甜甜圈響應的請求。

所以你可以使用你的表單來創建ajax調用。你有兩個選擇：

1. 使用遠程標籤（out of the box on 1.x and 2.x grails版本，或remote tags plugin中，Grails 3.x中使用遠程形式，你可以更新從動作的響應，這使得一段HTML代碼一個模板
2. 實現你自己的ajax方法，推薦用於井代碼實現，會導致遠程ajax grails標籤在你的HTML中附加js代碼，它並不是很好（一個前端開發人員會殺死你和一隻貓咪貓也:)），並已被棄用。

這Ajax請求必須返回你一個新的數據模型，可以在一個JSON格式，你可以更新你的甜甜圈的方法JS setData。

<g:form name="form" controller="blankTest"> 
    <input type="submit" value="Update"/> 
</g:form> 
<div id="myfirstchart" style="height: 250px;"></div> 

<g:javascript id="test"> 
    //we will need this reference for updating it 
    var donut = new Morris.Donut({ 
     // ID of the element in which to draw the chart. 
     element: 'myfirstchart', 

     label: 'Test', 

     resize: true, 

     colors : ['#00ff00', '#ff0000', '#ffff00'], 

     data: [ 
      { label: 'Number1', value: ${number}}, 
      { label: 'Number2', value: ${number1}}, 
      { label: 'Number3', value: ${number2}} 
     ], 
    }); 

$(document).ready(function(){ 
    $('#form').submit(function(event){ 
     event.preventDefault(); //blocks native form submit 

     $.ajax('${createLink(controller: 'blankTest', action: 'action')}', { 
      success: function (data) { 
       var response = $.parseJSON(data); 
       donut.setData(response); //updating the donut with json response 
      } 
     }); 
    }); 

}); 
</g:javascript> 

和你的行動應該是這樣的

def action() { 
    number++ 
    List result = [ 
     [label: 'Number1', value: number], 
     [label: 'Number2', value: number1], 
     [label: 'Number3', value: number2] 
    ] 

    render result as JSON 
} 

對於更復雜的JSON的考慮，如果你正在使用Grails比v.3.1更大