Início > Ajax, Desenvolvimento, jQuery, JS > Criando combos com JSON

Criando combos com JSON

Este post explicará o passo a passo necessário para criar os filtros dentro dos métodos do JS via JSON .

Para criar Combos utilizando DOM será necessário:

  • no HTML:

1. Criar div com um id,  que mais tarde será passado ao JS como sendo o <select></select>


 <div id="divPeuNivelModalidade"></div>

  • no JS:

1. No método JS que carrega as combos fazer uma requisição Ajax, importante usar async: false (para saber mais )  e chamar o método que monta a  combo. Confira o exemplo a seguir:

loadFiltros:function(){
    jQuery.ajax({
       type: "POST",
       url:"../modulos/Escola_e_Universidade/Execute.php?action=ProjetoInscritoControl",
       data: "status=3",
       async: false,
       success: function(data){
           jQuery("#boxFiltros").html(data);
           jQuery("#tabs").tabs();
      },
      error: function(){alert("Houve um erro ao carregar os filtros.");}
 });
 projetoInscrito.makeComboNivelModalidade();
 projetoInscrito.makeComboArea();
 }

2. No método JS que cria  a combo, fazer requisição Ajax com dataType: json e também usar async: false, o sucsses terá um método recebendo json como parametro. Dentro do sucsses haverá os selects e options, o “foreach” do json e a chamada do onChange.


makeComboNivelModalidade: function(){
  jQuery.ajax({
     type: "POST",
     url:"../modulos/Escola_e_Universidade/Execute.php?action=DataControl",
     data: "status=1",
     dataType: "json",
     async:false,
     success: function(json){
        var select = jQuery.SELECT({'id':'selPeuNivelModalidade', 'name':'selPeuNivelModalidade'});
        jQuery("#divPeuNivelModalidade").html(select);

        var option = jQuery.OPTION({'value': '0'}, 'Selecione...');
        //value '0' corresponde a 'selecione'
        jQuery("#selPeuNivelModalidade").append(option);

        var option = jQuery.OPTION({'value': '-1'}, 'Selecionar Todos');
        //value '-1' corresponde a 'selecionar todos'
        jQuery("#selPeuNivelModalidade").append(option);

        json.each(function(e){
           var option = jQuery.OPTION({'value': e[0]}, e[1]);
           jQuery("#selPeuNivelModalidade").append(option);
        });

        jQuery("#selPeuNivelModalidade").change(function(){
           projetoInscrito.onChangeComboNivelModalidade();
        });
      },
      error: function(){alert("Houve um erro ao carregar a Combo de Níveis e Modalidades.");}
    });
 }

3. O método onChance chama o método que monta a próxima combo (se houver), e contém as URLs com o PK do campo desejado + a id usada para o select.


onChangeComboNivelModalidade: function(){
projetoInscrito.makeComboArea();

urlSearch += "&COD_MODALIDADE=" + jQuery("#selPeuNivelModalidade").attr("value");
urlSearch += "&COD_AREA=" + jQuery("#selPeuArea").attr("value");

}

  • na CONTROL

1. Método que contém a query, faz as consultas ao banco e retorna um array_to_json.


function getJSONNivelModalidade() {

  loadDataObject("Aprender","PEU_MODALIDADE_AREA");
  $daoModalidadeArea = new DO_PEU_MODALIDADE_AREA();
  $daoModalidadeArea->whereAdd("NIVEL = 1");
  $daoModalidadeArea->find();

  while($daoModalidadeArea->fetch()) {
     $response[]= array($daoModalidadeArea->PKPEU_MODALIDADE_AREA, $daoModalidadeArea->DESCRICAO);
  }

  echo array_to_json($response);

 }

Os exemplos foram tirados do portal -> módulos -> Escola e Universidade.

Por enquanto é isso… até a próxima!

Bruna

  1. Ainda sem comentários.
  1. No trackbacks yet.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: