通过grails中的javascript更改输入字段值答案

【问题标题】：change input field value via javascript in grails通过grails中的javascript更改输入字段值
【发布时间】：2015-06-10 12:16:39
【问题描述】：

在我的 Grails 项目中，我有一个字段允许我在列表之间进行选择。

用户选择一个值后，我存储相关对象的 id。

我希望，在存储 id 之后，我得到一个与具有该 id 的对象相关的值并将其显示到另一个输入字段中。

这是我用来存储 id 的 javascript：

$("#patient_textField").autocomplete({
       source: data,
       select: function (event, ui){                                

                $('#patient_id').val(ui.item.id);                        

                }
            });

我在控制器中创建了一个函数，它允许我获取需要显示到第二个输入字段中的值

def getPhoneNumberFromPatientId(int patientID)
{
    int phone = Patient.findById(patientID).phone_1
    if(phone == null)
        phone = Patient.findById(patientID).phone_2

    return phone
}

我该如何解决？

【问题讨论】：

请看下面的答案，因为它可以帮助你实现你想要的。您不需要为此使用 GSP 模板，但可以在此答案中查看所有元素，如 g:remoteFunction 以及如何通过 AJAX 调用更新 HTML 元素：stackoverflow.com/questions/30717501/…
谢谢...但我不明白如何在输入字段中设置值...远程功能中的更新如何工作？我尝试使用 onSuccess 但我没有知道怎么给onSuccess里面调用的函数传参数（参数是controller函数的render）
好的。我正在写一个例子。我会尽快把它贴在这里。

标签： javascript grails

【解决方案1】：

您需要使用 AJAX 来完成您想要的。在 Grails 中，您有一些对执行 AJAX 调用非常有用的标记库。

一个例子是 g:remoteFunction。此标记库允许您执行 AJAX 调用并更新 HTML 元素的内容。这是一个非常有用的标签库！

对于这个问题，我编写了一个示例，允许用户在列表中选择一个选项（HTML 选择）并根据用户选择更新 textArea 的内容。更新由 AJAX 调用执行。

主要 GSP (test.gsp)

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <asset:javascript src="application.js"/>
    <asset:stylesheet src="application.css"/>
    <title></title>
</head>

<body>    
    <label>Select an option: </label>
    <g:select name="cbOption" noSelection="['':'']" from="${options}"  onchange="${remoteFunction(action: 'getPhoneNumberFromPatientId', onSuccess: '\$("#value").val(data)', params:'\'patientId=\' + escape(this.value)')}; \$('#value').focus()"></g:select>
    <g:textArea name="value"></g:textArea>
</body>
</html>

AJAX 调用发生在 g:select 的 onchange 事件中。为简单起见，我省略了 g:select 的一些属性作为 optionValue 和 optionKey。

此 GSP 由以下操作呈现：

def test() {
   def options = ["A","B","C"]
   return [options:options]
}

如您所见，此操作返回一个模型到上述 GSP 必须称为 test.gsp，因为这是操作的名称。变量 options 是用户可以选择的元素列表。

遥控功能

远程函数调用名为 getPhoneNumberFromPatientId 的操作，并在 onSuccess 事件上更新名为 value 的 textArea。使用 JQuery 执行更新。

${remoteFunction(action: 'getPhoneNumberFromPatientId', onSuccess: '\$("#value").val(data)', params:'\'patientId=\' + escape(this.value)')}

请参阅下面的操作 getPhoneNumberFromPatientId：

def getPhoneNumberFromPatientId(String patientId) {
  def phone

  if (patientId == "A")
    phone = "3332-2222"

  else if (patientId == "B")
    phone = "4444-2222"

  else if (patientId == "C")
    phone = "5555-2222"

  render phone
}

上面的动作不会返回，动作会渲染内容。这是一个非常重要的区别。请参阅此答案以了解差异：Grails updating values in form using Ajax

基本上，当您使用 AJAX 调用时，您将呈现内容。内容可以是变量（如上）、HTML sn-p 或 GSP 模板。

请检查您页面的源代码（在您的浏览器中），以了解您的 g:remoteFunction 被呈现为 JQuery AJAX 调用。

奖金

在 AJAX 调用之后，我将焦点设置在 textArea 上。这也是使用 JQuery 完成的。看 onchange 事件的结尾来了解这部分。

【讨论】：