CODEWITHSUNDEEP
jqueryjquery-uitabsjquery-ui-tabs
smythluke
smythluke

Reputation: 201

jquery ui tabs aren't working as intended

ive created the following code. it shows the tabs i want but the content on the page doesnt change when i click a tab. the content for all the tabs is shown on the same page. when i click a tab the link goes in the address bar in the browser. any ideas how to stop this link happening and to get the content separated into tabs? Sonachan - Bar

    <link href="/scripts/jui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
    <link href="/styles/layout.css" rel="stylesheet" type="text/css" />

    <script src="/scripts/jquery.js"></script>
    <script src="/scripts/jui/jquery-ui.js"></script>
    <script src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/scripts/main.js"></script>
</head>
<body>
    <div id="container">
        <div id="admin-tabs" class="col">
            <ul>
                <li>
                    <a href="#admin-tabs-1"><span>Add an Item</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-2"><span>Change an Item</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-3"><span>Add a Category</span></a>
                </li>
                <li>
                    <a href="#admin-tabs-4"><span>Change a Category</span></a>
                </li>
            </ul>
        </div>
        <div id="admin-page">
            <?php //add an item ?>
            <div id="admin-tabs-1">

                <div class="admin-heading">Add an item</div>
                <form id="additemform">
                    <table>
                        <tr>
                            <td>
                                Select a category:
                            </td>
                            <td></td>
                            <td>
                                <select>
                                    <?php foreach (Category::model()->findAll() as $category): ?>
                                        <option id="cat-<?php echo $category->id; ?>"><?php echo $category->name; ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product name:
                            </td>
                            <td></td>
                            <td>
                                <input></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product price:
                            </td>
                            <td id="poundsign">£</td>
                            <td colspan="2">
                                <input id="price-pounds"></input>
                                .
                                <input id="price-pence" maxlength="2"></input>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="submit" value="Create!"></input></td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="admin-tabs-2">
                content of tab 2
            </div>
            <div id="admin-tabs-3">
                content of tab 3
            </div>
            <div id="admin-tabs-4">
                content of tab 4
            </div>
        </div>
</body>

and this is my jquery :

$(function() {
$("#admin-tabs" ).tabs();
});

Upvotes: 2

Views: 1054

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30676

The plugin jQuery UI Tabs expects the panels (tab content) to be within the container you apply the .tabs() on, which is not the case with your markup.

To find your panels (#admin-tabs-1, #admin-tabs-2, ...), the plugin will search into the container #admin-tabs and from your markup it does not find any of them as they are outside the container.

You have:

<div#admin-tabs>
    <ul>
        <li #admin-tabs-1>
        <li #admin-tabs-2>
        <li #admin-tabs-3>
    </ul>
</div>
<div>
    <div#admin-tabs-1>
    <div#admin-tabs-2>
    <div#admin-tabs-3>
</div>

The plugin expects:

<div#admin-tabs>
    <ul>
        <li #admin-tabs-1>
        <li #admin-tabs-2>
        <li #admin-tabs-3>
    </ul>
    <div#admin-tabs-1>
    <div#admin-tabs-2>
    <div#admin-tabs-3>
</div>

Move your panels next to the <ul>.

Also make sure you linked the CSS stylesheets that comes along with the jQuery UI library.

Your markup: DEMO

Expected markup: DEMO

Upvotes: 2

Related Questions