javascriptjquerychannel-api

Google Channel API - Jquery update table


I am attempting to create a live timing table due to restrictions I have to use the google channel api. So I can receive messages fine that all works I am trying to add or update code but my issues is the common one of added elements not being accessible using jquery I know this is because of the way the dom works but I am looking for a way round it here it my current code I know it won't work but all the answers I find talk aboit buttons I am not using buttons or clicks it just updates onMessage. All I am looking to do is add a row if it doesn't exist and update a row if it does but the issues is that it is all live and the dom doesn't see them because they are added afterwards.

You can asume that the name is unique for each entry so it can be used as a id.

if($('#tr_' + messageParsed.name).length)
{
    html = "<td>" + messageParsed.name + "</td><td>" + messageParsed.lap + "</td><td>" + messageParsed.pos + "</td><td>" + messageParsed.s1 + "</td><td>" + messageParsed.s2 + "</td><td>" + messageParsed.s3 + "</td>";
    console.log('Update');
    $('#tr_' + messageParsed.name).html(html);
}
else {
    html = "<tr id=\"tr_" + messageParsed.name + "\"><td>" + messageParsed.name + "</td><td>" + messageParsed.lap + "</td><td>" + messageParsed.pos + "</td><td>" + messageParsed.s1 + "</td><td>" + messageParsed.s2 + "</td><td>" + messageParsed.s3 + "</td></tr>";
    $("#times").append(html);
 }

Here is the html for my table it's super simple as everything that is loaded into the table comes from the channel api, somone was bound to ask for it so I thought I would add it straigt away.

<table class="table table-striped">
    <thead>
       <tr>
            <th>Name</th>
            <th>Lap</th>
            <th>Position</th>
            <th>Sector 1</th>
            <th>Sector 2</th>
            <th>Sector 3</th>
        </tr>
    </thead>
    <tbody id="times">
    </tbody>
</table>

Solution

  • For anyone that is interested in how I solved this I worked out a way using java variables to check if they exist and generate a new table every time it's not that efficient but it works.

     if($.inArray(messageParsed.name, timing) !== -1)
            {
              var elmNum = $.inArray(messageParsed.name, timing);
              timingStore[elmNum] = messageParsed;
            }
            else {
              timing.push(messageParsed.name);
              timingStore.push(messageParsed);
            }
            // String Construction
            var htmlString;
            console.log(timingStore)
            for(var i = 0; i < timingStore.length; i++)
            {
              htmlString += "<tr><td>" + timingStore[i].name + "</td><td>" + timingStore[i].lap + "</td><td>" + timingStore[i].pos + "</td><td>" + timingStore[i].s1 + "</td><td>" + timingStore[i].s2 + "</td><td>" + timingStore[i].s3 + "</td></tr>";
            }
            $('#times').html(htmlString)