使用ThickBox从XML文件加载内容

当用户点击某些链接时，我试图从XML文件中将内容加载到DIV中。我能够通过匹配通过的参数将正确的内容加载到XML中的DIV一个由onClick.Now Im调用的函数，它试图使用ThickBox显示DIV中的内容，我一直不成功。我认为在内容被加载到div myContent之前弹出厚框，因此Im正在显示一个空白框。我知道我做错了，请任何建议/解决方法。使用ThickBox从XML文件加载内容

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"> 

    function 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>

我想我需要调用在thickbox.js的tb_show（标题，URL，imageGroup）的内容注入后不久， div bookDescription.Not sure

来源

2011-10-07 manraj82

您看到的代码示例没有任何问题。点击链接后，JavaScript控制台会说什么？ – Blazemonger

你真的应该从ur标记中分离出你的脚本，而不是使用HTML onClick属性。你能发布一个链接吗？ – Tules

最后通过取出title="'+$.trim($(this).children('title').text())+'" href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox"创建链接并插入

tb_show($.trim($(this).text()),'#TB_inline?height=155&width=300&inlineId=bookDescription');

在单击链接时ajax调用成功。

来源

2011-10-10 13:47:09 manraj82

使用ThickBox从XML文件加载内容

回答

相关问题