The tab's link (<a> element) must declare a data-ajax attribute that will specify the target content panel and the ajax settings, such as:
<a href="ajax-tab.html" data-ajax="{target: 'view1'}"></a>
Below is a full example code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="template1/responsive-tabs.css" rel="stylesheet" type="text/css" />
<script src="javascript-tabs.js" type="text/javascript"></script>
<script type="text/javascript">
function mycallback(response, context, tab) {
... (omitted. Please refer to the source code of demo3 in the download package)
}
function callback2(data) {
return "<div style='float:right;text-align:center;'>" + data.Img +
"<br /><b>" + data.Title + "</b></div>" + data.Content;
}
</script>
</head>
<body>
<ul class="rtabs">
<li><a href="ajax-tab.html" data-ajax="{target: 'view1'}">
Directions</a></li>
<li><a href="/tabs/rtabs/content/products.xml"
data-ajax="{target:' view2', success: mycallback,
responseType: 'xml'}">Callback</a></li>
<li><a href="tabs/ajax-load.ashx?pid=2" data-ajax="
{target: 'view3', success: callback2, responseType: 'json',
cache: true}">Loading Image</a></li>
<div class="panel-container">
<div id="view1"></div>
<div id="view2"></div>
<div id="view3"></div>
</div>
</body>
</html>
The function will process the passed in response data and then return the final HTML code to be displayed on the page.
The function gets passed three arguments:
If this setting is omitted, tab content will display "Failed to get data." when the request fails to get a response.
It can be a value, or a set of key/value pairs inside curly bracket, i.e. {pid:2, category:'art'}.
Usually it's used in the success callback function to process or filter the raw response data.You can load a page fragment by specifying this CSS id selector
(Note: Only applicable when responseType is "html".)
set it true if the Ajax requesting should only happen at the first time selecting the tab;
set it false if you want every time selecting the tab will trigger the Ajax call to fetch content.
Its default value is true if not declared.