Question

我有一个动态显示的列表，通过选择第一个列表中的项目，将填充第二个列表中的项目（使用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" />&nbsp;<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>

它没有按预期工作。任何输入都有很大的帮助

Answer 1

对于初学者，您需要避免内联事件注册（即使用onclick =“”在html中注册事件处理程序）。

这混合了结构标记（HTML）和行为（JS），这是糟糕的设计。

所以，而不是

<input type="button" value="Add a Device" onClick="deviceInfo('${i}','fileInfo','files','manufacturers')" />

只需在HTML中为你的button元素添加一个id

<input id="mybutton" type="button" value="Add a Device" />

然后使用像jQuery这样的库来注册事件处理程序，如下所示：

jQuery( '#mybutton').click( function(){deviceInfo( ... )} );

Answer 2

我同意davnicwil - 对于可维护的源代码，您的内联代码将被证明是不好的做法。 IMO jQuery是要走的路，但如果你真的不想去那里，可以在脚本元素中创建一个javascript函数来提高可读性。如... ...

<r:script>
  function someButtonClick() {
    // You can still access your grails data 
  }
</r:script>

如果您没有javascript调试程序，请在View-＆gt; Developer-＆gt; JavaScript控制台下试用Chrome附带的调试程序。您可以设置断点，检查页面上的元素以及所有网络流量。

Answer 3

我可以通过包含div和实现ajax来解决这个问题。（这里是代码）

<td><input type="button" value="Add a Device" onClick="deviceInfo('${i}')" /></td>

function deviceInfo(id) {
alert("hi, in deviceInfo function .... ");
new Ajax.Updater(
            "deviceInfo." + id,
            "/wizard/submission/ajaxGetDevicesInfo", {
                method:'get',
                parameters: {
                    selectedValue : $F("manufacturers." + id),
                    id: id
                }
            }
        );

}

控制器方法

def ajaxGetDevicesInfo = {

    Submission submission = (Submission) session[getSessionObjectName()];
    OperatingSystem os = OperatingSystem.get(submission.getOperatingSystemId());
    def manufacturers = terminalService.getAllDeviceManufacturersForType(os.getType());
    terminalService.getDevicesForManufacturerAndType(params.selectedValue, type);
    render(template:"deviceInfo", model : ['id': params.id, 'manufacturers': manufacturers])

}

实现div的模板

<g:select name="manufacturers.${id}" from="${manufacturers}" onChange="updateDevices('${id}')"  noSelection="${['null':'Select a manufacturer']}" value="" />
</td>
<td>
<g:select from="${devices}" name="devices.${id}" value="" noSelection="${['null':'Select Devices']}" />

按钮onclick grails显示列表

3 个答案: