For a website i'm currently working on, I need some Ajax functionality. But since I don't have much experience with this, I'm finding it difficult to get it to work with MODX.
Is there a way to replace the tabs with working links to pages generated by MODX?
Here's a demo of what I'm trying to achieve:
http://www.asual.com/jquery/address/samples/tabs/#Overview
<!DOCTYPE html>
<html>
<head>
<title>jQuery Address Tabs</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet">
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery.address-1.5.min.js"></script>
<script type="text/javascript">
var tabs,
tabEvent = false,
initialTab = 'Overview',
navSelector = '#tabs .ui-tabs-nav',
navFilter = function(el) {
return $(el).attr('href').replace(/^#/, '');
},
panelSelector = '#tabs .ui-tabs-panel',
panelFilter = function() {
$(panelSelector + ' a').filter(function() {
return $(navSelector + ' a[title=' + $(this).attr('title') + ']').size() != 0;
}).each(function(event) {
$(this).attr('href', '#' + $(this).attr('title').replace(/ /g, '_'));
});
};
// Initializes plugin features
$.address.strict(false).wrap(true);
if ($.address.value() == '') {
$.address.history(false).value(initialTab).history(true);
}
// Address handler
$.address.init(function(event) {
// Adds the ID in a lazy manner to prevent scrolling
$(panelSelector).attr('id', initialTab);
// Enables the plugin for all the content links
$(panelSelector + ' a').address(function() {
return navFilter(this);
});
panelFilter();
// Tabs setup
tabs = $('#tabs')
.tabs({
load: function(event, ui) {
// Filters the content and applies the plugin if needed
$(ui.panel).html($(panelSelector, ui.panel).html());
panelFilter();
},
fx: {
opacity: 'toggle',
duration: 'fast'
}
})
.css('display', 'block');
// Enables the plugin for all the tabs
$(navSelector + ' a').click(function(event) {
tabEvent = true;
$.address.value(navFilter(event.target));
tabEvent = false;
return false;
});
}).change(function(event) {
var current = $('a[href=#' + event.value + ']:first');
// Sets the page title
$.address.title($.address.title().split(' | ')[0] + ' | ' + current.text());
// Selects the proper tab
if (!tabEvent) {
tabs.tabs('select', current.attr('href'));
}
});
// Hides the tabs during initialization
document.write('<style type="text/css"> #tabs { display: none; } </style>');
</script>
<link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/index.css" type="text/css" />
<link rel="stylesheet" href="http://modx.com/assets/components/discuss/themes/modx/css/jquery-ui-1.8.16.custom.css" type="text/css" />
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/discuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shCore.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shAutoloader.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/sh/shDiscuss.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.sticky.js"></script>
<script type="text/javascript">// <![CDATA[
DIS.url = "/";DIS.shJsUrl = "http://modx.com/assets/components/discuss/themes/modx/js/sh/";DIS.config.connector = "http://modx.com/assets/components/discuss/connector.php"
// ]]></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.modify.js"></script>
<script type="text/javascript" src="http://modx.com/assets/components/discuss/themes/modx/js/dis.post.buttons.js"></script>
</head>
<body>
<div class="page">
<h1>jQuery Address Tabs</h1>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-corner-top ui-tabs-selected ui-state-active"><a href="#Overview" title="Overview">Overview</a></li>
<li class="ui-corner-top ui-state-default"><a href="./features.html" title="Features">Features</a></li>
<li class="ui-corner-top ui-state-default"><a href="./extras.html" title="Extras">Extras</a></li>
<li style="display:none;" class="ui-corner-top ui-state-default"><a href="./test.html" title="test">test</a>
</li>
</ul>
</ul>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<p>
This demo utilizes the jQuery UI tabs widget.
The content is loaded using Ajax and each tab has it's own unique link.
</p>
<p>
Next: <a href="./features.html" title="Features">Features »</a>
</p>
<p>
Next: <a href="./extras.html" title="Extras">Extras</a>
</p>
<p>
next: <a href="./test.html" title="test">Test</a>
</p>
</div>
</div>
</div>
<script type="text/javascript">
var DISModifyPost = $(function() {
DIS.config.attachments_max_per_post = 5;
DIS.DISModifyPost.init({
attachments: 1
});
});</script>
</body>
</html>
☆ A M B ☆