2

Tenho um formulário em bootstrap e validado certo, mas eu preciso que ao selecionar uma data no datepicker, ele carregue automaticamente um select com JSON, e tem mais 3 selects precisam ser preenchidos após isso, e todos um dependente do outro, ex:

Escolhi a data 17/05/2015, ele abre uma informação no select abaixo, que abre outra informação após selecionado, e assim por diante.

Por padrão do backend preciso fazer em JSON e Ajax.

Será que alguém pode me ajudar nisso ou me mostrar a melhor forma de eu fazer?

Fiddle: http://jsfiddle.net/rubensoul/2671hn9n

meu codigo html está assim:

        <script type="text/javascript">

          /** O dia que gostaria de desabilitar no calendário */
          var disableddates = ["5-6-2015", "7-7-2015", "8-8-2015", "13-7-2015"];

          function DisableSpecificDates(date) {


            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            // Formato da desabilitada dd-mm-yyyy 

            var currentdate =  d + '-' + (m + 1) + '-' + y ;

            // Vamos agora verificar se a data pertence a disableddates matriz
            for (var i = 0; i < disableddates.length; i++) {

              // Agora, verifique quais datas existem na matriz datas e ativa no calendário. 
              if ($.inArray(currentdate, disableddates) != -1 ) {
                  return [true];
              } else {
                  return [false];
              }

            }

            // No caso de a data não está presente na matriz deficientes , vamos agora verificar se é um fim de semana .
            // com a função noWeekends
            var weekenddate = $.datepicker.noWeekends(date);
            return weekenddate; 

          }


          $(function() {
            $( "#calendario" ).datepicker({
              beforeShowDay: DisableSpecificDates,
              minDate: 0,
              dateFormat: 'dd/mm/yy',
              //validação da data caso preenchimento errado ou vázio
              onSelect: function (calendario, inst) {
                $('#calendario').text(this.value);
                $('#defaultForm').bootstrapValidator('revalidateField', 'calendario');
              },
              // tradução do calendário
              dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
              dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
              dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
              monthNames: [  'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
              monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
              nextText: 'Próximo',
              prevText: 'Anterior'
            });
          });

$(document).ready(function(){
   $("#calendario").select(function(){
      $.ajax({
         type: "POST",
         url: "teste.php",
         data: {calendario: $("#calendario").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#regiao").html(options);
         }
      });
   });
});

        </script> 
        
        <script>
 $('#regiao').change(function(){ 
     $.ajax({
         type: "POST",
         url: "teste2.php",
         data: {regiao: $("#regiao").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#profissional").html(options);
         }
      });
   });


        </script> 
    <form id="defaultForm" action="lista-atendimento.html" method="POST">
      <div class="form-group">
        <label control-label>* Data da consulta:</label>
        <input id="calendario" type="text" class="date-picker form-control2" name="calendario" placeholder="Data da consulta" />
        <label for="calendario" class="input-group-addon2 btn" style="margin: -3px 0 0 -4px;"><span class="glyphicon glyphicon-calendar"></span> </label>

      </div>
      <div class="form-group">
        <label>* Região:</label>
        <select class="form-control2" name="regiao" id="regiao">
          <option>Selecione a Data</option>
        </select>
        
        
      </div>
      <div class="form-group">
        <label>* Profissional:</label>
        <select class="form-control2" name="profissional">
          <option>Selecione uma região</option>
        </select>
      </div>
      <div class="form-group">
        <label>* Horários Disponíveis:</label>
        <select class="form-control2" name="horarios">
          <option>17:00</option>
          <option>18:00</option>
        </select>
      </div>

no meu php json está assim:

<?php echo json_encode(array(
// id e nome
'0'=>'Selecione Região',
'1'=>'Barueri',
'2'=>'Paulista')); 


?>

Tenho um arquivo php com o dados json, primeiro eu preciso que ao clicar na data ele carregue os dados do json para o primeiro campo (região) com base nas informações da data, e ao clicar em região, popule o arquivo profissional, e em seguida popule a hora

4
  • Eu procurei em muitos foruns e não encontrei nada. Eu preciso é que ao clicar em uma data específica, carregue um select com json, entendeu? 17/06/2015 às 5:50
  • Para entender melhor, o código está aqui, após selecionar a data ai começa a popular os selects, um após selecionar o outro. jsfiddle.net/rubensoul/2671hn9n 17/06/2015 às 6:02
  • O teu jsFiddle está incompleto... Podes continuar este jsFiddle -> jsfiddle.net/bt7ksttx e explicar qual é a parte que não consegues fazer? é selecionar um select a partir das escolhas de outro ou a parte de comunicação com o servidor?
    – Sergio
    17/06/2015 às 7:51
  • Olá @Sergio , tenho um arquivo php com o dados json, primeiro eu preciso que ao clicar na data ele carregue os dados do json para o primeiro campo (região) com base nas informações da data, e ao clicar em região, popule o arquivo profissional, e em seguida popule a hora 17/06/2015 às 13:44

1 Resposta 1

2

no seu fiddle tem uma parte do javascript:

$(document).ready(function(){ // linha 61 no fiddle
  $("#calendario").select(function(){
    // seu código iniciado por $.ajax({
  }
}

Nesse trecho é adicionada a função para executar quando a data for selecionada, mas essa função deve ser colocada na opção onSelect do datepicker.

A função deve ser colocada em:

$( "#calendario" ).datepicker({ // linha 40 no fiddle
  // opções do .datepicker
  onSelect: function(){
    // seu código $.ajax()
  }
});

A função já existe, então você precisa mesclar o conteúdo. A chamada $('#calendario').text(this.value); não é necessária, talvez seja preciso verificar o retorno de .bootstrapValidator() antes de executar o AJAX.

Para modificar outros campos quando um <select> for alterado deve ser utilizado o evento onChange. Pessoalmente, recomendo utilizar .bind() para atribuir eventos:

$('#regiao').bind('change', function(){
// $('#regiao').change(function(){ // também funcionará
  // incluir AJAX igual da sua função anterior
})
3
  • Olá, @Sanção muito obrigado pela resposta, mas poderia me ajudar e me informar onde devo colocar exatamente o onSelect? eu adicionei após o ajax ({, e continuou não acessando.. Eu sou noob/iniciante em json/ajax ainda, pretendo aprimorar mais, mas esse job deu uma quebrada em mim..rsrs 17/06/2015 às 13:57
  • @RubensJunior editei a resposta 17/06/2015 às 14:53
  • Cara, foi muito útil, não teria conseguido!! Muito obrigado. Você consegue só me tirar mais uma dúvida? Eu uso o mesmo código ex.: $('#id').bind('change', function(){ // para todos os selects que precisam ser populados? ou tenho que mudar mais alguma coisa em cada um? 17/06/2015 às 15:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .