How to change an image on a site using XML data & jQuery

Question

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:

<script> 
  function myExampleSite() 
  {
    var myURL = window.location.href;
    var dashIndex = myURL.lastIndexOf("-");
    var dotIndex = myURL.lastIndexOf(".");
    var result = myURL.substring(dashIndex + 1, dotIndex);
    return result;
  }

  var exampleSite = myExampleSite();
</script>

<script> 
var root = null;
$(document).ready(function ()
{
    $.get("Status_Pages.xml",
    function (xml)
    {
        root = $(xml).find("site[name='" + exampleSite + "']");

        result = $(root).find("headerImage");
        $("td#headerImage").html($(result).text());
        var imageSrc=$(root).find("headerImage").text();
        $(".PageHeader img").attr("src",imageSrc);

        result = $(root).find("version");
        $("td#version").html($(result).text());

        result = $(root).find("status");
        $("td#status").html($(result).text());

        result = $(root).find("networkNotes");
        $("td#networkNotes").html($(result).text());

       ....etc etc
    });
});
</script>

My XML file looks like this.

<sites>
   <site name="Template"> 
       <headerImage>images/template-header.png</headerImage>
       <productVersion>[Version goes here]</productVersion>
       <systemStatus color="green">Normal</systemStatus>
       <networkNotes>System status is normal</networkNotes>
    </site>
</sites>

I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.

The first snag is how it currently obtains its header image: html

<div class="container">

    <div class "PageHeader"> <!-- Header image read from XML file -->
        <img border="0" src=""/>
    </div>

Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.

How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?

Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.

Answer 1

As you already have the code that can extract the image URL information from the XML, which is

result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());

It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like

var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc) 

And it should work

Example

In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.