Update a zf2 view every 1s via jquery/ajax

Question

Update a zf2 view every 1s via jquery/ajax

Asked 7 years, 11 months ago

Viewed 172 times

2

I have a table as shown below, I need it to update every 1s, but I have no idea how to do.

I used an html 5 tag, but it updates everything, I just want to update only the table. My View

<?php
$datenull = '01/01/0001 00:01';
$linha = 1;
?>
<meta HTTP-EQUIV="refresh" content="2">
<h1>Lista de Chamados em Abertos</h1>
<br/>
<div class="myTable table-responsive">
    <table class="table table-hover">
        <tr>
            <th></th>
            <th class="text-center">N. Chamado</th>
            <th class="text-center">Computador</th>
            <th class="text-center">Sala de Aula</th>
            <th class="text-center">Criado em</th>
        </tr>
        <?php foreach ($this->data as $entity) :?>
        <tr onclick="location.href ='<?php echo $this->url('Caos-admin-interna',
                array(
                    'controller' => 'calls',
                    'action' => 'examined',
                    'id' => $entity->getId()
                )
            );?>';" style="cursor: pointer">
            <td class="text-center"><strong><?php echo $linha;?></strong></td>
            <td class="text-center"><?php echo $entity->getId();?></td>
            <td class="text-center"><?php echo $entity->getComputer();?></td>
            <td class="text-center"><?php echo $entity->getClassroom();?></td>
            <td class="text-center"><?php echo $entity->getCreated();?></td>
        </tr>
        <?php
        $linha = $linha + 1;
        endforeach; ?>
    </table>
</div>

My Controller

<?php

namespace CaosAdmin\Controller;

use Zend\View\Model\ViewModel,
    Zend\Authentication\Storage\Session  as SessionStorage,
    Zend\Authentication\AuthenticationService;
use Zend\Paginator\Paginator,
    Zend\Paginator\Adapter\ArrayAdapter;


class CallsController extends CRUDController
{
    private $user;
    private $numberPerPage;
    public function __construct()
    {
        $this->entity = 'Caos\Entity\Call';
        $this->form = 'CaosAdmin\Form\Call';
        $this->service = 'Caos\Service\Call';
        $this->controller = 'calls';
        $this->route = 'Caos-admin';
        $auth = new AuthenticationService();
        $sessionStorage = new SessionStorage('CaosAdmin');
        $auth->setStorage($sessionStorage);
        $this->user = $sessionStorage->read();
        $this->numberPerPage = 20;
    }

    /**
     * @return ViewModel
     */
    public function indexAction()
    {
        $list = $this->getEm()->getRepository($this->entity)->findCallBySchool($this->user->getId());
        $viewModel = new ViewModel(array('data' => $list));
        return $viewModel;
    }
}

The return of my research comes in this format:

leo_ap the return of my research comes in this format:

In my View I put this code to print the data:

$entity->getId()

In javascript how do I do? i have a method in my entity that transforms an array, how do I use.

Thank you

1 answer

Browser other questions tagged jquery ajax zend-framework-2

You are not signed in. Login or sign up in order to post.

by leoap • **555** points · Answer 1 · 2017-01-20T13:42:16+00:00

You will need a Javascript function to populate your table dynamically. This function must make a dynamic request (ajax) to your server to get the data to be entered in the table. With this function ready, just create a setInterval that will make her run every second.

1º) Route and Controller for JSON data return

In your route file, set a route to reach a controller that must have a unique JSON data return action. For example:

'chamados-get' => array(
    'type'    => 'literal',
    'options' => array(
        'route'    => '/chamado/get',
        'defaults' => array(
            'controller' => 'Application\Controller\ChamadoController',
            'action'     => 'get',
        ),
    ),
),

The above code should be inserted as an item of your route array in your module configuration (file module.config.php). Basically it points to the url /chamado/get, calling a controller Chamado and an action get. Names created just as an example, you must replace by the real names you use in your application.

Now, the controller code must have this action of ours get and it should do: a query to your database, get the data you want to display in the table and return them in JSON format:

<?php

namespace Application\Controller;

use Zend\Mvc\Controller\AbstractActionController;

class ChamadoController extends AbstractActionController
{
    public function getAction() {
        // Aqui voce deve fazer uma consulta ao seu banco de dados para retornar os dados em um array
        // Usei um array pronto como exemplo
        $data[0]['numchamado'] = '1123';
        $data[0]['computador'] = 'inf01';
        $data[0]['sala'] = 'S301';
        $data[0]['criadoem'] = '2017-01-18';

        $data[1]['numchamado'] = '1235';
        $data[1]['computador'] = 'inf03';
        $data[1]['sala'] = 'S302';
        $data[1]['criadoem'] = '2017-01-19';

        $data[2]['numchamado'] = '1443';
        $data[2]['computador'] = 'inf02';
        $data[2]['sala'] = 'S301';
        $data[2]['criadoem'] = '2017-01-20';

        $this->response->setContent(json_encode($data));
        return $this->response;
    }
}

Note that this action does not return a view. When assigning a value to $this->response->setContent and then returning the $this->response, we are creating a kind of premature return, which causes Zend not to seek the view of action and just return the content set to the response. For more information about this visit: https://framework.zend.com/manual/2.2/en/modules/zend.mvc.examples.html#returning-Early

With that, any requisition to seu-dominio/chamado/get will return your database data in JSON format.

2º) Javascript for Popular Table

Now what we need to do is create the javascript function that populates your table dynamically using the JSON data from the action we prepared in the previous step. Let’s use jQuery to make our life easier:

<div class="myTable table-responsive">
    <table id="tbl-chamados" class="table table-hover">
        <thead>
        <tr>
            <th></th>
            <th class="text-center">N. Chamado</th>
            <th class="text-center">Computador</th>
            <th class="text-center">Sala de Aula</th>
            <th class="text-center">Criado em</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>
    function populateTable(){
        $.ajax({
            url: "<?php echo $this->url('chamados-get'); ?>",
            success: function(data){
                // Limpar tabela
                $('#tbl-chamados tbody').html("");

                // Popular a tabela com os dados vindos da requisição dinamica
                var dataJson = JSON.parse(data);
                var linha = 1;
                $.each(dataJson, function(){
                    $('<tr>').append(
                        $('<td>').text(linha++),
                        $('<td>').text(this['num_chamado']),
                        $('<td>').text(this['computador']),
                        $('<td>').text(this['sala']),
                        $('<td>').text(this['criadoem'])
                    ).appendTo('#tbl-chamados tbody');
                });
            }
        });
    }

    $(function(){
        setInterval(populateTable, 1000);
    });
</script>

table HTML is then left with only thead filled, we leave the tbody empty because who will insert the tr inside it will be Javascript. Javascript then comes just below, inside the script tag. It is composed of a function called populateTable() and for a call $(function(){..}) which is a shortcut to the $(document).ready(...).

The function populateTable() does the job of making a dynamic request for the route url chamados-get and bring your return. This return is a string JSON, which must be converted into objeto JSON and then itinerada. In this iteration she will create the tr table, with the columns and their values and then plays the tr into the tbody table.

The call of $(function(){..}) only defines a setInterval to call the popular table function every second (1000ms).

That’s basically it. Of course there may be a lot of improvements in this process, but at first you can start.