jQuery UI Menubar not working

Question

I got the code from here and the related files from here. I just changed the paths and kept only one menubar, its not working for me. Here is what I can see: enter image description here

Here is my code:

In the HTML Head:

<link rel="stylesheet" href="Rules/navbar/jquery.ui.all.css" />
<script src="jquery-1.7.1.js"></script>
<script src="Rules/navbar/jquery.ui.core.js"></script>
<script src="Rules/navbar/jquery.ui.widget.js"></script>
<script src="Rules/navbar/jquery.ui.position.js"></script>
<script src="Rules/navbar/jquery.ui.button.js"></script>
<script src="Rules/navbar/jquery.ui.menu.js"></script>
<script src="Rules/navbar/jquery.ui.menubar.js"></script>
<script>
$(function() {
    function select(event, ui) {
        $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
        if (ui.item.text() == 'Quit') {
            $(this).menubar('destroy');
        }
    }
    $("#bar1").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });

    $(".menubar-icons").menubar({
        autoExpand: true,
        menuIcon: true,
        buttons: true,
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });

    $("#bar3").menubar({
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select,
        items: ".menubarItem",
        menuElement: ".menuElement"
    });
});
</script>
<style>
    #bar1, #bar2 { margin: 0 0 4em; }
</style>

In the HTML body:

<div class="demo">

<ul id="bar2" class="menubar-icons">
    <li>
        <a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a></li>
            <li class="ui-state-disabled">Open recent...</li>
            <li><a href="#Save">Save</a></li>
            <li><a href="#Save as...">Save as...</a></li>
            <li><a href="#Close">Close</a></li>
            <li><a href="#Quit">Quit</a></li>
        </ul>
    </li>
    <li>
        <a href="#Edit">Edit</a>
        <ul>
            <li><a href="#Copy">Copy</a></li>
            <li><a href="#Cut">Cut</a></li>
            <li class="ui-state-disabled">Paste</li>
        </ul>
    </li>
    <li>
        <a href="#View">View</a>
        <ul>
            <li><a href="#Fullscreen">Fullscreen</a></li>
            <li><a href="#Fit into view">Fit into view</a></li>
            <li>
                <a href="#Encoding">Encoding</a>
                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a></li>
                    <li><a href="#UTF-8">UTF-8</a></li>
                    <li>
                      <a href="#UTF-16">UTF-16</a>
                      <ul>
                         <li><a href="#Option 1">Option 1</a></li>
                         <li><a href="#Option 2">Option 2</a></li>
                         <li><a href="#Option 3">Option 3</a></li>
                         <li><a href="#Option 4">Option 4</a></li>
                      </ul>
                   </li>
                </ul>
            </li>
            <li><a href="#Customize...">Customize...</a></li>
        </ul>
    </li>
</ul>

</div>

[Stack Overflow is not a Code Writing, Tutorial or Consulting Service](http://meta.stackexchange.com/a/128553/159514). Try creating a [jsFiddle](http://jsFiddle.net) that demonstrates your problem. Try putting in console.log statements that debug your code. You haven't listed anything that you've actually tried. — Code Maverick, Apr 18 '12 at 17:16
try viewing the source code in the browser (press CTRL + U or right click and click view source menu), you will see the entire html including CSS Files. Try opening any css file by clicking on it. You would get `page not found` error. If yes, then make sure you have the necessary css files and images exist on the path mentioned in the html file. — codef0rmer, Apr 18 '12 at 17:19
@Scott: My apologies. I shall remember this next time I post a question here. — Rahul Desai, Apr 18 '12 at 17:31
@codef0rmer: I tried as you suggested, it could locate the CSS file and display the code in it. — Rahul Desai, Apr 18 '12 at 17:35
@j08691: I am a little new at this, could you please tell me where do I find the console.log? — Rahul Desai, Apr 18 '12 at 17:36
@rdesai - Refer to http://stackoverflow.com/a/4539270/682480 for questions on console.log. — Code Maverick, Apr 18 '12 at 17:37
@Scott Error Console: $("#bar1").menubar is not a function [Break On This Error] select: select — Rahul Desai, Apr 18 '12 at 20:14

score 6 · Accepted Answer · edited Apr 29 '15 at 12:04

6

Got your code working here: http://jsfiddle.net/cavmj/

Used your supplied javascript and HTML. So I would guess it's some of the files that aren't being loaded correctly.

Make sure it loads:

<script src="Rules/navbar/jquery.ui.menu.js"></script>
<script src="Rules/navbar/jquery.ui.menubar.js"></script>

And that the CSS file can import:

jquery.ui.menu.css
jquery.ui.menubar.css

Maybe try linking direct:

<link rel="stylesheet" href=http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menu.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css">

If this is not the problem try checking for console errors.

If you have firefox with firebug, Chrome or IE9 (or above): Press F12 and choose Console

There it will say if it encountered any JavaScript errors on load.

Checked your link. You are missing the jquery ui, menu, and menubar scripts. Try adding the following:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js" type="text/javascript"></script>

And you are missing a quote on the jquery ui CSS file it should be

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">

edited Apr 29 '15 at 12:04

Kiss Koppány

919
5
15
33

answered Apr 18 '12 at 18:59

Marco Johannesen

13,084
6
31
36

Sorry Marco, its not working for me. Please find my PHP file in te URL below. Error from console: $("#bar1").menubar is not a function http://research.poly.edu/~yjeanpie/tracker/rahultest.php Line 21 – Rahul Desai Apr 18 '12 at 19:54
You have edited out all the jQuery UI javascript? Updated the post :) – Marco Johannesen Apr 18 '12 at 20:24
I updated like you said. Its not working though. Now following are two errors in the console: 1. jQuery is not defined jquery-ui.min.js() 2. $("#bar1").menubar is not a function (?)() Please check the webpage again. Am I doing it right? – Rahul Desai Apr 18 '12 at 20:42
I copy-pasted the same code, but doesnt work for some reason. I feel so sorry. Please refer this link: http://research.poly.edu/~yjeanpie/tracker/rahultest.php – Rahul Desai Apr 24 '12 at 14:38
1

You are missing jQuery... In the original post you had `` :) – Marco Johannesen Apr 24 '12 at 18:24
I tried that, unfortunately, it did not work. Please refer to the updated code: http://research.poly.edu/~yjeanpie/tracker/rahultest.php If you view the page source, you will see that I have included jQuery using this line of code: – Rahul Desai Apr 25 '12 at 16:27
1

You are loading jQuery after the rest. Since they dependt on jQuery it needs to be loaded first, so move it up :) – Marco Johannesen Apr 25 '12 at 19:30
Got it running finally! Thank you so much!! – Rahul Desai May 01 '12 at 20:01
Lastly, how do I get the menus in the center instead of having them at the left side? – Rahul Desai May 15 '12 at 17:30
Does it need to adjust the width automatic? `#demo {margin:0 auto; width:960px;}` for constant width else do a `#demo {text-align:center} .ui-menubar {display:inline-block;}` :) – Marco Johannesen May 16 '12 at 06:55
When you copy and paste from jsfiddle's JavaScript window there's usually an illegal character at the end. just an fyi. this is the second time I've hit this problem. – mtntrailrunner Aug 09 '12 at 17:48

score 1 · Answer 2 · answered Apr 22 '12 at 23:42

All is working from jsfiddle.net because all the css and js are refering to the original site and the internal links also do the same.

If you want to make it work localy try to replace all the js and css references one by one to your local files, then you will see what css or js or images files are missing.

I had the same problem and after this steps, now all is fine, working without external references.

jQuery UI Menubar not working

2 Answers2