jsf.ajax.request를 사용하여 JSF에서 ajax 요청을 수동으로 보내는 방법

Question

테이블이 있고 각 행에 js 함수를 호출하도록 구성된 'onclick'이 있습니다.이 부분이 작동합니다. 어떻게 든 정의 할 수있는 메서드에 ajax 요청을 보내는 함수를 원합니다. 돌아 오면 테이블 아래 div가 렌더링되어야합니다. 이것이 가능한가? 나는 코드와 JS 함수를 시도 :

<h:outputScript library="javax.faces" name="jsf.js" /> 
... 
function clickAndRender() { 
    jsf.ajax.request(this, event, {render: 'div-to-render'}) 
} 

그러나 그것은 물론 작동하지 않습니다. 나는 'source'매개 변수 (위의 코드는 'this'를 사용)의 값이 무엇인지 알지 못하고, 마지막 매개 변수에서 실행해야하는 것이 무엇 인지도 모릅니다. 또한 호출 할 url과 'action'메서드를 정의하는 방법을 알지 못합니다.

해결 방법은 페이지에서 클릭으로 제출 한 일부 보이지 않는 양식을 사용하는 것일 수도 있습니다. 아무도 도와 줄 수 있니?

Answer 1

<h:commandScript>은 다음과 같이 사용할 수 있습니다. spec issue 613도 참조하십시오.

<h:form> 
    <h:commandScript name="foo" action="#{bean.action}" render="div-to-render" /> 
</h:form> 

function clickAndRender() { 
    foo(); 
} 

그것은 Mojarra 2.3.0-m06부터 사용할 수

.

---

^{이 답변은 질문이 게시 된 후 3 년 후에 업데이트되었습니다. 아래는 원래 답이 <h:commandScript>이 존재하지 않았던 때입니다.}

---

I have no idea what the values of the 'source' parameter (the code above uses 'this') should be

그것은 당신이하고 싶은 UICommand 구성 요소의 클라이언트 ID가 호출하는 것, 예를 들어, <h:commandLink>, <h:commandButton> 등 표준 JSF API에 의해 제공됩니다. JSF는 요청 값을 적용하는 동안 구성 요소 트리에서 원하는 구성 요소를 찾은 다음 등록 된 모든 동작 (수신기)을 대기열에 넣을 수 있습니다.

---

neither do I know what execute in the last parameter should be set to.

그것은 양식 제출을하는 동안 처리하고자하는 구성 요소의 공백으로 구분 된 클라이언트 ID이어야한다. <f:ajax execute>에서 일반적으로 사용하는 것과 정확히 같습니다.

---

I also don't know how to define the url to be called

그냥 현재 페이지에서 UICommand 구성 요소가 중첩되어있는 <h:form>에 의해 생성 된 된 <form>에서 유래.하지만 jsf.ajax.request()에 지정할 필요가 없습니다로. jsf.js은 이미 UICommand 구성 요소의 클라이언트 ID를 기반으로 결정합니다.

---

and the 'action' method.

그냥 일반적인 방법으로 대상 UICommand 구성 요소의 action 또는 actionListener 속성을 지정합니다.

---

모든 모든, 당신의 구체적인 문제는 당신이보기에서 UICommand 구성 요소가없는, 그래서 당신은 jsf.ajax.request()을 사용할 수 없다는 것입니다. 한 가지 방법은 CSS display:none으로 숨겨져 명령 구성 요소와 형태를 가지고하는 것입니다 :

<h:form id="foo" style="display:none"> 
    <h:commandLink id="bar" action="#{bean.method}" /> 
</h:form> 

는 그런 다음 source 매개 변수로 foo:bar를 사용할 수 있습니다.

jsf.ajax.request('foo:bar', null, {'javax.faces.behavior.event': 'action', 'execute': '@form', 'render': 'div-to-render'}); 

위의 내용은 명령 구성 요소에서 <f:ajax execute="@form" render="div-to-render">과 실질적으로 동일합니다. 또는이 경로를 사용하여 jsf.ajax.request() 대신 document.getElementById("foo:bar").click()을 사용할 수도 있습니다.

또는 UICommand 사용자 정의 구성 요소를 만들면 JavaScript 사용자가 좀 더 쉽게 사용할 수 있습니다. JSF 유틸리티 라이브러리 OmniFaces에는 이러한 구성 요소 인 <o:commandScript>이 있습니다. 그것의 showcase page 및 source code을보십시오. JSF 컴포넌트 라이브러리 PrimeFaces도 flavor에서 유사한 컴포넌트를 <p:remoteCommand>으로 사용합니다. 그것의 showcase page을 또한보십시오. RichFaces은 동일한 것을하는 <a4j:jsFunction>을 가지고 있습니다. 그것의 showcase page을 또한보십시오.

Answer 2

네이티브 JSF를 단독으로 사용하는 방법을 알지 못합니다. 그러나 PrimeFace의 RemoteCommand을 살펴 봐야합니다. 바로 지금 당신이 필요로하는 것입니다.

<p:remoteCommand name="onRowClick" actionListener="myBean.onRowClick" update="div-to-render" /> 

<h:someComponent onclick="onRowClick" /> 

Answer 3

좋아, 그래서 BalusC에 의해 제안 된 모든 방법으로 < a4j : jsFunction > 넓은 여백으로 최선을 찾고 내가 원하는대로 구현할 수있었습니다. 나는 추시을 쓰고 그 이유는 내가 처음에 질문에 포함되지 않았던 많은 것들이 잘못이 있었다 충분한 의견 공간이되지 않는 것입니다;

1. 내 양식이 잘못된 위치에 D - 그것은

   <table> 
       <ui:repeat>...</ui:repeat> 
       <form>...</form> 
   </table> 
   

   반면 에이 잭스가 아닌 경우 작동하지만 id는 Ajax 요청에 작동하지 않습니다. 테이블 바로 아래로 이동하면 요청이 제출되었습니다.

2. 처음 렌더링 한 패널이 'false'로 렌더링되었으므로 HTML 마크 업이 처음에는 출력되지 않습니다. Ajax 호출이 반환되면 렌더링하려는 id가있는 요소를 찾을 수 없으며 오류 대화 상자가 표시되거나 아무 것도 표시되지 않습니다 (메서드에 따라 다름). 해결책은 항상 렌더링 된 문제의 ID로 래퍼 div를 사용하고 해당 div 내에서만 조건부 렌더링을 사용하는 것이 었습니다. 대신 그래서 :

   <h:outputText id="to-render" rendered="${bean.clicked != null}"> 
       ... 
   </h:outputText> 
   

   나는이 작업을 수행하는 데 필요한 모든 도움을

   <h:panelGroup layout="block" id="to-render"> 
       <h:outputText rendered="${bean.clicked != null}"> 
       ... 
       </h:outputText> 
   </h:panelGroup> 
   

감사합니다. BalusC의 게시물을 올바른 것으로 올바르게 남겨두고 내 오류가 전체에 영향을 미칩니다.