Grails refresh chart

Question

Ich benutze ein morris.js Tortendiagramm in meinem Grails-Projekt und jetzt versuche ich ein int nach einem Klick zu zählen und das Diagramm zu aktualisieren. Aber wenn ich "Redirect" verwende, wird die gesamte Seite aktualisiert. Gibt es eine empfohlene Möglichkeit, nur das Diagramm zu aktualisieren?

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> 

Controller:

int number = 0 

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

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

Answer 1

Die Idee, eine Anfrage von einem Ajax-Aufruf schafft, die Ihnen eine Antwort geben, die Sie für die Aktualisierung Ihrer Morris Donut verwenden.

So könnten Sie Ihr Formular zum Erstellen eines Ajax-Aufrufs verwenden. Sie haben zwei Möglichkeiten:

1. Entfernen Tags (out of the box on 1.x and 2.x grails Versionen oder mit remote tags plugin auf Grails 3.x. ein Remote-Formular verwenden, können Sie mit der Antwort aus einer Aktion, ein Stück Ihres HTML-Code aktualisieren, die rendert Eine Vorlage
2. Implementieren Sie Ihre eigene Ajax-Methode, empfohlen für eine Brunnen-Code-Implementierung, verursacht eine Remote-Ajax-Grails-Tag fügt Js-Code auf Ihrem HTML.Es ist überhaupt nicht gut (ein Front-End-Dev wird dich töten und ein Kätzchen cat auch :)), und ist veraltet.

Dieses Ajax-Anforderung hat ein neues Datenmodell zurückzukehren, in einem JSON-Format sein könnte und Sie Ihre Donut mit der Methode js setData aktualisieren können.

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

Und Ihre Wirkung sollte so etwas wie dieses

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

    render result as JSON 
} 

Für komplexere JSON betrachten die sein JSON views verwenden, wenn Sie Grails größer als v.3.1