Grails 刷新图表

Question

我在我的 grails 项目中使用 morris.js 饼图，现在我尝试在单击按钮并刷新图表后计算一个整数。但是如果我使用 "redirect" 它会刷新整个站点。那么有没有推荐的方法只刷新图表？

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 调用创建一个请求，这会给你一个响应，你将使用它来更新你的 Morris 甜甜圈。

因此您可以使用您的表单创建 ajax 调用。您有两个选择：

使用远程标签（out of the box on 1.x and 2.x grails versions, or with remote tags plugin on grails 3.x。使用远程表单，您可以使用操作的响应更新您的 html 代码片段，从而呈现模板。
实施您自己的 ajax 方法，推荐用于良好的代码实施，导致远程 ajax grails 标记在您的 HTML 上附加 js 代码。它一点也不好（一个前端开发人员会杀了你，一只小猫也会死:)），并且被弃用了。

这个 ajax 请求必须 return 你一个新的数据模型，可以是 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，如果您使用的是版本高于 v.3.1 的 Grails，请考虑使用 JSON views

Grails 刷新图表

Grails refresh chart

grails

morris.js