Why can't create tab in joomla by jquery?

Question

This code create tab by jquery:

 <link rel="stylesheet" href="../../../../../js/themes/base/jquery.ui.all.css">
        <script src="../../../../../js/jquery-1.9.1.js"></script>
        <script src="../../../../../js/ui/jquery.ui.core.js"></script>
        <script src="../../../../../js/ui/jquery.ui.widget.js"></script>
        <script src="../../../../../js/ui/jquery.ui.tabs.js"></script>
        <link rel="stylesheet" href="../../../../../css/demos.css">
        <script>
            $(function() {
                $("#tabs").tabs();
            });
        </script>
        
    <?php
    // No direct access to this file
   // defined('_JEXEC') or die('Restricted access');
    ?>
    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            tab 1
        </div>
        <div id="tabs-2">
            tab 2
        </div>
        <div id="tabs-3">
            tab 3
        </div>
    </div>

If i put that code in a nomal page. It display tab ok: enter image description here

But if i put that code in a page of Joomla . It can't display tab: enter image description here

Why can't create tab in joomla by jquery? or How create tab in a page of Joomla? Thanks all.

It looks like it's missing the stylesheet or some of the styles you are using are being overridden. — Mike, Jan 15 '14 at 04:17
Check whether the paths are correct or not as this is really crazy `../../../../../` — Mr. Alien, Jan 15 '14 at 04:17
Try opening up Firebug or the Chrome developer tools and click the "Network" tab and refresh the page. It will tell you whether anything referenced failed to load. — Mike, Jan 15 '14 at 04:18
also check you are not loading multiple copies of jQuery and that your plugins are using jQuery in noConflict mode. JQuery and MooTools both use the $ and it can cause serious problems in a joomla site. — pathfinder, Jan 15 '14 at 04:20
Have you checked the console for any errors? It might be possible that you're not loading the libraries correctly. Also ensure you're not loading jQuery twice as this can cause conflicts. Have a look at this: http://stackoverflow.com/questions/12471067/importing-jquery-into-joomla/12473933#12473933 — Lodder, Jan 15 '14 at 11:51

Rohan Kumar · Accepted Answer · 2014-01-15T04:34:29.997

1

You should use $this->baseurl for js and css paths and use jQuery instead of $ for no confliction like,

<script src="<?php echo $this->baseurl;?>js/jquery-1.9.1.js"></script>
<!-- other scripts -->
<script>
   jQuery(function() {
      jQuery("#tabs").tabs();
   });
</script>

edited Jan 15 '14 at 04:34

answered Jan 15 '14 at 04:29

Rohan Kumar

40,431
11
76
106

Check your `page source`, are you getting the `correct urls` of `js and css', Use can use `CDN` for adding `jquery and jqery-ui` – Rohan Kumar Jan 15 '14 at 04:42
check path . it is ok. – mum Jan 15 '14 at 04:43
if i use http://www.jeasyui.com/easyui/jquery.easyui.min.js ,it can create tab. But jquery-ui-1.10.3 it still can't – mum Jan 15 '14 at 04:45
If you are using `Jquery 1.9` then use `Jquery-ui-1.9` instead of `jquery-ui-1.10` – Rohan Kumar Jan 15 '14 at 04:47
i using jqery 1.9. it put in package i download jquery-ui-1.10.3\jquery-1.9.1.js – mum Jan 15 '14 at 04:50
i had try the same you: tab display https://www.dropbox.com/s/0hi7dejt9fsgrer/taberror.png – mum Jan 15 '14 at 12:17

score 1 · Answer 2 · answered Apr 04 '15 at 20:35

I've solved my conflict between jQuery UI tabs() and Joomla SEF adding this code to my script:

//Get app object
$app = JFactory::getApplication();
// Dispatch the application.
$app->dispatch();
// added these to lines
$document = JFactory::getDocument();
$document->setBase("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);

Why can't create tab in joomla by jquery?

2 Answers2