How to change an HTML element that uses CSS by using jQuery and XML data?

Question

I have a site that shows system status that has a colored bar behind it depending on the health of the system it displays. 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 + "']");

        var status = $(root).find("systemStatus");
        var color = status.attr("color");
        $("#status").html(status.text());
        $("#status").attr("color", color);

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

        result = $(root).find("headerImage");
        $("td#headerImage").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 a snag though.

The way I am displaying my status currently looks like this:

<tr>
    <td class="table_header">
        Current System Status
    </td>
</tr>
    <table><tr>

        <td id="status"></td>

    </tr></table>

    <tr>
        <td class="table_header">
        Network Notes
    </td>
    </tr>

Right now it's hard-coded to show the system status with either a red, green, or yellow bar behind the text to indicate the health of the system, but I need to make able to read the XML value for that site.

The tricky part is that I am also using data from a CSS for this particular portion of the site. The CSS code relevant to this is (there is one for green, yellow, and red):

#status[color=green] {
    color: white;
    text-align: left;
    background: url(images/greenbar.jpg) no-repeat;
}

#status[color=yellow] {
    color: black;
    text-align: left;
    background: url(images/yellow.jpg) no-repeat;
}

#status[color=red]{
    color: black;
    text-align: left;
    background: url(images/red.jpg) no-repeat;
}

**How can I read in the system status string, along with the element's attribute of color to populate my HTML so that each site has a different image depending on what's in the XML? **

I have tried the above and it gives a color background to the text, not the image url background.

And it reads the correct status but the image never appears behind it.

Answer 1

If I understand your question, you have information in your XML that you want to show in your HTML. And depending on the status/content of your XML, you also want it to be shown/presented/styled differently using CSS.

With CSS, you can select things, using ID, class or in the case of [color=green], attributes. But the code that you have supplied, you haven't attached the color attribute to your HTML. So to make this work, with the CSS that you have, you need to do something like

var status = $(root).find("systemStatus"); 
var color = status.attr("color"); //get the attribute value from the XML
$("#status").attr("color", color); //assign the attribute value to the HTML
$("#status").html(status.text());
result = $(root).find("networkNotes");
$("#networkNotes").html($(result).text());

An example of this

But moving forward, semantically, I think you don't need to use color="green". It actually not be the "correct" way (in terms of content and presentation seperation). I would actually suggest using classes and assign them based on the actual "status". So example normal,warning and danger. Then you can simply have the color information (or "presentation" information) be in the CSS file.

So your XML for status will be something like

<systemStatus>Normal</systemStatus>

and the jQuery code would be something like

var status = $(root).find("systemStatus").text();
$("#status").html(status);
$("#status").attr("class", status.toLowerCase());

and your css will be something like

#status.normal {
    background:green
}
#status.congested {
    background:yellow;
    color:black
}

#status.down {
    background:red
}

Example