Program Tip

제출 후 유효성 검사 오류가 발생하면 p : dialog를 열어 둡니다.

programtip 2020. 11. 22. 20:29
반응형

제출 후 유효성 검사 오류가 발생하면 p : dialog를 열어 둡니다.


최소 예제 대화 상자 :

<p:dialog header="Test Dialog"  
          widgetVar="testDialog"> 
  <h:form> 
    <p:inputText value="#{mbean.someValue}"/> 

    <p:commandButton value="Save" 
                     onsuccess="testDialog.hide()" 
                     actionListener="#{mbean.saveMethod}"/> 
  </h:form>       
</p:dialog> 

내가 할 수 있기를 원하는 것은 mbean.saveMethod가 어떤 문제가 있으면 대화가 닫히지 않도록 막고 으르렁 거리는 메시지 만 출력하는 것입니다. 이것은 백엔드 서버에 저장이 제출 될 때까지 someValue가 유효한지 알 수있는 방법이 없기 때문에 유효성 검사기가 도움이되지 않는 경우입니다. 현재 보이는 속성을 사용하여이를 수행하고 mbean의 부울 필드를 가리 킵니다. 작동하지만 대화 상자를 위로 또는 아래로 표시하려면 서버를 눌러야하기 때문에 사용자 인터페이스가 느려집니다.


onsuccess아약스 요청 자체가 (즉, 어떤 네트워크 오류, 캐치되지 않는 예외 등이 없다) 성공하면 실행은 액션 메소드가 성공적으로 호출하지 않은 경우.

주어진 <p:dialog widgetVar="testDialog">당신은 onsuccess그것을 제거하고 RequestContext#execute()내부의 PrimeFaces로 바꿀 수 있습니다 saveMethod().

if (success) {
    RequestContext.getCurrentInstance().execute("PF('testDialog').hide()");
}

참고 : PF()PrimeFaces 4.0에서 도입되었습니다. 이전 PrimeFaces 버전에서는 testDialog.hide()대신 필요 합니다.

뷰 특정 스크립트로 컨트롤러를 어지럽히 지 않으려면 oncomplete대신 args부울 validationFailed속성 이있는 객체를 제공하는을 사용할 수 있습니다 .

<p:commandButton ...
    oncomplete="if (args &amp;&amp; !args.validationFailed) PF('testDialog').hide()" />

if (args)당신이 얻을 때 새로운 JS 오류가 발생하여 아약스 오류가 발생했을 때 결석 및 수 있기 때문에 검사가 필요하다 validationFailed그것에서; &amp;대신은 &이유는 설명을위한 필수 이 답변 당신이 좋아 호출 JS 함수에 필요한 경우, 리팩토링을 oncomplete="hideDialogOnSuccess(args, testDialog)"같이 유효성 검사가 실패했을 때 : <대화 P> 뜨고 .

이 후자의 솔루션 (약간 재 작성)은 일반 jsf h:commandButton와 함께 작동합니다.f:ajax


PrimeFaces가 RichFaces가 이미 지원하는 기능을 지원하지 않는 것은 유감입니다 on*. 속성 에서 EL의 요청 시간 재평가 . 그렇지 않으면 다음과 같이 할 수도 있습니다.

<p:commandButton ...
    oncomplete="if (#{not facesContext.validationFailed}) PF('testDialog').hide()" /> 

나는 그냥 봤 한 이 솔루션을 . 기본적으로 아이디어는 버튼의 액션 대신 actionListener를 사용하는 것이며, backing bean에 콜백 매개 변수를 추가하여 버튼의 oncomplete 메소드를 체크인합니다. 샘플 부분 코드 :

JSF 우선 :

<p:commandButton actionListener="#{myBean.doAction}"
   oncomplete="if (!args.validationFailed &amp;&amp; args.saved) schedulesDialog.hide();" />

백업 콩 :

public void doAction(ActionEvent actionEvent) {
    // do your stuff here...
    if (ok) {
        RequestContext.getCurrentInstance().addCallbackParam("saved", true);
    } else {
        RequestContext.getCurrentInstance().addCallbackParam("saved", false);
    }
}

이것이 누군가에게 도움이되기를 바랍니다 :)


oncomplete명령 버튼 속성과 정말 간단한 스크립트를 사용하면 많은 도움이됩니다.

대화 상자와 명령 단추는 다음과 유사합니다.

<p:dialog widgetVar="dialog">
   <h:form id="dialogView">
       <p:commandButton id="saveButton" icon="ui-icon-disk"
           value="#{ui['action.save']}"
           update=":dataList :dialogView"
           actionListener="#{mbean.save()}"
           oncomplete="handleDialogSubmit(xhr, status, args)" />
   </h:form>
 </p:dialog>

스크립트는 다음과 같습니다.

<script type="text/javascript">
    function handleDialogSubmit(xhr, status, args) {
        if (args.validationFailed) {
            dialog.show();
        } else {
            dialog.hide();
        }
    }
</script>

이 솔루션을 사용합니다.

JSF 코드 :

<p:dialog ... widgetVar="dlgModify" ... >
...
<p:commandButton value="Save" update="@form" actionListener="#{AdminMB.saveTable}" />
<p:commandButton value="Cancel" oncomplete="PF('dlgModify').hide();"/>

백킹 빈 코드 :

public void saveTable() {
    RequestContext rc = RequestContext.getCurrentInstance();
    rc.execute("PF('dlgModify').hide()");
}

나는 이것이 가장 깨끗한 해결책이라고 믿습니다. 이렇게하면 버튼 코드를 변경할 필요가 없습니다 . 이 솔루션은 hide 함수 프로토 타입을 재정의합니다.

$(document).ready(function() {
    PrimeFaces.widget.Dialog.prototype.originalHide = PrimeFaces.widget.Dialog.prototype.hide; // keep a reference to the original hide()
    PrimeFaces.widget.Dialog.prototype.hide = function() {
        var ajaxResponseArgs = arguments.callee.caller.arguments[2]; // accesses oncomplete arguments
        if (ajaxResponseArgs && ajaxResponseArgs.validationFailed) {
            return;  // on validation error, prevent closing
        }
        this.originalHide();
    };
});

이렇게하면 다음과 같이 코드를 유지할 수 있습니다.

<p:commandButton value="Save" oncomplete="videoDetalheDialogJS.hide();" 
   actionListener="#{videoBean.saveVideo(video)}" />

The easiest solution is to not have any "widget.hide", neither in onclick, neither in oncomplete. Remove the hide functions and just put

visible="#{facesContext.validationFailed}" 

for the dialog tag

참고URL : https://stackoverflow.com/questions/9195756/keep-pdialog-open-when-a-validation-error-occurs-after-submit

반응형