JSF - 如何使用.load（）将内部页面内的div内容加载到当前页面上的div？

Question

我试图创建一个简单的电影数据库应用程序，在其中我在侧边栏中显示电影列表，单击时，将在不重新加载的情况下在同一页面上显示电影的信息。我已经设置了后端bean，以便通过GET请求从URL中提取电影的ID，然后用于确定要显示的电影。

这是将执行加载的页面中的相关XHTML：

<div id="content-wrapper">
  <div id="movielist-wrapper">
    <ui:repeat value="#{movieApplicationManagedBean.movieList}" var="movie" varStatus="status">
      <div class="movie-listitem">
        <h:link value="#{movie.title}" onclick="aLoadMovie(#{status.index + 1})">
          <f:param name="movieId" value="#{status.index + 1}"></f:param>
        </h:link>
      </div>
    </ui:repeat>
  </div>
  <div id="moviedetails-wrapper"> </div>
</div>

这是格式化电影信息的页面的相关XHTML：

 <h:body>
  <div id="ajax-wrapper">
    <div id="logodetails-wrapper">
      <div id="poster-div">
        <h:graphicImage url="#{movieController.movie.posterUrl}"></h:graphicImage>
      </div>
      <div id="details-wrapper"> </div>
    </div>
    <div id="plot-div">
      <h:outputText value="#{movieController.movie.plot}"></h:outputText>
    </div>
  </div>
</h:body>

这是通过onclick函数执行的javascript：

function aLoadMovie(movieId) {
$("#moviedetails-wrapper").load("movie.xhtml?" + $.param({
    movieId: movieId
}) + " #ajax-wrapper");

现在，当我运行Web应用程序并选择一部电影时，AJAX似乎正在运行，但页面不会显示。很少会显示电影页面的内容，但几乎立即消失。

我是使用AJAX的新手，所以任何帮助解决这个问题都将非常感激。谢谢，美好的一天。