отображение списков по кнопке на графике

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>

Я хотел бы иметь кнопку рядом со списком, и после щелчка я хочу добавить еще один набор списков ниже.

Я попробовал событие нажатия кнопки, но кажется, что оно не работает должным образом.

Любые лучшие идеи будут полезны.

---- код контроллера для метода 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

Я согласен с davnicwil - ваш встроенный код окажется плохой практикой для поддержки исходного кода. IMO jQuery - это путь, но если вы действительно не хотите туда заходить, создайте функцию javascript внутри элемента script, чтобы повысить читабельность. Как в ...

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

Если у вас нет отладчика для javascript, попробуйте тот, который поставляется с Chrome, в View-> Developer-> JavaScript Console. Вы можете устанавливать точки останова, проверять элементы на странице и весь сетевой трафик.

Answer 2

Я мог бы решить проблему, добавив 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']}" />

Answer 3

Для начала вам следует избегать встроенной регистрации событий (т. Е. Регистрировать обработчики событий в html с помощью onclick = "").

Это смешивает структурную разметку (HTML) и поведение (JS), что является плохим дизайном.

Таким образом, вместо

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

просто присвойте своему элементу кнопки идентификатор в HTML, как это

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

, а затем используйте библиотеку, такую ​​как jQuery, чтобы зарегистрироватьОбработчик событий выглядит так:

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