TABS - AJAX

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="google.com">Tab 1</a></li>
        <li><a href="google.com" data-country="1" data-city="35">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo.</p>
</div>

JavaScript

var postData = {};

$("#tabs").tabs({
    select: function(event, ui) {
        postData = {
            country: $(ui.tab).data('country'),
            city: $(ui.tab).data('city');
        };
    },
    ajaxOptions: {
        type: 'POST',
        data: postData,
        error: function(xhr, status, index, anchor) {
            $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
        }
    }
});