Load content from XML file using ThickBox
Im trying to load content into a DIV from an XML file when the user clicks on certain links.I was able to load the right content to the DIV from the xml by matching the arguments passed through a function that was invoked by the onClick.Now Im trying to show the content from the DIV using ThickBox,which I have been unsuccessful.I think the thick box is popping up before the content gets loaded in to the div myContent,hence Im being displayed with a blank box.I know im doing it wrong,any suggestions/workarounds please.
XML
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<title>
Designing with Web standards
</title>
<description>
Discusses how to use Web standards to create sophisticated Web sites efficiently,
covering topics such as quality assurance, functionality, and accessibility guidelines.
</description>
</book>
<book>
<title>
Professional JavaScript for Web Developers
</title>
<description>
This book is aimed at three groups of readers: Experienced developers familiar with
object-oriented programming who are looking to learn JavaScript as it relates to traditional
OO languages such as Java and C++Web application developers
</description>
</book>
</books>
HTML & JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Books</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bookDescription"></div>
<div class="booksList"></div>
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/thickbox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
fun开发者_JAVA技巧ction parseXml(xml) {
if (jQuery.browser.msie) {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(xml);
xml = xmlDoc;
}
return xml;
}
function fnLoadContent(bookTitle){
$('#bookDescription').html('');
$.ajax({
type: "GET",
url: "books.xml",
dataType: ($.browser.msie) ? "text" : "xml" ,
success: function(xml) {
var newXML = parseXml(xml);
$(newXML).find('title').each(function(i){
if($.trim($(this).text().replace(/ /g,''))==bookTitle){
$('#bookDescription').append('<p>'+$.trim($(this).parent().children('description').text())+'</p>');
}
});
}
});
}
$.ajax({
type: "GET",
url: "books.xml",
dataType: ($.browser.msie) ? "text" : "xml" ,
success: function(xml) {
var newXML = parseXml(xml);
var ul_newsList=document.createElement('ul');
$(newXML).find('books').children().each(function(i){
$('<li><a title="'+$.trim($(this).children('title').text())+'" onclick=fnLoadContent("'+$.trim($(this).children('title').text()).replace(/ /g,'')+'") href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox">'+$.trim($(this).children('title').text())+'</a></li>').appendTo(ul_newsList);
});
$('.booksList').append(ul_newsList);
}
});
</script>
</body>
</html>
I think I need to call the tb_show(caption, url, imageGroup) in the thickbox.js soon after the content is injected into the div bookDescription.Not sure how though
Finally got it working by taking out title="'+$.trim($(this).children('title').text())+'" href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox" when the links are created and inserting
tb_show($.trim($(this).text()),'#TB_inline?height=155&width=300&inlineId=bookDescription');
in the success of the ajax call when the link is clicked.
加载中,请稍侯......
精彩评论