JSF 2 Update组件在表单外部和Facelet外部 [英] JSF 2 Update Component Outside of Form and Outside of Facelet

问题描述

我在< ui:insert name ="content"/>中有一个表单 当我使用p:commandButton保存数据时，我可以更新< ui:insert name ="content"/>中的表单和内容.但是我在弄清楚如何更新< ui:include src ="/sections/menus/topMenu.xhtml"/>

I have a form in the <ui:insert name="content" /> When I save the data with a p:commandButton I can update the form and things within the <ui:insert name="content" />. But I am having trouble figuring out how to update components in the <ui:include src="/sections/menus/topMenu.xhtml"/>

在顶部菜单中，我有一个面板的子视图，其中包含根据人是否登录而呈现的链接.当他们登录时，我显示他们的用户名.如果我在模板的内容部分中更新了用户名，则我想更新ui，以便菜单中的名称也可以更新而无需刷新页面.但这也是我可以使用的后备方式.更新后刷新页面.但宁愿不这样.如果您愿意，我会发布更多代码，但尝试将其最小化.

Inside the topmenu I have a subview for a panel with links that get rendered depending on whether a person is logged in or not. when they are logged in I show their username. If I update the user name in the content part of the template, I want to update the ui so that the name in the menu also updates without a page refresh. But that is a fallback I can use too. Refresh the page after update. But would rather not. I'll post more code if you want but trying to keep it to a minimum to start.

  <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

Below is the p:commandButton that saves the user info

<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. -->

下面是模板的菜单部分.

Below is in the menu part of the template.

<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>

推荐答案

通过ID引用元素的一般思路如下:

The general idea of referring to an element by ID is as following:

让我们说我们有一个元素<p:commandButton>.

Lets say we've got an element <p:commandButton>.

当没有给定元素id时，JSF会生成一个:

When the element is given no id JSF generates one:

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

如果某个元素嵌套在诸如表单之类的容器元素中，那么JSF会在ID的前面加上表单的ID:

If an element is nested in a container element like a form, JSF prefixes the ID with the ID of the form:

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前面的":"完成此操作.这是一个示例:

When there is an element in another container you need to reference from the root element. This can be done using a ":" in front of the ID. Here is an example:

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

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

如果不确定JSF分配给您的元素的ID，请使用FireBug之类的方法检查元素并发现其ID.

If you're not sure what ID JSF has assigned to your element, use something like FireBug to inspect the element and discover it's ID.

就您的代码而言，我不认为<f:subview>正在生成容器元素，因此您需要使用update=":topMenuLoginForm"引用topMenuLoginForm.

As far as your code, I don't think <f:subview> is generating a container element, thus you need to reference topMenuLoginForm using update=":topMenuLoginForm".

话虽如此，如果您想使用AJAX更新元素，请使用update属性.参见上面的示例.

That being said, if you want to update an element using AJAX, use the update attribute. See my example above.

这篇关于JSF 2 Update组件在表单外部和Facelet外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！