Dropdown with bootstrap (JSF project)

Question

I have a problem with dropdown menu on my JSF project.

I'm using a bootstrap template (https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR).

Well, the dropdown works perfect when all of my template client pages are on the root:

-Project-war
--Web Pages
---Templates
----Template.xhtml
---Index.xhtml
---Login.xhtml
---allPages...

But now I want to use Filters to filter two types of users (admin and users). The problem is when I change the structure adding the folders "admin" and "users" like that:

-Project-war
--Web Pages
---Templates
----Template.xhtml
---Admin
----adminPage1.xhtml
----adminPage2.xhtml
---Users
----usersPage1.xhtml
----usersPage2.xhtml
---Index.xhtml
---Login.xhtml

When i'm on the pages in the Admin and Users page when I click to dropdown a menu, nothing happens. Well, on the navbar add a "#" when I click.

I don't understand why the dropdown works on the pages at the root (the las example index.xhtml and login.xhtml works perfect) but not on the "folders pages" (pages on Admin and Users folder).

Thanks!

css includes on Template.xhtml

<h:outputStylesheet name="assets/css/bootstrap.css"/>
<h:outputStylesheet name="assets/css/bootstrap-responsive.min.css"/>
<h:outputStylesheet name="assets/css/font-awesome.min.css"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
<h:outputStylesheet name="assets/css/ace.min.css"/>
<h:outputStylesheet name="assets/css/ace-responsive.min.css"/>
<h:outputStylesheet name="assets/css/ace-skins.min.css"/>

js includes on Template.xhtml

    <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
    <script type="text/javascript" src="resources/assets/js/jquery-ui-1.10.3.custom.min.js"/>
    <script type="text/javascript" src="resources/assets/js/jquery.ui.touch-punch.min.js"/>
    <script type="text/javascript" src="resources/assets/js/jquery.slimscroll.min.js"/>
    <script type="text/javascript" src="resources/assets/js/jquery.easy-pie-chart.min.js"/>
    <script type="text/javascript" src="resources/assets/js/jquery.sparkline.min.js"/>
    <script type="text/javascript" src="resources/assets/js/flot/jquery.flot.min.js"/>
    <script type="text/javascript" src="resources/assets/js/flot/jquery.flot.pie.min.js"/>
    <script type="text/javascript" src="resources/assets/js/flot/jquery.flot.resize.min.js"/>
    <script type="text/javascript" src="resources/assets/js/bootstrap.min.js"/>

    <script type="text/javascript" src="resources/assets/js/ace-elements.min.js" />
    <script type="text/javascript" src="resources/assets/js/ace.min.js" />

show you code that includes the js and css files on your xhtml pages — Daniel, Mar 08 '14 at 11:24

score 2 · Answer 1 · edited May 23 '17 at 12:06

If you were inspection your console of the browser dev tools you could notice that your js file could not be found, because you haven't included them correctly. instead of the hard coded <script includes let JSF handle it that way it should with the <h:outputScript

In short, replace all your

<script type="text/javascript" src="resources...

with appropriate <h:outputScript tags

example
instead of

  <script type="text/javascript" src="resources/assets/js/bootstrap.min.js"/>

place

 <h:outputScript name="js/bootstrap.min.js"/>

and even before that you better read the following guide by BalusC

What is the JSF resource library for and how should it be used?

and also you can take a look at this one Resources (Library) In JSF 2.0

Thanks for your answer. At first I tried to use h:outpotStript instead but usin h:outputStript the file could not be found. Using instead of src="resources/assets/js/jquery-ui-1.10.3.custom.min.js"/>. — user3139966, Mar 08 '14 at 12:09

Dropdown with bootstrap (JSF project)

1 Answers1