【发布时间】：2011-12-07 09:17:20
【问题描述】：
我有一个动态显示的列表，通过选择第一个列表中的项目，第二个列表中的项目将被填充（使用 ajax）。
代码：
<g:each in="${files}" var="file" status="i">
<tr>
<td>
<%
String name = file.fileName;
if (name.length() > 30) {
def result = "";
int z = 0;
name.each { character ->
result = "${result}${character}";
z++;
if (z > 30) {
z=0;
result = "${result}<br />";
}
}
println result;
} else {
println name;
}
%>
<g:hiddenField name="files.${i}" value="${file.fileName}" />
</td>
<td>
<g:select name="manufacturers.${i}" from="${manufacturers}" onChange="updateDevices('${i}')" noSelection="${['null':'Select a manufacturer']}" value="${fileInfo[file.fileName]?.selectedManufacturer}" />
</td>
<td>
<div id="devicesField.${i}">
<g:if test="${fileInfo[file.fileName]?.selectedDevice != null}">
<g:select name="devices.${i}" class="deviceSelect" from="${fileInfo[file.fileName]?.devices}" noSelection="${['null':'Select a manufacturer']}" value="${fileInfo[file.fileName]?.selectedDevice?.toString()}" />
</g:if>
<g:else>
<g:select name="devices.${i}" class="deviceSelect" from="${[:]}" noSelection="${['null':'Select a manufacturer']}" />
</g:else>
</div>
</td>
<td><input type="button" value="Add a Device" onClick="deviceInfo('${i}','fileInfo','files','manufacturers')" /></td>
</tr>
<br />
<div id="deviceInfo.${i}">
</div>
</g:each>
</table>
<br />
Can't find your device? <a href="mailto:support@flexion.se?subject=Wizard%20New%20Device">Request new device addition</a>
<br /><br />
<g:submitButton name="back" value="Back" /> <g:submitButton name="next" value="Next" />
<g:hiddenField name="viewAccordingToBrowser" value="${currentView}" />
</g:form>
</div>
</div>
<script>
function updateDevices(id) {
new Ajax.Updater(
"devicesField." + id,
"/wizard/submission/ajaxGetDevicesForManufacturer", {
method:'get',
parameters: {
selectedValue : $F("manufacturers." + id),
id: id
}
}
);
}
function deviceInfo(id,fileInfo,files,manufacturers) {
alert("hi, in deviceInfo function .... ");
new Ajax.Updater(
"deviceInfo." + id,
"/wizard/submission/ajaxGetDevicesInfo", {
method:'get',
parameters: {
fileInfo : fileInfo,
files: files,
manufacturers : manufacturers,
id: id
}
}
);
}
</script>
</body>
</html>
我想在列表框旁边有一个按钮，单击它后我想在下面添加另一组列表框。
我尝试了按钮的onclick事件，但它似乎无法正常工作。
任何更好的想法都会有所帮助。
----ajax方法的控制器代码是
def ajaxGetDevicesInfo = {
LOG.debug("inside ajaxGetDevicesInfo %%%%%%%%%%%%%%%%%")
LOG.debug("fileInfo=" + params.fileInfo);
LOG.debug("files=" + params.files);
LOG.debug("manufacturers=" + params.manufacturers);
LOG.debug("id=" + params.id);
render(template:"deviceInfo", model : ['fileInfo' : params.fileInfo, 'files': params.files, 'manufacturere': params.manufacturers])
}
动态ajax视图的模板是
<table>
<g:each in="${files}" var="file" status="i">
<g:hiddenField name="files.${i}" value="${file.fileName}" />
<tr>
<td></td>
<td>
<g:select name="manufacturers.${i}" from="${manufacturers}" onChange="updateDevices('${i}')" noSelection="${['null':'Select a manufacturer']}" value="${fileInfo[file.fileName]?.selectedManufacturer}" />
</td>
<td>
<g:if test="${fileInfo[file.fileName]?.selectedDevice != null}">
<g:select name="devices.${i}" class="deviceSelect" from="${fileInfo[file.fileName]?.devices}" noSelection="${['null':'Select a manufacturer']}" value="${fileInfo[file.fileName]?.selectedDevice?.toString()}" />
</g:if>
<g:else>
<g:select name="devices.${i}" class="deviceSelect" from="${[:]}" noSelection="${['null':'Select a manufacturer']}" />
</g:else>
</td>
</tr>
</g:each>
</table>
它没有按预期工作。任何输入都会有很大帮助
【问题讨论】：
-
这是一个关于javascript的问题，所以请出示你的javascript代码
-
修改了代码，请看一下
-
"...但它似乎无法正常工作。" - 请更具体地说明什么不起作用。您是否收到任何 javascript 控制台错误？ javascript 函数中的
alert()会触发吗？您是否在控制器端收到请求并查看日志？ “工作不正常”并没有给我们太多的工作空间。 -
fileInfo 值已作为空传递，因此 file.fileName 已显示为无此类属性...抱歉回复晚了..昨天是 EOD，我刚开始回来，感谢您的回复
标签： javascript grails