Динамическое падение Grails Использование remoteFunction не работает

Question

Я пытаюсь создать динамическое выпадающее меню в работе Grails. Второй снимок не заполняется после выбора при первом выпадающем списке.

Вот мой код на моем _form GSP:

<g:select name="department" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}" 
      onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>    
<td id="jobTitleSelection"> 
    <select> 
     <option>Select One...</option> 
     <g:select name="jobTitle.id" from="${MCM.MGJobTitle.list()}" optionKey="id"/> 
    </select> 
</td> 

код в мой контроллер:

def findJobTitleForDepartment = { 
    println "findJobTitleForDepartment" 
    def job = MGDepartment.get(params.department.id) 
    render(template: 'jobTitleSelection', model: [mGJobTitle: job.mGJobTitle]) 
} 

В моих создать заголовок у меня есть:

<g:javascript library="jquery"/> 

Есть способ сделать динамическое падение работы?

Answer 1

Да, именно

как это одна:

<g:select name="departmentId" id="department" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}" 
       onchange='loadJobTitles();'>  
<g:select id="jobTitle" name="jobTitleid" from="${[]}" optionKey="id"/> 

<script type="text/javascript">   

     function loadJobTitles(init) 
      { 
       var root="${resource()}"; 
       var departmentid=document.getElementById('department').value;    

       var url = root+'/Departemnt/findJobTitleForDepartment?departementId='+departmentid; 

       jQuery('#jobTitle').load(url); 
      } 
      </script> 

// и вы findJobTitleForDepartment должны быть реализованы как этот

def findJobTitleForDepartment() { 
    def html="" 
    def jobtitle = null 
    def dep = null 
    def boolean empityString = true 

     if(params?.departementid!='null') { 

      dep =Department.get(params?.departementid?.toLong()) 
      jobtitle= dep.mGJobTitle.sort{it.name} // you can ignore sort here //just list 



      jobtitle.each { 
       if(empityString) 
       { 
        empityString = false 
        html=html + "<option selected='selected' value=\'null\'></option>" 
        html=html + "<option value=\'${it.id}\'> ${it}</option>" 
       } 
       else 
        html=html + "<option value=\'${it.id}\'> ${it}</option>" 

} //if end upper root 

render html 
      } 

Answer 2

Если изменить вам ответ владельца на DIV вместо td, то я думаю, вы сможете получить результат примерно так:

<g:select name="department" from="${MCM.MGDepartment.list(sort:'dep')}" optionValue="dept" optionKey="id" noSelection="${[null: 'Select One...']}" 
      onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>    
<td > 
<div id="jobTitleSelection"> 

     <g:select name="jobTitle.id" from="${MCM.MGJobTitle.list()}" optionKey="id"/> 

</div> 
</td> 

Я предполагаю, что на вашей странице есть Jquery, и вы получаете статус ответа от вашего запроса ajax.

Answer 3

1 Легкий способ

Определить на изменения и отправить его с помощью Ajax, затем вернитесь поле выбора из контроллера DONE! Как?

<g:select name="department" id="DepartmentId" from="${MCM.MGDepartment.list(sort:'dep')}" values="${MGMatricesSRFApproversInstance?.department?.id}" optionKey="id" noSelection="${[null: 'Select One...']}" 
      onchange="${remoteFunction (controller: 'mGMatricesSRFApprovers', action: 'findJobTitleForDepartment', params: '\'department.id=\' + this.value', update: 'jobTitleSelection')}"/>    
<td id="jobTitleSelection"> 
    <select> 
     <option>Select One...</option> 
     <g:select name="jobTitle.id" id="jobID" from="${[]}" optionKey="id"/> 
    </select> 
</td> 

Использование г: JavaScript и определить Ajax JQuery размещать

<g:javascript> 
$(document).ready(function(){ 
$("#territory").change(function() { 
      var depValue = $("#DepartmentId").val(); 
      $.ajax({ 
      url:"${resource()}"+"/Department/getJobByDepartment", 
      data:"id="+this.value, 
      method:"POST", 
      cache:false, 
      success:function(result) { 
      $("#jobID").html(result); 
      $("#jobID").val(depValue); 
      $("#jobID").trigger('change'); 
      }    
      });  
     }); 
}); 

</g:javascript> 

наконец контроллер

def getJobByDepartment(params){ 

    //check for null selection and add the nessary code but if not null 

    println "findJobTitleForDepartment" 
    def departemnt= MGDepartment.get(params?.DepartmentId) 
    render g.select(from: departement.jobs, id:"jobId",name:"job",noSelection:['null':'']]) 

} 

Done и я ожидаю, некоторые моменты:) !!! Daniel