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.

#normal_status is an ID rather than a class, and as per HTML spec, no two elements should have the same ID. — Marsh
– Marsh, Commented May 15, 2014 at 21:11
Only 1 element has #normal_status. I showed what was in the CSS as well as the HTML. The only place it's used in the HTML is what I showed before the CSS code block. — Mkalafut
– Mkalafut, Commented May 19, 2014 at 13:56
You should try and lower the threshold of answering your question. It's kind of a big read for what appears to be a small problem. Try to construct a SSCCE. The key to solving big problems is breaking them down to small ones. You might even end up finding your own solution. jsfiddle is a nice tool to help with the self contained bit. — Chris Wesseling
– Chris Wesseling, Commented May 19, 2014 at 21:07
I assume, a color represents a status? Example, green==normal, red==down or something? — mfirdaus
– mfirdaus, Commented May 20, 2014 at 6:06

mfirdaus · Accepted Answer · 2014-05-20 07:01:58Z

1

+50

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

answered May 20, 2014 at 7:01

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

This is exactly what I was looking for. Thanks so much for your help! I am assuming I can do this without buttons and just change it around a little so I'll give you the bounty and accepted answer. Thanks again!

mfirdaus Over a year ago

Yeah. The buttons are just to simulate a $.get(). And you're welcome. glad to be of help :)

Mkalafut Over a year ago

I figured as much, and thanks again! I have a similar question open regarding inserting IDs into image tags. I don't have enough rep to bounty it anymore but if you've got time, I'd greatly appreciate it. The question is here

Mkalafut Over a year ago

For some reason, it's not working with my image URL I am using for the background. There are specific "bar" backgrounds that I am to use for this, and instead of using background: green; I am trying to use background: url(images/greenbar.jpg) and it's not working. Any ideas? (It works when I hard-code it).

mfirdaus Over a year ago

just wondering, have you tried it with single quotes? like background: url('images/greenbar.jpg');

|

Collectives™ on Stack Overflow

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

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