2010-07-02 4 views
1

remoteLink (자바 스크립트 라이브러리로 Prototype 포함)를 사용하여 Ajax 호출을 만들고 싶지만 텍스트 필드의 값으로 전달할 매개 변수 중 하나가 필요합니다. GSP에서 지금까지 내가 가지고있는 것 :Grails에서 remoteLink를 사용하는 동적 매개 변수

<input id="email" name="email" type="text"/> 
... 
<g:remoteLink action="addEmail" params="[email:???]">Add</g:remoteLink> 

무엇을 넣어야합니까? 매개 변수로 email 텍스트 필드의 값을 보내기 위해 remoteLink를 얻으려면? 본질적으로 Grails 태그 내에서 DOM을 참조/액세스하려면 어떻게해야합니까?

나는 대신에

\$('email').value 

퍼팅 시도 ??? 하지만 내 GSP에서 "스크립트를 구문 분석 할 수 없습니다"오류가 발생했습니다.

감사이이 g을 사용하여 단순하게 링크 대신 버튼을 사용하여 괜찮 경우

답변

5

I했습니다 전에 유사하고, 나를 위해 (네, 특히 우아한되지 않음) 일 다음 할 일 수행해야합니다

<input id="email" name="email" type="text"/> 
... 
<g:javascript> 
    var addEmail = function() 
    { 
     ${ remoteFunction (action:"addEmail", update:"update-element-id", params:" 'email=' +$('email').value ") } 
    }; 
</g:javascript> 
<a href="javascript:void(0)" onclick="addEmail();return false;">add email</a> 

명확성을 위해 자바 스크립트 함수에 추출을하고 PARAMS 내부에 약간의 공간을 추가 작은 따옴표를 더 명확하게 보여줍니다.

+0

이것은 내가 설명한 방법보다 낫습니다. 구현을 깨지 않고 Prototype에서 다른 것으로 전환 할 수 있습니다. 좋은 제안, upvoted. – proflux

+0

당신이 VAR emailVal = $ ('이메일')로 값을 이동합니다.; 함수 안의 라인이 정말 잘 작동합니다. 답안을 바꾸어 주시면 받아 들일 수 있습니까? 감사. –

+0

완료. 제 ProFlux까지 들으,이 텍스트 필드의 값을 PARAMS에 추가하는 문제를 해결하는 방법, 상호 작용하는 더 우아한 GSP 얻을 수있는 방법과 자바 스크립트가 있었으면 좋겠어 하나 개되는 서버와 다른 클라이언트 ... – Chris

3

<g:remoteLink action="addEmail" params="${[email: some.groovy.to.get.your.email()]}">Add</g:remoteLink>

+1

이 코드는 페이지가 표시되기 전에 그 코드가 서버에서 렌더링 및 전자 메일 필드에 입력 할 수 있기 때문에, 당신은 "some.groovy.to.get.your.email"을 가질 수 없습니다 잘못된 것입니다. 당신이 필요로하는 전자 메일 필드가 채워진 후 클라이언트에서 실행 된 js 코드입니다. – Eduard

0

:로 submitToRemote합니다.

견해/이메일 /의 index.gsp :

<%@ page contentType="text/html;charset=UTF-8" %> 

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Sample title</title> 
    <g:javascript library="prototype" /> 
    </head> 
    <body> 
    <g:form name="theForm"> 
    Email: <g:textField name="emailAddr" /> 
    <!-- Here comes the ugly --> 
    <a href="#" name="submit" 
     onclick="new Ajax.Updater('resp','${createLink(action:'addEmail')}',{asynchronous:true,evalScripts:true,parameters:Form.serialize(document.theForm)});return false"> 
    Submit Form 
    </a> 
    </g:form> 
    <div id="resp"> 
    </div> 
    </body> 
</html> 

이메일 컨트롤러 :

class EmailController { 

    def index = { } 

    def addEmail = { 

     if(params?.emailAddr) { 
      render "${params.emailAddr}" 
     } 
     else { 
      render "No Email Entered" 
     } 
    } 
} 

커플이 링크를해야하는 경우 그러나,이 같은 추한 뭔가를 할 수* Ajax.Updater의 첫 번째 'resp'인수는 Form.serialize (document.theForm) 명령에서 *을 업데이트하려는 div의 ID이고 'theForm'요구 사항입니다. 양식을 지정한 이름과 일치해야합니다.

1

더 나은 해결책이 있습니다.

remoteLink 태그의 before 특성을 사용하여 DOM 항목이 포함 된 js 변수를 설정하십시오. 예를 들어

: JS에서 : GSP에

var MyJSClass = { 
    setParams: function() { 
    MyJSClass.dynamicParams = {email: $("#email").val(), myOtherField: anyJSLogicHere()} 
    } 
} 

:

<g:remoteLink action="addEmail" params="MyJSClass.dynamicParams" before="MyJSClass.setParams()">Add</g:remoteLink> 

참조 요청 전에 실행되는 JS 함수이며 것이다 dynamicParams 속성을 설정 코드 앞에 그런 다음 AJAX 요청에 사용됩니다.

0

Eduard의 대답에 따라 params 속성 내의 Javascript 코드가 실행될 것이라고 추론했습니다. 그래서 다음을 시도해 보았습니다.

<g:remoteLink action="addEmail" params="{email:\$('#email').val()}">Add</g:remoteLink> 
-1

Jquery와 함께 remoteLink를 사용하려는 경우 다음은 저에게 잘 맞았습니다.

<g:remoteLink action="${myBean.action}" params="[myParam: myBean.param]" update="updateDiv"> 
     My Awesome Link 
</g:remoteLink> 

간단하고 깔끔합니다.

+0

과의 어려운 같아요 페이지가 렌더링 된 후 사용자가 삽입합니까? – Eduard

+0

이 부분을 올바르게 이해하면 사용자가 입력 한 매개 변수 (필드)를 사용하려고합니다. 그 문제에 대해 를 사용할 수 있습니다. 나는 당신이 소형 폼을 추가 할 수 있습니다, 다음 링크/버튼을 제출할 수 있도록 동일한 문제가,로 submitToRemote 실제로, 전체 양식을 제출했다. 로그인 : <입력 이름 = "로그인"유형 = "텍스트"/> 에 http : // Grails의 .ORG/문서/최신/심판/태그/submitToRemote.html – Abhay

+0

이미 형태를 가지고 버튼을 제출뿐만 아니라 필요 원격 링크 – Eduard

관련 문제