Primefaces Hash Navigation Using jQuery BBQ

primefaces

With jQuery BBQ you can keep track of state, history and allow bookmarking (#hashtag) while dynamically modifying the page via AJAX and/or DHTML.. just click the links, use your browser’s back and next buttons, reload the page, it’s all there.

Integrating jQuery BBQ with JSF/Primefaces is pretty much straight forward.

Before make sure that you have these points:

  • Create your JSF Project
  • Download jQuery BBQ (here)
  • Include jQuery BBQ  into your resources js folder

I’m going to use Primefaces extensions for the predefined layout’s  sake (You can have your own menu and centered content layout).

Now the scenario is very simple, we have a master menu with links to our pages (outcome), we click a link the page doesn’t reload but reloads only the content of the centered container, and we have to make sure that this is bookmark-able and would work with the browser’s back and next buttons, and even if we reload the page .

I’m going to call our little project: Prime BBQ

The scenario should look like this

primeBBQ

 

Create the main page.

As you can see that we included jQuery BBQ into our page

And we have a main menu, with all our navigation rules.

Meat Master Menu

In the center panel we have our center include.

this include would change based on the currentNav variable in our mainBean managedBean.

We have also a remoteCommand to change the currentNav to the current hashtag, and update our center panel include.

 

Create and included a javascript file. For example main.js (make sure you include it after jQuery BBQ)

And lastly our MainBean

 

 

For a working example, the project is available on Github

github_login_icon

If you think something is wrong please feel free to comment :)
  1. asics bleu says:

    It’s very simple to find out any matter on net as compared to books, as I found this post at this
    site.

    Reply
  2. BarnT says:

    Nice and smooth solution, thank you for sharing!

    Reply
  3. mihawk says:

    I’m using in my project with JSF Mojarra and Spring Security but not running.

    Reply