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?

Typically, you should use ajax – A. Wolff Jul 09 '13 at 11:38 — A. Wolff, Jul 09 '13 at 11:38

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

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

edited May 23 '17 at 10:25

Community

1
1

answered Jul 09 '13 at 11:41

Jeremy Gallant

764
3
12

you're right AJAX is the solution but my question is more oriented to how to update each row of the table meaning each `td` element of the `table` – Reynier Jul 09 '13 at 13:31
You could return an array of rows instead of the entire table and loop through it and replace each `td`, but given that your current function writes out the entire table, why not just replace it all at once? The loop will be more work and less efficient. – Jeremy Gallant Jul 09 '13 at 13:34
I've a doubt, if I use your approach to build the entire table element instead of loop trough each `td` (if I understood good) how will be the first call I mean when I show the page for first time? My idea is to show the first table using the function `executeIndex()` and then trough jQuery and AJAX make a call every 10 seconds and update the table with new records from DB if they exists, I'm wrong? – Reynier Jul 09 '13 at 13:36
On your landing page (index.php) you place your empty table and code to make the ajax request. You place your existing function in a different page (table.php) and make an ajax request against that URL. – Jeremy Gallant Jul 09 '13 at 13:39
yes, I get that but again if I leave the `index.php` blank and just code the jQuery and AJAX part so what happen in the first call? The table will be rendered or not? – Reynier Jul 09 '13 at 13:41
You make an ajax call and populate the table on page load. You can do this in the $(document).ready() event of index.php. – Jeremy Gallant Jul 09 '13 at 13:43
You're telling it to load data from nowhere with the `url: ''` line. – Jeremy Gallant Jul 09 '13 at 14:55
sorry I forgot to indent the code at the editor, it's fixed now and yes I'm calling the URL, but I notice this error under Firebug `"NetworkError: 404 Not Found - http://devserver/monitor/web/frontend_dev.php/dashboard/buildAjax"` why, not so sure, any advice? – Reynier Jul 09 '13 at 14:59
nevermind I found the error, I should call `dashboard/BuildAjax` instead of `dashboard/buildAjax` I forgot the camelcase part :-( – Reynier Jul 09 '13 at 15:01

score 0 · Answer 2 · answered Jul 12 '13 at 09:56

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)
}

Update table content every 10 seconds

2 Answers2