Loading Remote Content via AJAX (^) ❘ 425
Loading Remote Content via AJAX
Loading remote content instead of local content is easy to do. The following document shows an
example, which is Example 8-3 in the source code download materials, of how to set up a tab that
loads remote content using AJAX, instead of having that content already loaded in your document.<!DOCTYPE HTML>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='content-type'
content='application/xhtml+xml; charset=utf-8' />
<meta http-equiv='content-language' content='en-us' />
<title>Tabs Plugin</title>
<script src='../jQuery.js'></script>
<script src='../jQueryUI.js'></script>
<script src='Example 18-3.js'></script>
<link href='Example 18-3.css' rel='stylesheet' />
</head>
<body>
<div id='exampleTabs'>
<ul>
<li>
<a href='#exampleTabFirst'>
<span>First Tab</span>
</a>
</li>
<li>
<a href='#exampleTabSecond'>
<span>Second Tab</span>
</a>
</li>
<li>
<a href='#exampleTabThird'>
<span>Third Tab</span>
</a>
</li>
<li>
<a href='Fourth Tab.html'>
<span>Fourth Tab</span>
</a>
</li>
</ul>
<div id='exampleTabFirst'>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse id sapien. Suspendisse rutrum libero sit amet dui.
Praesent pede elit, tincidunt pellentesque, condimentum nec,
mollis et, lacus. Donec nulla ligula, tempor vel, eleifend ut.
</p>
</div>
<div id='exampleTabSecond'>
<p>