隐藏面板直到调用模糊事件

Question

当用户在licplate 上输入文本后调用事件模糊时，如何更新第二个panelGrid 上的style？我尝试了下面的代码，但它得到了错误：

错误 [http-bio-8080-exec-28][render_portlet_jsp:154] javax.faces.FacesException：找不到具有标识符的组件 "panelInfo.Show()" 引用自

<p:panelGrid styleClass="noborder valigntop">
    <p:row>
        <p:column>
            <p:panelGrid styleClass="noborder">
                <p:row>
                    <p:column>
                        <p:inputText id="licplate" value="#{gateBacking.queue.fleet}" >
                            <p:ajax event="blur" update="panelInfo.Show();" />
                        </p:inputText>
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:column>
        <p:column>
            <p:panelGrid widgetVar="panelInfo" styleClass="border" style="visibility:hidden;">
                <p:row>
                    //---
                </p:row>
            </p:panelGrid>
        </p:column>
    </p:row>
</p:panelGrid>

谢谢！

---

编辑

代码显示隐藏面板，但之后按钮不起作用。

...
<p:tab id="tabXXX" title="XXX"> 
    <h:form id="frmXXX">
        <script type="text/javascript">
            function test(){
                 $(PrimeFaces.escapeClientId('frmXXX:opt')).css("display","block");
            }
        </script>

        <p:messages id="prmMessage" autoUpdate="false" closable="true" />

        <p:panelGrid id="pnlXXX">
            <p:row>
                <p:column>
                    <p:panelGrid>
                        <p:row>
                            <p:column><p:outputLabel for="valLbl" value="Value : " /></p:column>
                            <p:column>
                                <p:inputText id="valLbl" value="#{...}" required="true">
                                    <p:ajax event="blur" update="olLicPlate" oncomplete="test();" />
                                </p:inputText>
                            </p:column>
                            <p:column><p:message for="valLbl" display="icon" /></p:column>
                        </p:row>
                    </p:panelGrid>
                </p:column>
                <p:column>
                    <p:outputPanel id="opt" style="display:none;">
                        <p:panelGrid id="pnlInfo">
                            ...
                        </p:panelGrid>
                    </p:outputPanel>
                </p:column>
            </p:row>
            <p:row>
                <p:column colspan="2">
                    <p:panelGrid>
                        <p:row>
                            <p:column>
                                <p:commandButton id="btnAdd" value="Add"
                                    action="#{...}" process="@form"
                                    update="pnlXXX,prmMessage"></p:commandButton>
                            </p:column>
                        </p:row>
                    </p:panelGrid>
                </p:column>
            </p:row>
        </p:panelGrid>
    </h:form>
</p:tab>
...

Answer 1

update 属性用于在 ajax 调用完成后更新组件。如果你想在ajax调用完成后调用一些javascript函数，你必须使用oncompleteonsuccessfull或onerror（你的选择）：

• 在你的情况下，你试试

  <p:ajax event="blur" oncomplete="panelInfo.show();" />
  
  <p:panel visible="false" widgetVar="panelInfo">
              //content here
  </p:panel>
  

• 你可以使用 outputPanel，我用 ajax 测试过：

       <h:form id="description">            
          <script type="text/javascript">
              function test(){
                   $(PrimeFaces.escapeClientId('description:opt')).css("display","block");
              }
          </script>
          <p:outputPanel id="opt" style="display:none;">
              <p:commandButton process="@this" value="test" actionListener="#{user.Test}"/>
          </p:outputPanel>
          <p:inputText id="licplate" value="zzzz" >
              <p:ajax event="blur" oncomplete="test();" />
          </p:inputText>
      </h:form>