CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Roman Rdgz
Roman Rdgz

Reputation: 13254

JQuery-ui components not showing on loading

I'm writing a HTML page with two JQuery-ui components: tabs and accordion. If I try the code at JSFiddle, both components show up correctly. But if I try locally, they don't appear.

I'm using Chrome, and if I check the source code I am able to open the css and js associated files from the source code, so the paths must be right.

I guess the problem is the initialization script. First of all I tried to improt another js file with the code:

        $(function() {
            $('#accordion').accordion();
            $('#results').tabs();
        }

But that didn't work. So I tried to write it into the HTML file like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <link type="text/css" href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#accordion').accordion();
                $('#results').tabs();
            }
        </script>
    </head>

    <body>
        <div id="accordion">
            <h3>1st menu</h3>
            <div id="1stmenu-controls" class="accordion-content">
                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
            </div>
            <h3>2nd menu</h3>
            <div id="2stmenu-controls" class="accordion-content">

            </div>
            <h3>3rd menu</h3>
            <div id="3stmenu-controls" class="accordion-content">

            </div>
        </div>

        <div id="results">
            <ul>
                <li><a href="#tabs-1">Graphic results</a></li>
                <li><a href="#tabs-2">Text results</a></li>
                <li><a href="#tabs-3">Other</a></li>
            </ul>

            <div id="tabs-1">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                <img src="images/barh_demo.png" alt="Graphic results" height="300" width="400"/>
            </div>
            <div id="tabs-2">
                Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
            </div>
            <div id="tabs-3">
                Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
            </div>
        </div>
    </body>
</html>

Didn't work either. I guess I'm making some stupid error when loading the jquery-ui components at the document.ready event, missing something. Any help?

Upvotes: 0

Views: 146

Answers (2)

pszaba
pszaba

Reputation: 1064

Firebug console shoud throw error (if there is an error), please check and double check the jq files path

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

Your code is not having closing braces. It should look like : 

$(function() {
    $('#accordion').accordion();
    $('#results').tabs();
});

Just observed this while tracing through. :)

Upvotes: 2

Related Questions