CODEWITHSUNDEEP
jqueryhtml
Willy
Willy

Reputation: 10650

div's content (text) not being refreshed correctly

Initially I create dynamically some elements like below:

var newItem = '<div title="' + elem.IP + '" id="' + elem.Alias + '-Status" class="elementStatus"><div class="image" id="' + elem.Alias + '-StatusImg"></div><div id="' + elem.Alias + '-StatusTxt" class="text">Waiting...</div></div>';

Later, I execute a jquery ajax call which is like below after a button in the page is clicked:

function doTask(task, urlDoTask) {
    return ajax({
        url: this.getRootDir() + urlDoTask,
        data: { hostNameOrAddress: task.IP },
        beforeSend: setStatusTxt(task.Alias, 1),
        type: 'POST'
    }).then(function (data) {
        setStatusTxt(task.Alias, 2);
        return ok(createObject("status", "ok", "op", "doTask", "task", task, "data", "OK"));
    }, function (data) {
         setStatusTxt(task.Alias, 3);
        return ok(createObject("status", "fail", "op", "doTask", "task", task, "data", "KO"));
    });
}

What I am trying to do is to update the (elem.Alias + '-StatusTxt') div's content (text) with a new text and font color by calling setStatusTxt function before sending ajax call and on ajax call completed (with success or not), see below:

function setStatusTxt(elemId, msgType) {

    if (msgType === 1) {
        $('#' + elemId + '-StatusTxt').text("Ongoing...").addClass("hilightedStatusTxtOngoing");
    }
    else (msgType === 2) {
        $('#' + elemId + '-StatusTxt').text("OK").addClass("hilightedStatusTxtOK");
    }
    else {
        $('#' + elemId + '-StatusTxt').text("KO").addClass("hilightedStatusTxtKO");
    }

}

CSS:

.hilightedStatusTxtOngoing
{
    color: inherit;
}

.hilightedStatusTxtOK
{
    color: Green;
}

.hilightedStatusTxtKO
{
    color: Red;
}

First time button on the page is clicked it is working perfectly: Text is updated correctly with the correct font color (I should say that first time, browser history and cookies, and all stuff is deleted but not the next times). Once task completed, in the view page remains the text with the current color in the div's content. Now, in this state, if I execute again the ajax call by clicking on the button in the page and msgType (that passed as parameter to setStatusTxt function) is different from the current, the text ('#' + elemId + '-StatusTxt' div's content) is updated/refreshed correctly to the new one but not with the correct color, I mean, font color is not updated/refreshed with the new one and new text remains with the previous color.

Why is text color not being updated?

Upvotes: 0

Views: 57

Answers (1)

azz
azz

Reputation: 5930

You need to remove the other classes from the element.

$('#' + elemId + '-StatusTxt').text("OK")
    .removeClass("hilightedStatusTxtOngoing")
    .removeClass("hilightedStatusTxtKO")
    .addClass("hilightedStatusTxtOK");

Do this for all three of the message types.

If it's simpler, you can create a short helper function.

function changeStatus($e, className) {
    return $e.removeClass("hilightedStatusTxtOngoing")
      .removeClass("hilightedStatusTxtKO") 
      .removeClass("hilightedStatusTxtOK")
      .addClass(className);
}

And call like so:

var $e = $('#' + elemId + '-StatusTxt');
if (msgType === 1) {
    changeStatus($e, "hilightedStatusTxtOngoing").text("Ongoing...");
} // and so on...

Upvotes: 1

Related Questions