2011-10-07 55 views
2

當用戶點擊某些鏈接時,我試圖從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

+0

您看到的代碼示例沒有任何問題。點擊鏈接後,JavaScript控制檯會說什麼? – Blazemonger

+0

你真的應該從ur標記中分離出你的腳本,而不是使用HTML onClick屬性。你能發佈一個鏈接嗎? – Tules

回答

0

最後通過取出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調用成功。