Ajax Settings

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>

target:

The id of the target content panel that will show the Ajax content.

responseType:

The type of data that you're expecting back from the Ajax call. The available types are:

success:

Specify the name of the function to be called if the request succeeds.

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:

  1. the data returned from the server, formatted according to the responseType parameter;
  2. the context object;
  3. and the tab element.
If success setting is omitted or set to null, the response will be directly used as the tab content.

fail:

Specify the name of the function to be called if the request fails. The function has one argument: the context object.

If this setting is omitted, tab content will display "Failed to get data." when the request fails to get a response.

context:

The context data passed through the request call and made available to the callback functions.

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.

id:

You can load a page fragment by specifying this CSS id selector

(Note: Only applicable when responseType is "html".)

cache:

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.