Preenchendo listas de opções e tabelas

Uma das atividades corriqueiras na programação web e mobile é o preenchimento de lista de opções e tabelas para o usuário poder escolher um item baseado numa pesquisa anterior.

A partir da versão 0.8.25 YeAPF disponibiliza o ycomm-dom.js que estende as capacidades do ycomm ao poder aplicar o resultado de uma pesquisa realizada com invoke (Ajax) ou crave (JSONP) a um select ou table.

Assim, por exemplo, se tenho um campo de pesquisa chamado ‘uf‘ e um select chamado ‘municipios‘ definidos da seguinte forma:

...
<input type=text size=4 id=nomeUF onchange='javascript:mostrarMunicipios()'>
<img src='lupa.png' onclick='javascript:mostrarMunicipios()'>
<select id=selMunicipios></select>
...

Posso ter uma função javascript que chame um serviço YeAPF para preencher a tabela da seguinte forma:

function mostrarMunicipios() {
  var nomeUF = document.getElementById('nomeUF').value;
  ycomm.invoke(
    'municipios',
    'pegarLista',
    {
      uf: nomeUF;
    },
    function (status, error, data) {
      ycomm.dom.fillElement('selMunicipios', data);
    }
  );
}

Para os desavisados de plantão: pegamos o nome da UF digitado pelo usuário e realizamos uma consulta com ele devolvendo o resultado sobre selMunicipios.

Já o serviço YeAPF (assumindo uma pasta de desenvolvimento já configurada) ficaria assim:

function qmuncipios($a)
{
  $useColNames = true;
  $countLimit=20;
  $ret='';

  extract(xq_extractValuesFromQuery());

  if ($a=='pegarLista')
    $ret="select id, uf, nomeMunicipio 
          from municipios 
          where uf like '$uf%' 
          order by uf, nomeMunicipio";

  xq_produceReturnLines($ret, $useColNames, $countLimit);
}

Isso feito, cada vez que o usuário modificar o campo uf no navegador, os municipios serão carregados no select.