0

I'm trying to make a simple movie database application where I present a list of movies in a sidebar, when clicked, will display the movie's information on the same page without reloading. I've set up the backend beans so that the movie's ID is extracted from the URL through a GET request, which is then used to determine which movie to display.

This is the relevant XHTML from the page that will do the loading:

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

This is the relevant XHTML of the page that formats the movie's information:

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

And this is the javascript that is executed through the onclick function:

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

Right now, when I run the web application and select a movie, the AJAX appears to run, but the page is not displayed. Very rarely, the contents of the movie page is displayed, but then disappears almost instantly.

I'm quite new to using AJAX, so any help to fix this problem would be greatly appreciated. Thanks and good day.

Sanjeev Kumar
  • 3,113
  • 5
  • 36
  • 77
Long Tran
  • 3
  • 1
  • 3
  • Why you don't use an iframe HTML tag? it's not -maybe- the best way but will load faster than ajax, and you can set an SRC and modify the params depending on user click... – JoelBonetR Sep 26 '16 at 10:10
  • I've got a working version using an iframe, but I wish to learn how to do it with AJAX as well. – Long Tran Sep 26 '16 at 10:12
  • oh ok! so inspect and debug js to see what happen (maybe it loads always but sometimes disappear too fast and you cannot see it). Maybe it looses focus and come back to original state (with no vid loaded on front z-index)? – JoelBonetR Sep 26 '16 at 10:14

0 Answers0