Mike Harrison Mike Harrison - 2 years ago 121
Javascript Question

Improve jQuery to reduce repetition

I am using jQuery to Ajax in an xml feed that looks like this:

<script id="tinyhippos-injected"/>

And using this jQuery:

$(document).ready(function() {
type: 'GET',
url: 'https://status.clook.net/xml/status/harvey.xml',
dataType: 'xml',
success: function(xml){
var http = $(xml).find('http').text();
var ftp = $(xml).find('ftp').text();
var mysql = $(xml).find('mysql').text();
var load = $(xml).find('load').text();

if(http == 'OK') {
$(".http img").attr("src","http://placehold.it/40/00cc33/ffffff");
else if(http == 'WARNING') {
$(".http img").attr("src","http://placehold.it/40/ff6600/000000");
else if(http == 'CRITICAL') {
$(".http img").attr("src","http://placehold.it/40/ff0000/000000");

if(ftp == 'OK') {
$(".ftp img").attr("src","http://placehold.it/40/00cc33/ffffff");
else if(ftp == 'WARNING') {
$(".ftp img").attr("src","http://placehold.it/40/ff6600/000000");
else if(ftp == 'CRITICAL') {
$(".ftp img").attr("src","http://placehold.it/40/ff0000/000000");

if(mysql == 'OK') {
$(".mysql img").attr("src","http://placehold.it/40/00cc33/ffffff");
else if(mysql == 'WARNING') {
$(".mysql img").attr("src","http://placehold.it/40/ff6600/000000");
else if(mysql == 'CRITICAL') {
$(".mysql img").attr("src","http://placehold.it/40/ff0000/000000");

if(load == 'OK') {
$(".load img").attr("src","http://placehold.it/40/00cc33/ffffff");
else if(load == 'WARNING') {
$(".load img").attr("src","http://placehold.it/40/ff6600/000000");
else if(load == 'CRITICAL') {
$(".load img").attr("src","http://placehold.it/40/ff0000/000000");


To swap the image
in this HTML

<div class="container">
<h3>Server Status Widget</h3>
<h4>Hosting Server</h4>

<p><strong>HTTP: </strong><span class="http"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>FTP: </strong><span class="ftp"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>MySQL: </strong><span class="mysql"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>Load: </strong><span class="load"><img src="http://placehold.it/40" alt="" /></span></p>


This is all working great, but I am not that experienced with jQuery and I am sure that code can be improved and made less repetitive. My question would be can I reduce the number of
else if
statements so I don't need to run through each variable?

Thanks for any help


Answer Source

Assuming there are only three status messages: OK, WARNING and CRITICAL.. The UNKNOWN status with it's image URL can also be added in the images object.

The images URL can be stored in an object with the status message as key and the URL as value. Then the key can be used dynamically.

$(document).ready(function () {
    // Define images object here
    var images = {
        OK: 'http://placehold.it/40/00cc33/ffffff',
        WARNING: 'http://placehold.it/40/ff6600/000000',
        CRITICAL: 'http://placehold.it/40/ff0000/000000'

        success: function (xml) {
            var http = $(xml).find('http').text(),
                ftp = $(xml).find('ftp').text(),
                mysql = $(xml).find('mysql').text(),
                load = $(xml).find('load').text();

            // Use the status message to get the image URL from object.
            $('.http img').attr('src', images[http]);
            $('.ftp img').attr('src', images[ftp]);
            $('.mysql img').attr('src', images[mysql]);
            $('.load img').attr('src', images[load]);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download