Ajax Tabs Setup Not Working On Localhost (easytabs)

December 26, 2023 Post a Comment

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

Solution 1:

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><linkhref="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /><scriptsrc="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script><scriptsrc="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script></head>

Just make sure to add the jQuery scriptBEFORE 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.

<divid="tab_container"class="module_bg"><ulid="shadetabs"><li><ahref="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li><li><ahref="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:

<divid="tab_container"class="module_bg"><ulid="shadetabs"><li><ahref="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li><li><ahref="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/">Link 2</a></li><li><ahref="#tab1">Link 3</a></li></ul><divid="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)

Solution 2:

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.

<scriptsrc="/javascripts/jquery.js"type="text/javascript"></script><scriptsrc="/javascripts/jquery.hashchange.js"type="text/javascript"></script><scriptsrc="/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-

<divid="ajax-tab-container"class='tab-container'><ulclass='tabs'><liclass='tab'><ahref="<!-- url of page 1 -->"data-target="#tabs-ajax-1">Page 1</a></li><liclass='tab'><ahref="<!-- url of page 2 -->"data-target="#tabs-ajax-2">Page 2</a></li></ul><divclass='panel-container'><divid="tabs-ajax-1"></div><divid="tabs-ajax-2"></div></div></div>

Solution 3:

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.

JavaScript College

Ajax Tabs Setup Not Working On Localhost (easytabs)

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Ajax Tabs Setup Not Working On Localhost (easytabs)"