2011-10-07 2 views
2

Im essayant de charger le contenu dans un DIV à partir d'un fichier XML lorsque l'utilisateur clique sur certains liens.J'ai été en mesure de charger le bon contenu à la DIV du XML en faisant correspondre les arguments passés une fonction qui a été invoquée par le onClick.Now Im essayant d'afficher le contenu de la DIV en utilisant ThickBox, ce que j'ai échoué. Je pense que la boîte épaisse surgit avant que le contenu soit chargé dans le div myContent, donc Im étant affiché avec une boîte vide. Je sais que je fais mal, toutes les suggestions/solutions de contournement s'il vous plaît.Charger du contenu à partir du fichier XML en utilisant ThickBox

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> 

Je pense que je dois appeler la tb_show (légende, url, ImageGroup) dans les thickbox.js peu de temps après le contenu est injecté dans la div bookDescription.Pas sûr comment si

+0

Il n'y a rien de mal avec vos exemples de code que je peux voir. Que dit votre console JavaScript après avoir cliqué sur un lien? – Blazemonger

+0

vous devriez vraiment séparer vos scripts de votre balisage ur plutôt que d'utiliser l'attribut HTML onClick. Pourriez-vous poster un lien? – Tules

Répondre

0

Enfin obtenu le travail en supprimant title="'+$.trim($(this).children('title').text())+'" href="#TB_inline?height=155&width=300&inlineId=bookDescription" class="thickbox" lorsque les liens sont créés et en insérant

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

dans le succès de l'appel ajax lorsque le lien est cliqué.

Questions connexes