Ajax tabs setup not working on localhost (EasyTabs)

Question

I'm using EasyTabs for my tabs. I use ajax-tabs so I can fetch content from other pages (when I click on the appropriate buttons of the navigation menu). But it does not work. The content gets not loaded.

According to the developer's blog I just had to change the order of my divs and add the data-target attribute. But it doesn't work and I don't know where the problem might be. The strange thing is when I don't use Ajax it works (but I need Ajax so I can load the content when I click on a navigation button).

I use Easytabs on localhost:8888 with MAMP. For testing purposes I am using Safari 5.1.7.

Here I initialize Easytabs.

<script type="text/javascript"> 
  $(document).ready(function(){ $('#tab_container').easytabs(); });
</script>

This is the setup for my buttons and divs.

<div id="tab_container" class="module_bg">
            <ul id="shadetabs">
                <li><a href="'<?php echo $setting['site_url'];?>/includes/homepage/new_games.inc.php'" data-target="#t1"><?php echo NEWEST_MODULE;?></a></li>
                <li><a href="'<?php echo $setting['site_url'];?>/includes/homepage/popular_games.inc.php'" data-target="#t2"><?php echo POPULAR_MODULE;?></a></li>
            </ul>

        <div class="panel_container">
                <div id="t1">
                </div>

                <div id="t2">
                </div>
         </div>
    </div>

`EasyTabs` seems very buggy. Why not use [`jQuery UI's Tabs`](http://jqueryui.com/tabs/#ajax), which even provides a handy ajax tutorial? — Dom, Apr 19 '13 at 19:31
Ok. How big is the file for the jquery ui? The last time I downloaded it from theirs servers it was about 500 kb large. Is there a small version of jQuery's tabs available? — drpelz, Apr 19 '13 at 19:36
Make sure to provide [`jQuery` script](https://developers.google.com/speed/libraries/devguide#jquery), then provide [`jQueryUI` script](https://developers.google.com/speed/libraries/devguide#jquery-ui). `jQueryUI` has tabs included. If you need a css file, then [check this](http://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere) or you can always [create your own](http://jqueryui.com/themeroller/). — Dom, Apr 19 '13 at 19:40
Sure thing! also refer to this: http://www.htmlgoodies.com/beyond/javascript/an-introduction-to-the-jquery-ui-library-getting-started.html . HOWEVER, THE SCRIPTS BEING USED ARE OUTDATED SO MAKE SURE TO USE THE MOST CURRENT VERSIONS OF JQUERY AND JQUERYUI! But this just shows you how to implement it if you are unfamiliar. I will also write out a more detailed answer. — Dom, Apr 19 '13 at 19:42
Local AJAX requests can fail on WebKit browsers. Firefox allows local AJAX requests by default, did you try loading it on Firefox? — Wallace Sidhrée, Apr 19 '13 at 20:47
Yes. I tried it and it failed. I even checked it with Opera and it didn't work there, either. — drpelz, Apr 21 '13 at 13:24
What happens? Any requests, request errors, JavaScript errors? — a better oliver, Apr 21 '13 at 17:10
There seem to be no real bugs as far as I know. It works flawlessly.:) — drpelz, Jun 18 '13 at 15:45

score 1 · Accepted Answer · edited May 23 '17 at 12:05

My initial thought about EasyTabs was that it was rather buggy, so I suggest using jQueryUI's Tabs (API).

If you are unfamiliar with jQueryUI, you can include it in your project by adding it to your <head>.

EXAMPLE:

<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>

Just make sure to add the jQuery script BEFORE the jQueryUI script (or else you will get an error).

NOTE: The version I used in my example may be out of date, so make sure you are including the most up-to-date version of both jQuery and jQueryUI.

This is how you implement jQueryUI's Tabs.

JAVASCRIPT:

$(function(){
    $('#tab_container').tabs();
});

That's all there is! (easy right?)

HTML:

If you want to load content from other pages, all you need to do is add the link to the <a>'s href and jQueryUI Tabs takes care of the rest.

<div id="tab_container" class="module_bg">
    <ul id="shadetabs">
        <li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li>
        <li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/">Link 2</a></li>
    </ul>
</div>

DEMO: http://jsfiddle.net/dirtyd77/kC2Wn/5/

If, however, the content is located on the same page, then:

Create a <div> within <div id="tab_container" class="module_bg">
Give the created <div> an ID ("tab1").
Put the ID in the <a>'s href.

Here is the HTML:

<div id="tab_container" class="module_bg">
    <ul id="shadetabs">
        <li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li>
        <li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/">Link 2</a></li>
        <li><a href="#tab1">Link 3</a></li>
    </ul>

    <div id="tab1">
        I AM A TAB!
    </div>
</div>

DEMO: http://jsfiddle.net/dirtyd77/kC2Wn/6/

jQueryUI's Tabs is very flexible so it should suit your needs! I hope this helps and let me know if you have any questions!

HELPFUL LINKS:

http://jquery.com (jQuery Site)
http://jqueryui.com (jQueryUI Site)
Is there a link to the "latest" jQuery library on Google APIs? (Latest link to jQuery library)
https://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere (jQuery css themes)
http://jqueryui.com/themeroller/ (Themeroller - create your own themes)

Just found out that it was my own fault! I tried to load a php-file that did not contain enough information (i.e. includes, require, etc.)! Changed it to the right file and now it works!:) — drpelz, Apr 23 '13 at 18:54

