Parte II

Chegamos a parte dois do nosso mini-tutorial.

Os pré-requisitos para essa parte são :

(1) Ter acompanhado os exemplos da parte 1 : [url]http://www.pctoledo.com.br/forum/viewtopic.php?f=43&t=24586[/url]
(2) Saber o que é JSON e as funções do Harbour para manipulação (encode/decode)
(3) Entender os métodos POST/GET do protocolo HTTP
(4) Básico de JQuery (Básico mesmo)


Se vc não souber, mesmo assim dá para acompanhar, eu acho... 

O objetivo dessa etapa é criar um grid usando AJAX e com paginação.

Nada de mod_harbour será usado nessa primeira etapa. Iremos somente criar um modelo para as etapas posteriores.

**

A ideia é essa :


HTML5 + JQuery  ------AJAX--------> arquivo.json
(VIEW)                              (DATA)


São dois arquivos, o principal (contendo a view) e o segundo só com o json.
Nas etapas seguintes nós iremos gerar o arquivo json com mod_harbour.

A equipe do mod_harbour (indiretamente) indica uma biblioteca para
geração de grids que pode ser baixada gratuitamente em [url]https://datatables.net/[/url]

Nós não iremos usar essa biblioteca. As vezes baixamos coisa demais que não vamos usar.
Nesses exemplos a seguir, com pouco código, já dá para ter um ótimo resultado.

**

O código json estático é bem simples :
[code]

[
   { "id":9, "nome":"João Marcelo" },
   { "id":1, "nome":"Jefferson" },
   { "id":2, "nome":"Daniel" }
]

[/code]

A leitura desse arquivo é bem simples, primeiro vamos criar um "id" no html para informar
o ponto onde os dados serão escritos. Vou chamar esse "id" de "registros"

[code]
<table id="registros" class="table table-striped">
[/code]

Agora o código Javascript (JQuery) que vai pegar o JSON e colocar na tabela.
[code]
 <script>
   $( document ).ready( function(){

		$.ajax({ 
                   type: 'GET',
                   url: "dados.json",
                   async: true,        
                   dataType: 'json',
                   success: function( data ){
                       $.each( data, function( key, val ) {
                         $('<tr>').html( "<td>" + val.id + "</td>" +
                                         "<td>" + val.nome + "</td>" ).appendTo("#registros tbody");
                         });  
                  }  
        }); // ajax


    }); // $( document ).ready
  </script>
[/code]

Rápidos comentários sobre o código acima para quem não trabalhou com JQuery ainda.

(1) $( document ).ready( // Aguarda o documento carregar para executar o código 
(2) $.ajax // Inicio da chamada ajax 
(3) type : 'GET' // Tipo de método usado (não faz diferença porque não tem dados para enviar)
(4) dataType: 'json' // O tipo de dado que será convertido.
(5) url // Endereço onde eu devo pegar os dados (aceita endereços relativos)
(6) success // Bloco de código que será executado em caso de sucesso (a página existe)

Essa função chamada por success é simples, basta lembrar da função de usuário do DBEDIT. É a mesma ideia.
O parâmetro data é o valor lido do arquivo já devidamente convertido para JSON (eu disse que era um JSON em dataType)

Esse $.each é um laço disfarçado de função que vai percorrer todos os elementos do JSON (agora devidamente convertido para um hash data).
E para cada elemento vai chamar um bloco de código function( key , val )

* o segundo parâmetro "val" é o que interessa. Ele já contém a chave e o valor de cada hash. Tudo automático. 
* o método appendTo coloca os dados na marca que eu criei no início.

Você pode achar que eu compliquei com o AJAX, mas é até mais fácil.

Na próxima etapa vamos gerar o dados.json com mod_harbour.







