Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Load XML file onclick

    Hi to all,
    I am trying to load a different xml file everytime a link is clicked, based on its href.
    I have the following in head:

    JAVASCRIPT

    window.onload=function() {
    loadXMLDoc("papers.xml"); // loads the default xml file so that page is not empty
    }

    function scanForXML(){
    var extLinks=document.getElementById('results_list').getElementsByTagName('a');
    for (i=0; i<extLinks.length; i++) {
    extLinks[i].onclick=function getName()
    {
    var fileName=this.getAttribute('href');
    loadXMLDoc(fileName);
    return false;
    }
    }
    }
    HTML

    <ol id="results_list">
    <li> <a class="tooltip" href="paper2.xml"> Teaching with Tablet PC's </a></li>
    <li> <a href="paper3.xml" class="tooltip"> Tablet PC’s as Instructional Tools </a></li>
    </ol>
    The onclick event works, I get the href value but the new xmlFile does not get loaded.
    Any ideas why?

    ps: no jquery plz, cannot use that. trying to learn better basic javascript


    sorry here is the load code - by the way it does not work in chrome and opera - but works (the default xml file gets loaded) in safari andFF
    Code:
    function loadXMLDoc(dname)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",dname,false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
    }


    Thanks!
    K.
    Last edited by katpal; 06-29-2012 at 12:23 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    How can we guess what is in your loadXMLDoc( ) function?

    Show that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry you are right. File loadXmlData.js has (among others) the following:

    Code:
    function loadXMLDoc(dname)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",dname,false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    }
    ps: by the way this only works in FF (chrom, safari and opera do not parse the xml file)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    help?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,542
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    Your loadXMLDoc function gets the file and parses it (and all browsers WILL do so, some with quirks), but then it just throws the result away. Or, rather, it just stores the result in the (assumed) global variable. You have shown NO CODE WHATSOEVER that then DOES anything with the XML. MAYBE you have code that uses it, but how can we guess what it is when you don't show it?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am sorry again, did not want to throw at you all lines of beginner's code I've been working with...
    here it is:

    Javascript (external file)

    Code:
    function loadXMLDoc(url)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",url,false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    }
    //}
    
    function get_set_Data () {
    var preferedSize=300;
    	  
    var title=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    var author=xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;
    var abstract_preview=xmlDoc.getElementsByTagName("abstract_preview")[0].childNodes[1].nodeValue;
    
    var newAbsReview=abstract_preview.substring(0, preferedSize) + " <font color='green'> ... more info"; 
    
    document.getElementById("header").getElementsByTagName('h1')[0].innerHTML= title;
    document.getElementById("header").getElementsByTagName('h6')[0].innerHTML= author;
    document.getElementById("abstract").getElementsByTagName('div')[0].innerHTML= newAbsReview;
    so title, author, abstract review (and other nodes but no reason to display here) are retrieved and then displayed in specific elements in the HTML document. These nodes exist in all xml files, see examples below.

    This works the first time around with the default xml file (see: loadXMLDoc("paper2.xml") in the window.onload function below.

    The problem occurs when I try to load a new xml file onclick.

    By the way my HTML code has evolved to the below now (not sure if its for better or worse...):

    HTML document:

    Code:
    <script type="text/javascript">
    
    window.onload=function() {
    loadXMLDoc("paper2.xml");
    get_set_Data(); 
    scan(); //displays the full info of preview -- irrelevant for this exercise
    scanForXML();
    highlite(); // -- irrelevant for this exercise
    }
    
    var filename;
    var xml;  
    function LoadName(filename){
    	var xml = loadXMLDoc(filename);
    	alert ("the file " + filename + " has been loaded ");
    	alert(xml.getElementsByTagName("title")[0].childNodes[0].nodeValue); //for testing
    	return false;
                }
    			
    function scanForXML(){		
    	var extLinks=document.getElementById('results_list').getElementsByTagName('li');<br />
    	for (i=0; i<extLinks.length; i++)	{
    		extLinks[i].onclick=function()
    		{
    			LoadName(this.id);
    			return false;
    			alert(this.id);
    		
    		}
    	}
    }
    
    </script>
    I have changed the HTML code to retrieve the li ID value rather than using the href attribute. It gets the right variable but then the


    Code:
    <ol id="results_list">
              <li id="paper2.xml"> 
              <a class="tooltip" href="#">highlite Teaching with Tablet PC's </a> 
                </li>
              <li id="paper3.xml"> <a  href="#" class="tooltip">Tablet PC’s as Instructional Tools
                or the Pen is Mightier than the ’Board!</a>
    	</li>
              <li id="paper4.xml"> <a  href="#" class="tooltip">Improving Learning in CS1 via Tablet-PC-based</a></li>
    </ol>

    XML code

    XML file 1

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
      <paper>
        <title>TEACHING WITH TABLET PC'S</title>
        <author>Kenrick Mock [ 2004 ]</author>	
        <abstract_preview>
    	 <![CDATA[ <h2>ABSTRACT</h2>
    	highlight Tablet PC's are traditional notebook computers with the ability to process
    digital ink by writing with a stylus. They have recently attracted attention as
    a potential tool for educational use. ]]>
    	</abstract_preview>	
      </paper>
    </CATALOG>

    XML file 2

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <CATALOG>
      <paper>
        <title>Learning in CS1 via Tablet-PC-based In-Class Assessment</title>	
        <author>Kimberle Koile</author>	
        <abstract_preview>
          <![CDATA[ 
    	  <h2>ABSTRACT</h2>
            This  paper  describes  two  pilot  studies,  one  completed  and  one ongoing,  that  evaluate  the  use  of  Tablet  PCs  and  a Tablet-PC- based classroom  presentation  system in an introductory  computer science  class.   The presentation  system,  Classroom  Presenter  [2,3], supports student wireless submission  of digital ink answers to in-class  exercises.  ]]>
        </abstract_preview>
    </paper>
    </CATALOG>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •