Aria-rilevante durante la sostituzione dell'intero contenuto della tabella

Question

Sto testando alcune delle mie implementazioni di accessibilità utilizzando le mascelle e notò che per una delle mie tabelle, l'intera tabella viene letto ogni volta che viene aggiunta una riga, nonostante l'uso di aria-relevant=additions.

Il markup pertinente è il seguente:

<table role=log aria-live=polite aria-relevant=additions>
    <thead>
        <tr>
            <th scope=col>Name</th>
            <th scope=col>Time</th>
            <th scope=col>Comment</th>
        </tr>
    </thead>
    <tbody id=eventComments></tbody>
</table>

.

Ora il codice per aggiornare la tabella viene eseguita tramite una richiesta Ajax che tira tutti i commenti e gli plops nel tbody:

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            $('#eventComments').html(data);
        }
    });
}, 10000);

.

Quindi il primo commento tornerebbe, ad esempio:

<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

.

Quando ci sono due commenti, i dati sembrerebbero:

<tr><th scope=row>Justin</th><td>2014-01-11 01:18:31</td><td>Equipment failure</td></tr>
<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

.

Ogni volta che si verifica un aggiornamento, l'intera tabella viene letta mentre voglio leggere le righe appena aggiunte. In effetti, l'intera tabella viene letto ogni 10 secondi anche quando non vengono aggiunte nuove righe! So che la preparazione delle righe usando .prepend() è una possibilità, ma non sarebbe possibile recuperare solo nuove righe dal server.

C'è un modo per recuperare ancora tutte le righe dal server e dire allo schermo le lettore di leggere solo le nuove righe?

Answer 1

La soluzione migliore sarebbe recuperare solo le nuove righe dal server, poiché la risposta sarebbe più piccola e probabilmente più veloce.Tuttavia, se questo è impossibile, è possibile ottenere le vecchie righe dal DOM e sottrarle dai dati recuperati dal server utilizzando il metodo Sostituisci.Quindi è possibile utilizzare Prepend per aggiungere solo le nuove righe al DOM, che dovrebbe comportare le mascelle che annunciano solo le nuove righe.

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            // strip the old rows from the data retrieved from the server
            var oldRows = $('#eventComments').html();
            var reg = new RegExp(oldRows,"g");
            var newRows = data.replace(reg,"");
            $('#eventComments').prepend(newRows);
        }
    });
}, 10000);

.