SPA approach not working if page contains b:carousel

1
votes

Environment:

I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.

What I have:

My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:

enter image description here

For updating the content page I'm using AJAX.

Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!

What I tried to do:

As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.

Please consider following example:

I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page. As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.

My main question:

Is there any trick to update the content page with ajax if there's a b:carousel on it? What am I doing wrong?

EDIT:

I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.

Project: https://github.com/mweber96/stackoverflow39128418

SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/

This question is related to my previous question: Use ui:repeat with b:carousel?

1
jsfcarouselsingle-page-applicationbootsfaces
There are still many questions related with your application. How do you perform the navigation? Do you see any error log? The proper way to test it would be to implement an example isolating it from the MySql layer and provide a minimal code to reproduce the issue. See here how to create a mcve. If you provide everything needed to reproduce it or you upload an example project to github, I'll take a look to it. – Xtreme Biker
I'll create a sample project as soon as I got time tomorrow! – mweber
I added a sample project on github so feel free to test it! I'm seeing no error logs so everthing should be alright. – mweber

1 Answers

3
votes

It's a combination of two bugs:

  • Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.

    • BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's $("#myCarousel").carousel();

BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!