CODEWITHSUNDEEP
javascriptjqueryajaxjson
Carl Weis
Carl Weis

Reputation: 7062

jquery won't update dynamically generated html

I have an ajax function that loads my inbox messages and each of the messages has a user_type and read field.

I'm looping over the messages and generating the html for them.

function initializeMailbox() {
    // get all mailbox data
    user.GetInboxMessages(function (response) {
        if (response) {
            inboxMessages['inbox'] = response;
            $("#inbox-table").fadeIn();
            loadInboxTable();
            inboxDataTable = $("#inboxTable").dataTable();
            $("#inbox-count").html(inbox_msg_count);
            displayMessage(first_msg_id);
        }
    });
}
function loadInboxTable() {

    for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) {
        first_msg_id = inboxMessages['inbox'][0].message_id;
        var user_type = "";
        if (inboxMessages['inbox'][i].user_type = 1)
            user_type = "DONOR";
        else if (inboxMessages['inbox'][i].user_type = 0)
            user_type = "CANDIDATE";
        else if (inboxMessages['inbox'][i].user_type = 2)
            user_type = "GROUP";

        $("#inbox-table-body").append(
            "<tr class='data-row' style='height: 75px;'> " +
                "<td>" +
                "<input type='hidden' id='user_type' value='" + inboxMessages['inbox'][i].user_type + "'/>" +
                "<input type='hidden' id='read' value='" + inboxMessages['inbox'][i].read + "'/>" +
                "<input type='checkbox' id='" + inboxMessages['inbox'][i].message_id + "'></input></td>" +
                "<td>" +
                "<p class='left'>" +
                "<img class='td-avatar' style='margin-top: 0px !important;' src='/uploads/profile-pictures/" + inboxMessages['inbox'][i].image + "' alt='avatar'/>" +
                "<br/>" +
                "<span class='user-type'>" + user_type + "</span>" +
                "</p></td><td>" +
                "<h2 onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].firstname + " " + inboxMessages['inbox'][i].lastname + "</h2><br/>" +
                "<h3 class='message-subject' onclick='displayMessage(" + inboxMessages['inbox'][i].message_id + ");'>" + inboxMessages['inbox'][i].subject + "</h3><br/><br/>" +
                "<h3 style='font-size: 0.7em; margin-top: -25px; float:left;'><span>" + inboxMessages['inbox'][i].datesent.toString().split(" ")[0] + "</span></h3>" +
                "</td>" +
                "<td><button class='delete-item' onclick='deleteMessage(" + inboxMessages['inbox'][i].message_id + ");' src='/images/delete-item.gif' alt='Delete Message' title='Delete Message' style='cursor: pointer; float:left; margin-left: 5px; margin-top:-3px;'></button></td>" +
                "</tr>"
        );
        // check if the message has been read
        if (inboxMessages['inbox'][i].read == 0) {
            // not read
            $("#message-subject").addClass('read-message');
        } else {
            // read
            $("#message-subject").removeClass('read-message');
        }
        inbox_msg_count++;
    }
}

Now if I alert out the values of user_type and read, I get the correct values, based on the message it's iterating over. But when it outputs, it's only using the value of the first message.

I need to be able to dynamically style the messages with jquery, based on these values. Can someone please tell me why this isn't working...

Upvotes: 0

Views: 291

Answers (2)

Jeff B
Jeff B

Reputation: 30099

Well, for one thing, you are using an ID selector:

$("#message-subject").addClass('read-message');

When you actually have a class:

<h3 class='message-subject'...

Use:

$(".message-subject").addClass('read-message');

Secondly, you are making an assignment (=) instead of doing a comparison (==) on user_type.

Might I suggest a different approach instead of a big if..then..else?

Use an array to index your user_types:

var user_type_labels = [ 'CANDIDATE', 'DONOR', 'GROUP' ];

function loadInboxTable() {

    for (var i = 0; i < inboxMessages['inbox'].length - 1; i++) {
        first_msg_id = inboxMessages['inbox'][0].message_id;

        // One line instead of an if/then/else
        var user_type = user_type_labels[ inboxMessages['inbox'][i].user_type ];
        ...

Third, you are adding multiple items with the same ID to your DOM. This is not legal and has undefined consequences.

<input type='hidden' id='user_type' value='...
<input type='hidden' id='read' value='...

You need to use classes for this.

<input type='hidden' class='user_type' value='...
<input type='hidden' class='read' value='...

Upvotes: 2

Danny
Danny

Reputation: 7518

In your code I think you meant to do the following

if (inboxMessages['inbox'][i].user_type === 1)

Notice the equal signs. What you currently have will always be true and user_type will always be assigned to DONOR

Upvotes: 1

Related Questions