7

<ui:insert name="content" /> にフォームがあります。データを ap:commandButton で保存すると、フォームと <ui:insert name="content" /> 内のものを更新できます。しかし、 <ui:include src="/sections/menus/topMenu.xhtml"/> のコンポーネントを更新する方法がわかりません。

トップメニュー内には、ユーザーがログインしているかどうかに応じてレンダリングされるリンクを含むパネルのサブビューがあります。彼らがログインすると、ユーザー名が表示されます。テンプレートのコンテンツ部分でユーザー名を更新する場合、ページを更新せずにメニューの名前も更新されるように UI を更新したいと考えています。しかし、それは私も使用できるフォールバックです。更新後、ページを更新してください。しかし、むしろそうではありません。必要に応じてさらにコードを投稿しますが、最初は最小限に抑えようとしています。

  <h:body>
    <div id="wrap">
      <div title="Container">
          <ui:include src="/sections/base/header.xhtml"/>
        </div><!-- End of Banner -->

        <div id="baseTemplateTopMenu" title="Menu">
          <ui:include src="/sections/menus/topMenu.xhtml"/>
        </div><!-- End of Menu -->

        <div id="sbt_contentbody"> 

            <div title="Left Column">
              <ui:include src="/sections/base/leftsidebar.xhtml"/>
            </div> <!-- End of Left Column -->
            <div title="Content Column">
              <ui:insert name="content" />
            </div><!-- End of Centre Column -->
            <div title="Right Column">
              <ui:include src="/sections/base/rightsidebar.xhtml"/>
            </div><!-- End of Right Column -->

        </div>
        <div id="footer" title="Footer" class ="container">
          <ui:include src="/sections/base/footer.xhtml"/>
        </div><!-- End of Footer -->

      </div><!-- End of Container -->
  </h:body>

以下は、ユーザー情報を保存する p:commandButton です。

<p:commandButton id="id_SubmitUserInfoPrefs"
                    value="Update"
                    action="#{userPreferences.updateUserInfo()}" styleClass="bottom_margin_2em top_margin_2em">
    <f:ajax execute="@form" render="@form :topMenuLoginView:topMenuLoginForm" />
<!-- tried adding 'update=":"topMenuLoginView:topMenuLoginForm"' as well. -->

以下はテンプレートのメニュー部分です。

<f:subview id="topMenuLoginView">
    <h:form id="topMenuLoginForm" prependId="false">
        <ul>
            <h:panelGroup id="loginPanel" rendered="#{!user.loggedIn}">
                <li><h:outputLink value="javascript:void(0)" onclick="topMenuLoginDialog.show()" 
                                    title="login" styleClass="loginpanelclass">Log In</h:outputLink></li>
                <li><h:link value="Register" outcome="/registration/register.xhtml" /></li>
            </h:panelGroup>
            <h:panelGroup id="logoutPanel" rendered="#{user.loggedIn}">
                <li><h:link value="#{user.nickname}" outcome="#{navigationprops.userprefs}" /> </li>
                <li><p:commandLink action="#{webAuthenticationBean.logout}" 
                                    update=":topMenuLoginView:topMenuLoginForm">
                        Logout
                    </p:commandLink>
                </li>
            </h:panelGroup>
        </ul>
    </h:form>
</f:subview>
4

2 に答える 2

9

ID によって要素を参照する一般的な考え方は次のとおりです。

要素があるとしましょう<p:commandButton>。

要素に ID が指定されていない場合、JSF は ID を生成します。

<button name="j_idt191" id="j_idt191" ....

要素がフォームなどのコンテナー要素にネストされている場合、JSF は ID の前にフォームの ID を付けます。

JSF:

<h:form>
    <p:commandButton/>
</h:form>

HTML:

<form id="j_idt48">
    <button name="j_idt48:j_idt191" id="j_idt48:j_idt191" ....
</form>

別のコンテナに要素がある場合は、ルート要素から参照する必要があります。これは、ID の前に「 : 」を使用して行うことができます。次に例を示します。

<p:commandButton id="button1" update=":form:button2" ...

<h:form id="form">
    <p:commandButton id="button2" update=":button1" ...
</h:form>

JSF が要素に割り当てた ID がわからない場合は、FireBug などを使用して要素を検査し、その ID を見つけます。

<f:subview>あなたのコードに関しては、コンテナ要素を生成しているとは思わないので、をtopMenuLoginForm使用して参照する必要がありますupdate=":topMenuLoginForm"。

そうは言っても、AJAX を使用して要素を更新する場合は、update 属性を使用します。上記の私の例を参照してください。

于 2012-08-27T21:48:25.953 に答える
2

フォーム外のコンポーネントを更新する

<p:gmap center="36.890257,30.707417" zoom="13" type="ROADMAP" 
                style="width:600px;height:400px"
                model="#{mapBean.simpleModel}"
                onPointClick="handlePointClick(event);"
                widgetVar="cliMap" fitBounds="true"
                id="map">
            <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}"  />
        </p:gmap>

        <p:dialog widgetVar="dlg" showEffect="fade">
            <h:form prependId="false" id="formnew">
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <p:outputLabel value="New Point"/>
                    </f:facet>
                    <h:outputLabel for="title" value="Title:" />
                    <p:inputText id="title" value="#{mapBean.title}" />

                    <f:facet name="footer">
                        <p:commandButton value="Add" actionListener="#{mapBean.newPoint()}" update=":map" oncomplete="markerAddComplete()" />
                        <p:commandButton value="Cancel" onclick="return cancel()" />
                    </f:facet>
                </h:panelGrid>
                <h:inputHidden id="Nlat" value="#{mapBean.lat}"  />
                <h:inputHidden id="Nlng" value="#{mapBean.lng}" />

            </h:form>
        </p:dialog>

私は update=":map" を使用して、Primefaces を使用してフォームから Google マップを更新しました

于 2014-05-22T08:26:57.850 に答える