按鈕顯示列表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自帶的調試器。您可以設置斷點，檢查頁面上的元素和所有網絡流量。