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更大