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.

mfirdaus · Accepted Answer · 2014-05-20 13:25:28Z

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.

answered May 20, 2014 at 13:25

mfirdaus

4,5921 gold badge27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mkalafut Over a year ago

I'm guessing there's a problem with my URLs inside of my XML and CSS.. I just get a blank box with a piece of paper in half instead of my image. The problem is that it works when it's just hard-coded in the HTML as images/template-header.png so I'm not sure why it's not working when I try it this way...

mfirdaus Over a year ago

This is going to be slightly harder to diagnose as I'd need to poke in the actual site. A good way to check is to "inspect element" and start clicking on the header. Ditto your status text. what is inside them.

Mkalafut Over a year ago

I've edited the code after I tried troubleshooting the issue myself. I'm having difficulty with the images and I'm not sure why. They work when they're hard-coded, but not when I try these methods.

mfirdaus Over a year ago

At this stage I'm going to have to stab things in the dark. There's three possibilities that I can think off. a) javascript is giving wrong attributes. b)css selectors are wrong. c) image url is wrong. I guess we can start off with c) by using the absolute URL "something.com/folder/img.jpg" instead of relative "folder/img.jpg"

Mkalafut Over a year ago

Ah ha! Scratch that, I had an error in my code. It's fixed and this is now working correctly. I'm going to continue troubleshooting the status errors though, since that is giving me some trouble.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related