Grails에 주입 : jQuery를 선택하고 핸들러

I가 다음 Grails의 (2.3.6) POGO :Grails에 주입 : jQuery를 선택하고 핸들러

class Pet { 
    Long id 
    String name 
    PetType type 
}

다음 컨트롤러 :

class PetController { 
    def index() { 
     List<Pet> pets = PetLoader.loadAllPets() 
     render(
      view: "listPets", 
      model: [ 
       pets: pets 
      ] 
     ) 
    } 

    def loadPet() { 
     Long petId = params.petId // Pet#id 
     // Do stuff with the 'petId'. 
    } 
)

그리고 각각의 본문 listPets.gsp : 나는이 코드를 실행하면

<body> 
    <h1>Select a pet to edit below:</h1> 

    <g:select id="pets" 
     name="pets" 
     from="${pets}" 
     value="${pet.name}" 
     optionKey="id" /> 

    <g:javascript> 
     var ajaxAction = "${createLink(controller:'pet',action:'loadPet')}" 
     $("#pets").on('change', function() { 
      $.get(
       url: ajaxAction, 
       data: $("#pets").val(), 
       success: function(data, status) { 
        alert("Success!\n" + data); 
       }, 
       dataType: "json" 
      ); 
     }); 
    </g:javascript> 
</body>

, 나는 N 분명히 빈 <g:select>를 얻을 수 ot는 올바르게 주입/설정되었습니다. 내가하고 싶은 것은 이것이다 : 페이지가로드, 전체 users 목록은 <select id="pets"> 드롭 다운에 주입하고 옵션 텍스트로 Pet#name 문자열이 표시됩니다

;
사용자가 드롭 다운 (UI에서)에서 Pet을 새로 선택하면 jQuery 핸들러는 loadPet으로 비동기 호출을 발생시킵니다. 내가 백엔드에 그 애완 동물 ID로 다른 물건을 할 수 있도록 다음
내부 loadPet는, 나는 params 객체를 통해, 드롭 다운 메뉴에서 선택한 값의 Pet#id에 acccess 필요 난

나무를 통해 숲을 보면서 힘든 시간을 보냈습니다. 확실히 <g:select> 태그를 잘못 사용했다고 확신합니다. 그러나 컨트롤러 및/또는 jQuery 스크립트를 변경해야 할 수도 있습니다. 질문 : Pet#name으로 선택 항목을 채우려면 내 코드에 어떤 변경이 필요합니까? loadPets이 jQuery에서 호출 될 때 params에서 Pet#id에 액세스 할 수 있습니까?

출처

2015-01-06 smeeb

코드를 약간 수정하면 다음과 같습니다 (의도 한대로). 다음은 주요 변경 사항은 다음과 같습니다 g:select 내

는 표시 문자열 및 <option> 값을 기본을 제어 할 수 optionValue 및 optionKey를 사용합니다. 자세한 내용 및 예제를 보려면 http://grails.org/doc/latest/ref/Tags/select.html
jQuery 코드는 .get() 약식이지만 .ajax() 매개 변수 구문을 사용합니다. 둘 중 하나를 만들 수는 있지만 기능 매개 변수에는 차이가 있습니다. 참조 : http://api.jquery.com/jquery.get/
jQuery에 대한 CDN 링크가 포함되었습니다. 이것은 빠른 테스트에 유용하지만, jQuery 라이브러리를 포함하는 다양한 다른 방법이 있습니다 (이미 프로젝트에서이 기능을 구성했을 수도 있습니다)
createLink은 생성 된 URL이 이스케이프되지 않도록 raw()으로 포장되어 있습니다.

업데이트 코드 : Pet-

없음을 변경하거나 PetController

listPets.gsp

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="layout" content="main"/> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body> 
    <h1>Select a pet to edit below:</h1> 

    <g:select id="pets" 
     name="pets" 
     from="${pets}" 
     optionKey="id" 
     optionValue="name" /> 

    <g:javascript> 
     var ajaxAction = '${raw(createLink(controller:'pet',action:'loadPet'))}'; 
     $("#pets").on('change', function() { 
      $.ajax({ 
       url: ajaxAction, 
       data: { petId: $("#pets").val() }, 
       success: function(data, status) { 
        alert("Success!\n" + data); 
       } 
      }); 
     }); 
    </g:javascript> 

</body> 
</html>

출처

2015-01-06 17:57:26

Grails에 주입 : jQuery를 선택하고 핸들러

답변

관련 문제