在我的Grails项目中，我有一个允许在列表之间进行选择的字段。
用户选择一个值后，我将存储相关对象的ID。
我想要的是，在存储ID之后，我得到一个与具有该ID的对象相关的值，并将其显示在另一个输入字段中。
这是我用来存储ID的JavaScript:
$("#patient_textField").autocomplete({
source: data,
select: function (event, ui){
$('#patient_id').val(ui.item.id);
}
});
我在 Controller 中创建了一个函数，该函数可以让我将需要显示的值显示在第二个输入字段中
def getPhoneNumberFromPatientId(int patientID)
{
int phone = Patient.findById(patientID).phone_1
if(phone == null)
phone = Patient.findById(patientID).phone_2
return phone
}
我该如何解决？
最佳答案
您需要使用AJAX来完成所需的工作。在Grails中，您具有一些标记库，这些标记库对于执行AJAX调用非常有用。
例如g:remoteFunction。这个taglib允许您执行AJAX调用并更新HTML元素的内容。这是一个非常有用的taglib!
对于这个问题，我编写了一个示例，允许用户在列表中选择一个选项(HTML Select)，并根据用户的选择更新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，因为这是该操作的名称。变量选项是用户可以选择的元素列表。
远程功能
远程函数调用名为getPhoneNumberFromPatientId的操作，并在onSuccess事件上更新名为值的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代码段或GSP模板。
请检查页面的源代码(在浏览器中)，以了解g:remoteFunction是作为JQuery AJAX调用呈现的。
奖励
在AJAX调用之后，我将焦点设置在textArea上。这也是使用JQuery完成的。请参阅onchange事件的结尾以了解此部分。
关于javascript - 通过grails中的javascript更改输入字段值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30756121/