如何用jQuery刷新JSF模板中<ui:include>引入的topbar区域

看起来你遇到了两个核心问题：一是$('#topbar').load('#topbar')的写法错误导致全页刷新，二是刷新后菜单点击事件失效。下面给你针对性的解决方案：

1. 纠正局部刷新的JS逻辑 #

你原来用的load('#topbar')是错误的——jQuery的load()方法需要传入要加载的资源URL，而不是页面内的选择器。直接传选择器会导致它把当前页面的整个HTML内容加载到#topbar里，自然引发全页嵌套式的刷新。

正确实现步骤： #

第一步：创建独立视图返回topbar内容

因为WEB-INF下的文件无法直接通过URL访问，你需要创建一个专门的JSF视图（比如topbarFragment.xhtml）来返回topbar的内容：

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets">
    <!-- 直接引入你的topbar内容 -->
    <ui:include src="topbar.xhtml" />
</ui:composition>

第二步：修改后台JS执行代码

把原来的RequestContext执行代码改成通过jQuery Ajax请求这个独立视图，然后替换#topbar的内容：

RequestContext.getCurrentInstance().execute("""
    $.ajax({
        url: '#{request.contextPath}/topbarFragment.xhtml',
        method: 'GET',
        success: function(data) {
            $('#topbar').html(data);
        },
        error: function() {
            console.error('刷新topbar失败');
        }
    });
""");

这样就能精准替换#topbar的内容，不会触发全页刷新。

2. 修复菜单点击事件失效的问题 #

刷新后菜单事件失效，是因为原来的事件绑定是直接绑定到菜单元素上的，而新刷新出来的DOM元素没有继承这些绑定。解决方法是使用事件委托——把事件绑定到不会被刷新的父元素上，让它监听子元素的事件。

假设你原来的菜单事件代码是这样的：

$('.layoutmenu-item').click(function() {
    // 菜单点击逻辑
});

改成事件委托的写法：

$('#layoutmenu').on('click', '.layoutmenu-item', function() {
    // 原来的菜单点击逻辑
});

这样不管#layoutmenu里的内容怎么刷新，新的菜单元素触发点击时，父元素#layoutmenu都会捕获到事件并执行对应的逻辑。

额外提示：如果topbar包含JSF交互组件 #

如果你的topbar里有需要和后台交互的JSF组件（比如带ajax的按钮），建议改用PrimeFaces的p:remoteCommand来实现刷新，它能自动处理JSF的视图状态，避免出现交互异常：

1. 在页面中添加一个隐藏的remoteCommand：

<p:remoteCommand name="refreshTopbar" update="topbar" action="#{yourBean.updateNotificationData}" />

2. 后台需要触发刷新时，执行：

RequestContext.getCurrentInstance().execute("refreshTopbar();");

这种方式更符合JSF的生态，也不需要手动处理Ajax请求的细节。

内容的提问来源于stack exchange，提问作者user2365813