Grails使用Ajax更新表单中的值 [英] Grails updating values in form using Ajax
问题描述
我有两组单选按钮，第一组代表大小，第二组代表数量和价格。
我试图在更改广播电台的大小时更新Ajax数量。 p>到目前为止我所拥有的。
< script>
$（document）.ready（function（）{
$（input [name * ='size']）。click（function（）{
$ {remoteFunction（
controller：'product'，
action：'ajaxSize'，
params：'\'size = \'+ this.value'）}
}）
}）;
< / script>
url =[controller：'product'，action：'save']update =updateMe>
< input type =radioname =sizevalue =2x2> 2x2< br>
< input type =radioname =sizevalue =4x4> 4x4< br>< br>
< input type =radioname =quantityvalue =15> 15 $ {price}< br>
< input type =radioname =quantityvalue =16> 16 $ {price}< br>
< input type =radioname =quantityvalue =17> 17 $ {price}< br>
< / g：formRemote>
控制器
def ajaxSize = {
println params
render params
}
@Transactional
def save（Product product）{
}
。此示例使用GSP模板在AJAX调用中呈现价格变化，请参阅下面的详细信息。
创建一个名为_price.gsp的GSP模板
模板是一个GSP文件，必须以下划线字符开头，并且没有HTML和BODY标签。在这种情况下，GSP只是以下代码：
< input type =radioname =quantityvalue =15> 15 $ {price}< br>
< input type =radioname =quantityvalue =16> 16 $ {price}< br>
< input type =radioname =quantityvalue =17> 17 $ {price}< br>
创建名为ajaxSize.gsp的GSP
这是主要的GSP，并且是一个完整的HTML文件。
请注意，此GSP包含使用g：render的_price.gsp模板taglib。
注意到我把g：render放在名为updateMe的DIV中也很重要。这是g：remoteFunction使用setPrice方法的返回值（render）更新的DIV。
<％@ page contentType =text / html; charset = UTF-8％>
< html>
< head>
< asset：javascript src =application.js/>
< asset：stylesheet src =application.css/>
< title>< / title>
< / head>
< body>
< input type =radioname =sizevalue =2x2> 2x2< br>
< input type =radioname =sizevalue =4x4> 4x4< br>< br>
< div id =updateMe>
< g：render template =price>< / g：render>
< / div>
< / body>
< g：javascript>
$（document）.ready（function（）{
$（input [name * ='size']）。click（function（）{
$ {remoteFunction（
controller：'test'，
action：'setPrice'，
update：updateMe，
params：'\'size = \'+ this.value'）}
}）
}）;
< / g：javascript>
< / html>
创建一个名为TestController.groovy的控制器
渲染模板时，不需要将下划线字符放在名称前面。
class TestController {$ b $}您可以直接写下模板的名称而不用下划线，见下面的setPrice中的render调用。 b
def index（）{}
def ajaxSize（）{
return
}
def setPrice（）{
def price
if（params.size ==2x2）
price =100
if（params.size ==4x4）
price =200
render template：price，model：[price：price]
}
}
测试解决方案
http：// localhost：8080 / myApp / test / ajaxSize
ajaxSize操作被称为ajaxSize.gsp被渲染的内容。之后，单击任何单选按钮（name =size）将生成对动作setPrice的Ajax调用。此操作将收到单击的单选按钮的值，并将呈现_price.gsp模板发送以模型计算的价格。
I have two groups of radio buttons, the first group represents size and the second group represents quantity along with price.
I'm trying to update the price next to quantity with Ajax when changing the size radio has been changed.
What I have thus far.
<script>
$(document).ready(function(){
$("input[name*='size']").click(function() {
${remoteFunction(
controller:'product',
action:'ajaxSize',
params:'\'size=\' + this.value')}
})
});
</script>
<g:formRemote name="myForm"
url="[controller:'product', action: 'save']" update="updateMe">
<input type="radio" name="size" value="2x2">2x2<br>
<input type="radio" name="size" value="4x4">4x4<br><br>
<input type="radio" name="quantity" value="15">15 ${price}<br>
<input type="radio" name="quantity" value="16">16 ${price}<br>
<input type="radio" name="quantity" value="17">17 ${price}<br>
</g:formRemote>
controller
def ajaxSize = {
println params
render params
}
@Transactional
def save(Product product) {
}
I have wrote an example using Grails 2.5.0. This example uses GSP Templates to render the price changing in an AJAX call, see the details below.
Create a GSP template called _price.gsp
The template is a GSP file that must start with the underscore character and don't have the HTML and BODY tags. In this case, the GSP is simply the code below:
<input type="radio" name="quantity" value="15">15 ${price}<br>
<input type="radio" name="quantity" value="16">16 ${price}<br>
<input type="radio" name="quantity" value="17">17 ${price}<br>
Create a GSP called ajaxSize.gsp
This is the main GSP and is a full HTML file.
Note that this GSP includes the _price.gsp template using the g:render taglib.
It's also important to note that I put the g:render inside a DIV called updateMe. This is the DIV that the g:remoteFunction updates with the return (render) of setPrice method.
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<asset:javascript src="application.js"/>
<asset:stylesheet src="application.css"/>
<title></title>
</head>
<body>
<input type="radio" name="size" value="2x2">2x2<br>
<input type="radio" name="size" value="4x4">4x4<br><br>
<div id="updateMe">
<g:render template="price"></g:render>
</div>
</body>
<g:javascript>
$(document).ready(function(){
$("input[name*='size']").click(function() {
${remoteFunction(
controller:'test',
action:'setPrice',
update: "updateMe",
params:'\'size=\' + this.value')}
})
});
</g:javascript>
</html>
Create a controller called TestController.groovy
When the template is rendered you don't need to put the underscore character in front of the name. You have just to write the name of template without underscore, see below the render call in setPrice.
class TestController {
def index() {}
def ajaxSize() {
return
}
def setPrice() {
def price
if (params.size=="2x2")
price = "100"
if (params.size=="4x4")
price = "200"
render template: "price", model: [price:price]
}
}
Testing the solution
http://localhost:8080/myApp/test/ajaxSize
When the ajaxSize action is called the content of the ajaxSize.gsp is rendered. After that, a click in any radio button (name="size") will generate an Ajax call to the action setPrice. This action will receive the value of the radio button that was clicked and will render the _price.gsp template sending the price calculated as the model.
这篇关于Grails使用Ajax更新表单中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
