Seeing span tag when I want to be rendering the text within the span tag

Question

I have some words on a page that display "present" or "absent" that a user can click to toggle between being present or absent.

When the word is set to "absent" I want that text to be red.

The word represents a bool and is updated on screen using the following code:

<script type="text/javascript">
    absentText = $.trim('@MyApp.Resources.MyAppResource.Absent_Text').toLowerCase();
    presentText = $.trim('@MyApp.Resources.MyAppResource.Present_Text').toLowerCase();
    updateAttendanceUrl = '@Url.Action("UpdateAttendance", "Attendance")';
</script>

Where MyAppResource.Absent_Text = absent the page displays fine with the word, "absent" on the page.

When I change MyAppResource.Absent_Text to read "absent" my page literally displays <span style="color:red">absent</span>

Here is a sample of my view source:

<td>&lt;span style=&quot;color:red&quot;&gt;absent&lt;/span&gt;</td>

So somehow my < and > symbols are getting taken away.

How can I change my code so that when the word on my screen is written as "absent" it is colored red? Is there a simpler way to just color any text on the screen that matches "absent" red?

For reference, here is the rest of the javascript from my page:

var userId;
var attendanceDay;
var isPresent;
var updateAttendanceUrl;
var absentText;
var presentText;
var courseId;
$(document).ready(function (event) {
    $('.attendance').live('click', function () {
        userId = $(this).parents('tr').attr('id');
        if (userId != '') {
            attendanceDay = $(this).attr('id');
            isPresent = $.trim($(this).find('span').text().toLowerCase());
            courseId = $(this).parents('tbody').attr('id');
            $(this).find('span').addClass('currentClass');
            if (isPresent == absentText) {
                UpdateAttendance(1);
            } else {
                UpdateAttendance(0);
            }
        } else {
            event.preventDefault();
        }
    });
});
function UpdateAttendance(present) {
    url = updateAttendanceUrl;
    $.ajax({
        type: "POST",
        url: url,
        data: "userId=" + userId + "&attendanceDay=" + attendanceDay + "&courseId=" + courseId + "&present=" + present,
        success: function (data) {
            if (isPresent == absentText) {
                $('#' + userId).find('.currentClass').text(presentText).removeAttr('class');
            } else {
                $('#' + userId).find('.currentClass').text(absentText).removeAttr('class');
            }
            return true;
        }
    });
}

Didn't quite follow the question completely, but a guess would be to change `text(presentText)` to `html(presentText)` and the same for `absentText` — Danny, Aug 29 '12 at 12:54
@Danny I probably did a poor job at describing my issue. I do not have a problem with the functionality of the code, I have a problem with getting my html to not be `escaped`. — Ecnalyr, Aug 29 '12 at 12:57
from the description I was thinking that `presentText` and `absentText` were strings that contained html. Using jQuery `text(string)` to set the text of a node will escape the html, using `html(string)` will not escape it. — Danny, Aug 29 '12 at 13:01
@Danny Ah yes, I understand now, I misread your reply earlier. Changing it did not change the way the text is displayed on page. — Ecnalyr, Aug 29 '12 at 13:26

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

What your looking for is called unescape or htmldecode. There are various topics available on SO already. Here is one.

edited May 23 '17 at 11:56

Community

1
1

answered Aug 29 '12 at 12:53

Danthar

1,068
7
13

Seeing span tag when I want to be rendering the text within the span tag

1 Answers1