jQuery provides a simple load() function to load an HTML fragment using AJAX. To test it, create a test data file called data.html:
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Next, create a target HTML file called testLoad.html in the same folder with the following jQuery statement:
<html>
<head>
<title>jQuery load HTML test</title>
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myLinks').load('data.html ul li');
});
</script>
</head>
<body>
<ul id="myLinks"></ul>
</body>
</html>
When you view testLoad.html, you should see the list items in data.html inserted into the target file, in the unordered list named myLinks.
It was a little fiddly to get this working the first time. If your source HTML file has an error, nothing seems to happen; in that case, check your browser's error console to see what went wrong. For instance, in Firefox, when my source HTML file wasn't well-formed, I found this error:
Error: mismatched tag. Expected: </ul>. Source File: Line: 8, Column: 5 Source Code: </body>
Another thing I found is that you can't include an XML processing instruction (<? ... ?> lines) in your data file because when load() tries to insert your XML file into your target document, you would get an error like this:
Error: XML or text declaration not at start of entity Source File: Line: 1, Column: 43 Source Code: <div xmlns="http://www.w3.org/1999/xhtml"><?xml version="1.0" encoding="UTF-8"?>
veru useful thanks! k
ReplyDeleteA short simple easy to understand example.
ReplyDelete