1

Well, i'm trying to using bootstrap with JSF Project. I'm using this bootstrap layout : http://startbootstrap.com/template-overviews/sb-admin-2/.

So, i'm trying to import the metisMenu but without success, see:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Projeto A</title>

    <h:outputStylesheet library="js" name="bootstrap-3.3.2-dist/css/bootstrap.min.css" />   
    <h:outputStylesheet library="js" name="metisMenu/metisMenu.min.css" />
    <h:outputStylesheet library="css" name="sb-admin-2.css" />

    <h:outputScript library="js" name="jquery-2.1.3.min.js" />  
    <h:outputScript library="js" name="bootstrap-3.3.2-dist/js/bootstrap.min.js" /> 
    <h:outputScript library="js" name="metisMenu/metisMenu.min.js" />
    <h:outputScript library="js" name="sb-admin-2.js" />

</h:head>

<body>


</body>

</html>

INside body i have a peace of side-menu

<div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search..." />
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->

But i got following error on Browser Console:

Uncaught TypeError: undefined is not a function in $('#side-menu').metisMenu()

See my JS:

$(function() {

    $('#side-menu').metisMenu();

});

//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {
    $(window).bind("load resize", function() {
        topOffset = 50;
        width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    var url = window.location;
    var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }
});
j08691
  • 204,283
  • 31
  • 260
  • 272
Shelly
  • 1,035
  • 5
  • 27
  • 51

1 Answers1

-1

There are several things that could be causing this and answering this is essentially like taking a short in the dark.

Check following:

1) when you inspect the page in browser what is the jsf id for #side-menu does it have a id like formId:panelId:side-menu - if so your init code should refer the component with escaped id such as formId\:panelId\:side-menu otherwise it wouldn't see the component. Remember despite giving an id, if a component has a jsf element (which is possible in 2.2), it would be allocated a jsf component id.

2) where do you initialise the $('#side-menu').metisMenu(); - is it in document.ready? If not at the time this code is executed the component wouldn't have rendered and hence not available for initialise.

I personally would move all script files to the bottom of the page as it would affect page load speed and scripts are useless until all the components are loaded in the document.

If none of the above worked add the code for the whole page or at least the segments where we can see what might cause this issue.

yohanfernando
  • 61
  • 5
  • 1 - I'm using HTML and not JSF component, so i don't need put "formId\:panelId". 2 - It's inside document.ready I'll post all my page. – Shelly Jan 26 '15 at 00:26
  • I added more code with side-menu UL. – Shelly Jan 26 '15 at 00:32
  • I creates a project similar to yours and it all work - so this code is OK. The only difference was you use `primefaces` but I didnt. I also saw that you included jQuery library, however when you use primefaces it injects its bundled jQuery library which then conflicts with the one you added see: [link](http://stackoverflow.com/questions/11112058/how-to-use-jquery-with-primefaces) and [link](http://stackoverflow.com/questions/25508564/how-to-solve-a-conflict-with-primefaces-jquery). Remove your jQuery library and run the program using the one primefaces add. – yohanfernando Jan 26 '15 at 09:23
  • You also may need to use `jQuery(..)` instead of the `$` notation as if I remember from my primefaces time it doesnt support the `$`, or do something like [link](http://stackoverflow.com/questions/5457292/jquery-conflicts-with-primefaces). Hope it will work, keep posted. – yohanfernando Jan 26 '15 at 09:24
  • did removing the jQuery library you added resolve the problem? – yohanfernando Jan 27 '15 at 11:42
  • hello @yohanfernando. I have the same problem. I don't know what `primefaces` are I just heard the term today. in her code she used `` but what I used is `` please help. – kaynewilder Feb 25 '15 at 04:59