Jquery-ui.tabs ajax load specific page content?
I'm trying to use jQuery UI.tabs () to get content via AJAX, but the default behavior is to grab all the content of the page. How do I get content from a specific #id and / or multiple # ids?
I have a feeling that I will need to use an event load:
( http://docs.jquery.com/UI/Tabs#event-load ), but I need help with this from.
Example:
A page with tabs that receive and display tabbed content. I put #content after the first #the_tabs get link in an attempt to get that particular content area, but the whole page is still loaded.
<div id="tabs">
<div id="tabs_display">
</div>
<ul id="the_tabs">
<li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li>
<li><a href="testcontent.html" title="tabs display"><span>3</span></a></li>
<li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li>
</ul>
</div><!-- /#tabs -->
The page fetched by the previous markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Remote HTML Page Example</title>
</head>
<body>
<div id="content">
I want this content
</div>
<div id="other_stuff">
Not this content
</div>
</body>
</html>
JS (for customization purposes):
$(document).ready(function(){
/* Tabs
--------------------*/
$(function() {
var $tabs = $('#tabs').tabs({
});
});
});
In jQuery-UI 1.9, "ajaxOptions" is deprecated; so instead the code worked for me: (ref: http://jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event )
$(function() {
$( "#the_tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).filter("#content").html();
};
}
});
});
$ (document) .ready (function () {
/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
ajaxOptions: {
dataFilter: function(data, type){
return $(data).filter("#content").html();
}
}
});
});
Support for Supavisah props in #jquery at irc.freenode.net
I was lucky enough to use .find and not .filter. Like this:
$(document).ready(function(){
$('#the_tabs').tabs({
ajaxOptions: {
cache : true,
dataFilter: function(data){
return $(data).find('#content');
},
}
});
});