Update table content every 10 seconds

Question

I have this function in my actions.class.php:

public function executeIndex(sfWebRequest $request) {
    $id_empresa = $this->getUser()->getGuardUser()->getSfGuardUserProfile()->getIdempresa();

    $this->records = Doctrine_Core::getTable('SdrivingRegistrosEmisores')
            ->createQuery('re')
            ->leftJoin('re.SdrivingTurno t')
            ->leftJoin('re.SdrivingMaquinaEmisor me')
            ->leftJoin('me.SdrivingMaquina m')
            ->leftJoin('re.SdrivingOperador o')
            ->leftJoin('re.SdrivingDetalleEmisores de')
            ->where('o.idempresa = ?', $id_empresa)
            ->execute();
}

Which renders this view:

<table class="table table-condensed table-striped table-hover table-bordered pull-left" id="data-table">    
            <thead>
                <tr>
                    <th><?php echo __('Turno') ?></th>
                    <th><?php echo __('ID Máquina') ?></th>
                    <th><?php echo __('Operador') ?></th>
                    <th><?php echo __('Semáforo') ?></th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($records as $record): ?>
                    <tr>
                        <td><?php echo $record->SdrivingTurno->getTipo(); ?></td>
                        <td><?php echo $record->SdrivingMaquinaEmisor->SdrivingMaquina->getPatente(); ?></td>
                        <td><?php echo $record->SdrivingOperador->getNombre() ?></td>
                        <td>
                            <?php
                            if (count($record->SdrivingDetalleEmisores) > 0):
                                if ($record->SdrivingDetalleEmisores->getFirst()->getRevisado() == 0):
                                    echo image_tag('bullet_red.png');
                                elseif ($record->SdrivingDetalleEmisores->getFirst()->getRevisado() == 1):
                                    echo image_tag('bullet_orange.png');
                                endif;
                            else:
                                echo image_tag('bullet_green.png');
                            endif;
                            ?>
                        </td>
                        <td><?php echo link_to('Ver detalles', 'ver-detalles/' . $record->getIdregistros(), 'class="btn btn-success btn-mini"') ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
</table>

As the title said I need to reload the table content every 10 seconds, digging here in Stackoverflow and Google I found this topic where I can get the jQuery code but my question is: how I can update each row in the table HTML element?

EDIT

After read recomendations leave me here by users this is what I've tried so far without success:

actions.class.php

public function executebuildAjax(sfWebRequest $request) {
        $id_empresa = $this->getUser()->getGuardUser()->getSfGuardUserProfile()->getIdempresa();

        $records = Doctrine_Core::getTable('SdrivingRegistrosEmisores')
                ->createQuery('re')
                ->leftJoin('re.SdrivingTurno t')
                ->leftJoin('re.SdrivingMaquinaEmisor me')
                ->leftJoin('me.SdrivingMaquina m')
                ->leftJoin('re.SdrivingOperador o')
                ->leftJoin('re.SdrivingDetalleEmisores de')
                ->where('o.idempresa = ?', $id_empresa)
                ->execute();

        echo '<table class="table table-condensed table-striped table-hover table-bordered pull-left" id="data-table">';
        echo '<thead>';
        echo '<tr>';
        echo '<th>' . __('Turno') . '</th>';
        echo '<th>' . __('ID Máquina') . '</th>';
        echo '<th>' . __('Operador') . '</th>';
        echo '<th>' . __('Semáforo') . '</th>';
        echo '<th></th>';
        echo '</tr>';
        echo '<tbody>';

        foreach ($records as $record):
            echo '<tr>';
            echo '<td>' . $record->SdrivingTurno->getTipo() . '</td>';
            echo '<td>' . $record->SdrivingMaquinaEmisor->SdrivingMaquina->getPatente() . '</td>';
            echo '<td>' . $record->SdrivingOperador->getNombre() . '</td>';
            echo '<td>';
            if (count($record->SdrivingDetalleEmisores) > 0):
                if ($record->SdrivingDetalleEmisores->getFirst()->getRevisado() == 0):
                    echo image_tag('bullet_red.png');
                elseif ($record->SdrivingDetalleEmisores->getFirst()->getRevisado() == 1):
                    echo image_tag('bullet_orange.png');
                endif;
            else:
                echo image_tag('bullet_green.png');
            endif;
            echo '</td>';
            echo '<td>' . link_to('Ver detalles', 'ver-detalles/' . $record->getIdregistros(), 'class="btn btn-success btn-mini"') . '</th>';
            echo '</tr>';
        endforeach;

        echo '</tbody>';
        echo '</thead>';
        echo '</table>';
    }

indexSuccess.php view:

<div id="dt_example" class="example_alt_pagination"></div>
<script>
    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                type: 'get',
                url: '<?php echo url_for('dashboard/buildAjax') ?>',
                datatype: 'html',
                success: function(data) {
                    $("#dt_example").html(data);
                },
                error: function() {
                    alert('<?php echo __('Error loading data!!!') ?>');
                }
            });
        }, 10000);
    });
</script>

But I'm getting always the alert box Error loading data!!! why? What is wrong?

Answer 1

I would suggest you use ajax and the setInterval function to request the table from the server and replace the HTML on the client-side.

This answer comes pretty close to exactly what you need: jQuery - Call ajax every 10 seconds

Answer 2

you should return something in your action. For example, make partial with your table (_table.php) in indexSuccess you should have

<div id="table">
<?php include_partial('module/table', array('records' => $records))?>
</div>

in ajax action you should get your data from database and return this partial

$records = Query:...;
$html = $this->getPartial('module/table', array('records' => $records));
return $this->renderText($html);

or better use json

return $this->renderText(json_encode(array('html' => $html)))

and then insert your result in div with ajax success function:

success: function(data){
$('#table').html(data.html)
}