How do I update several divs with SignalR?

Question

I used to have this table with different identifyable rows that were updated using SignalR like this:

$(document).ready(function () {
    //Enable logging
    $.connection.hub.logging = true;

    // Proxy created on the fly
    var messageHub = $.connection.messageHub;
    messageHub.client.timeEnabled = true;

    // ... Removed main part of the body ...

$.connection.hub.start(function () {
        var table = document.getElementById("monitorList");
        for (var i = 0, row; row = table.rows[i]; i++) {
            var item = document.getElementById("conveyanceId-" + i).innerHTML;
            messageHub.server.joinGroup(item);
        }
})

Now, the structure has changed, and instead of using tables, I'm using divs, where each container has a unique id: container-@unit.UnitId:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            @for (int i = 0; i < @Model.UnitDetails.Count; i++)
            {
                var unit = Model.UnitDetails[i];
                <div class="panel panel-inverse sl-unit-overview" id="container-@unit.UnitId">
                    <div class="panel-heading">
                        <!-- Heading content -->
                    </div>
                    <div class="panel-body">
                        <!-- Body content -->
                    </div>
                </div>
            }
        </div>
    </div>
</div>

My question, I guess it's more like two questions: 1. How can I change my javascript to find each container like I did with the table? 2. Is my current way of doing it the correct way of doing it? (Feeling kind of uncertain)

score 0 · Answer 1 · edited May 23 '17 at 12:11

You can use getElementsByClassName, which returns an array with all the items in the dom with that class, then you can iterate over that class. Of course you will need to add a class to the div you want selected (class: "name").

See an example here: How to get current element in getElementsByClassName

As for 2, I think you are doing fine, but would recommend using JQuery if at all possible (some native js does not work across all browsers). See: http://api.jquery.com/class-selector/

score 0 · Accepted Answer · answered Jan 02 '14 at 14:32

Solved it :)

$.connection.hub.start(function () {
        $("#unitList > div[id]").each(function() {
            var unitId = this.id;
            messageHub.server.joinGroup(unitId);
        });
}).done(function () { console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function () { console.log('Could not Connect'); });

How do I update several divs with SignalR?

2 Answers2