按钮显示列表onklick grails

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

我可以通过包含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 2

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

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

所以，与其

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

只是给你的按钮元素的ID在这样

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

的HTML，然后使用一个库如jQuery注册事件处理程序，如下所示：

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

Answer 3

我同意davnicwil - 你的内联代码将被证明是不好的p用于可维护源代码的ractice。国际海事组织jQuery是要走的路，但如果你真的不想去那里，在脚本元素内创建一个JavaScript函数来提高可读性。正如...

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

如果您没有JavaScript调试器，请在View-> Developer-> JavaScript Console下试用Chrome自带的调试器。您可以设置断点，检查页面上的元素和所有网络流量。