score 1 · Answer 2 · answered Apr 22 '13 at 16:36

While I would probably use Jquery-UI Tabs for this, Here's how to use the Ajax Easy Tabs Plugin.

jsFiddle

Be sure to include the necessary external resources.

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>

And

Change this -

$(document).ready(function(){ $('#tab_container').easytabs(); });

To this -

$(document).ready(function(){
  $('#ajax-tab-container').easytabs();
});

and change your HTML to something like this-

    <div id="ajax-tab-container" class='tab-container'>
    <ul class='tabs'>
        <li class='tab'><a href="<!-- url of page 1 -->" data-target="#tabs-ajax-1">Page 1</a>

        </li>
        <li class='tab'><a href="<!-- url of page 2 -->" data-target="#tabs-ajax-2">Page 2</a>

        </li>
    </ul>
    <div class='panel-container'>
        <div id="tabs-ajax-1"></div>
        <div id="tabs-ajax-2"></div>
    </div>
</div>

I remember that I already did it that way and it didn't work. That's the reason why I posted this question here! — drpelz, Apr 23 '13 at 17:15
My fault!!! I discovered that I tried to load content from a php-file that did not contain enough information (includes, require_once, etc.). Changed all necessary stuff and now it works! I'm such an idiot! — drpelz, Apr 23 '13 at 18:50

score 1 · Answer 3 · answered Jun 07 '13 at 09:46

While the original poster already solved his issue, I came here having the same symptoms but for a different reason.

The issue of AJAX not working with EasyTabs can also be seen when using Chrome to view a page via the local file system. Chrome, by design, does not allow the loading of local files using the AJAX methods. If you encounter this issue, check to see if Firefox and IE produce the same problem, and if not, then you will probably want to use a small webserver to serve up the files to your browser via 127.0.0.1 as a workaround.

As far as considering jQueryUI tabs, there are many limitations for this widget which EasyTabs provides clean and simple solutions for (such as separating the navigation area from the content area, or using elements besides UL and LI) so you may not be better off by switching. Furthermore, I've not witnessed any of the bugginess with EasyTabs that is reported in other answers here, but the documentation is weak, admittedly.

Thank you very much for that great info.:) I already solved the problem and it works like a charm with EasyTabs. The problem was that I forgot to grant access to the appropriate files via .htaccess. After allowing access from 127.0.0.1 everything worked perfectly! I'm such a dumbass... — drpelz, Jun 16 '13 at 14:55

Ajax tabs setup not working on localhost (EasyTabs)

3 Answers3

Linked