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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with displaying an image using Javascript via XML

    Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol.

    I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript.

    What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML?

    The following is my Javascript code which grabs the text from the XML and displays it in the HTML;

    Code:
    <script type="text/javascript">
    
    var xmlDoc;
    <!--
    if (window.XMLHttpRequest)
      {
      xhttp=new XMLHttpRequest();
      } 
    else // Internet Explorer 5/6
      {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xhttp.open("GET","SDS.xml",false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    
    var x=xmlDoc.getElementsByTagName("NEWS");
    i=0;
    
    function display()
    {
    title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
    date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
    stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
    story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
    txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
    document.getElementById("show").innerHTML=txt;
    }
    
    //-->
    </script>
    And this is the XML file;

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    
    <BULLETIN>
    <NEWS>
    <PIC>"newssmall.jpg"</PIC>
    <DATE>14/3/2010</DATE>
    <TITLE>News Story 1</TITLE>
    <STITLE>This is a short sentence to describe the story in brief</STITLE>
    <STORY>This is the text of the news story</STORY>
    </NEWS>
    </BULLETIN>
    So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site.

    Thanks for helping if you can,
    Dan

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    It's not very clean code, creating innerHTML like this, and the fontsize and fontcolor and bold would be better done via CSS classes, but...
    Code:
    function display()
    {
        title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
        date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
        stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
        story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
        image = '<img src="' + x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue + '" class="yourchoice">';
        txt= title + "<br />" + date + "<br />" + stitle + "<br />" + image + story;
        document.getElementById("show").innerHTML=txt;
    }
    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.

  • Users who have thanked Old Pedant for this post:

    Metana (03-19-2010)

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry about the long response time, I didn't see where my thread got posted until now, I fixed this problem but now have another. I did try formatting the font using CSS, but even in-line CSS doesn't override the javascript's font colour for some reason, even if the javascript contains no font settings.

    The fixed code is this:

    Code:
    <script type="text/javascript">
    
    var xmlDoc;
    <!--
    if (window.XMLHttpRequest)
      {
      xhttp=new XMLHttpRequest();
      } 
    else // Internet Explorer 5/6
      {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xhttp.open("GET","SDS.xml",false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    
    var x=xmlDoc.getElementsByTagName("NEWS");
    i=0;
    
    function display()
    {
    title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
    date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
    stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
    story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
    pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
    document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
    txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
    document.getElementById("show").innerHTML=txt;
    }
    
    //-->
    </script>
    Now the Javascript displays the image fine in FF.

    My main problem now is the fact that only FF works with this script, IE displays absolutely nothing. Its not the modification that's caused it, it never worked in IE6 but I assumed thats because nobody here in the office bothers to update these machines, just got IE8 an hour ago and it still refuses to work. Any ideas?

    Thanks,
    Dan

  • #4
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks but I only just found my post for some reason. Managed to fix it myself with the following code;

    Code:
    <script type="text/javascript">
    
    var xmlDoc;
    <!--
    if (window.XMLHttpRequest)
      {
      xhttp=new XMLHttpRequest();
      } 
    else // Internet Explorer 5/6
      {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xhttp.open("GET","SDS.xml",false);
    xhttp.send("");
    xmlDoc=xhttp.responseXML;
    
    var x=xmlDoc.getElementsByTagName("NEWS");
    i=0;
    
    function display()
    {
    title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
    date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
    stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
    story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
    pic=(x[i].getElementsByTagName("PIC")[0].childNodes[0].nodeValue);
    document.getElementById("picture2").innerHTML="<img src=" + pic + " />";
    txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
    document.getElementById("show").innerHTML=txt;
    }
    
    //-->
    </script>
    At a quick glance it seems to be the same type of solution though.

    My problem now is getting this to display in IE, it works in FF fine, just IE8 is having a hissy fit and won't show anything. Any ideas?

    Thanks,
    Dan


  •  

    Posting Permissions

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