Question

I have a dynamically displayed lists, by selecting item in the first list, the items in the second list would be populated(using ajax).

The code :

            <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:[e-mail]?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>

I would like to have a button next to the list boxes and upon clicking it I want to add another set of list boxes below.

I tried onclick event of the button, but itseems to be not working properly.

Any better ideas would be helpful.

—-the controller code for the ajax method is

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])

    }

the template for the dynamic ajax view is

<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>

its not working as intended. any input is of great help

Answer 1

I could resolve the issue by including div and implementing ajax.(here is the code)

<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
                }
            }
        );

}

controller method

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])

}

template to implement 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']}" />