1
resposta

Como buscar uma var do javascript para o jstl

Tenho um select que tem vários options, eu quero exibir um calendário de acordo com o valor do options, então eu criei um script e declarei uma var que busca o valor do select, como faço agora para colocar ele na condição do <c:if teste=""? por Exemplo:

<div>
                        <label>Procedimento</label>
                        <select name="procedimento.id" class="form-control" id="proced">
                            <c:forEach items="${procedimentos}" var="procedimento">
                                <option value="${procedimento.id}">${procedimento.id} - ${procedimento.descricao} </option>
                            </c:forEach>
                        </select> 
                    </div>
                    <div class="form-group">
                        <label for="dtp_input2">Data Atendimento</label>
                        <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd ">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <input type="hidden" id="dtp_input2" value="" name="dataAtendimento" /><br/>
                    </div>

                    <script type="text/javascript">
                        var Proced = document.getElementById("proced").value;
                        console.log(Proced);
                    </script>

                    <c:if  test="${Proced == 2 }">
                    <script type="text/javascript" src="${resPath}/js/jquery-1.8.3.min.js" charset="UTF-8"></script>
                    <script type="text/javascript" src="${resPath}/js/bootstrap.min.js"></script>
                    <script type="text/javascript" src="${resPath}/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
                    <script type="text/javascript" src="${resPath}/js/locales/bootstrap-datetimepicker.pt-BR.js" charset="UTF-8"></script>
                    <script type="text/javascript">                    
                        $('.form_date').datetimepicker({
                            daysOfWeekDisabled: [0],                                
                            language: 'pt-BR',
                            weekStart: 0,
                            todayBtn: 1,
                            autoclose: 1,
                            todayHighlight: 1,
                            startView: 2,
                            minView: 2,
                            forceParse: 0
                        });
                    </script>                
                    </c:if>
1 resposta

Amigo, após a página ser carregada no navegador, a mesma não poderá carregar novos scripts, portanto não poderá ser utilizada a abordagem condicional de acordo com seu select utilizando as tags JSTL. Em vez disso, você poderá utilizar outro script que vai resgatar a opção selecionada e de acordo com ela, fazer a chamada de outros scripts específicos para aquela opção.

O código deverá seguir este raciocínio:

<html>
  <body>
 <select onchange="defineCalendar(this)">
  <option value="1">Calendário 1</option>
  <option value="2">Calendário 2</option>
 </select>

 <input type="text" onfocus="showCalendar()" />

 <script type="text/javascript">
  // Variável que controla qual calendário eu quero usar
  var calendarToUse = 1;

  // Função que define o calendário que eu quero usar conforme escolha do select
  function defineCalendar(sel) {
   calendarToUse = sel.value;
        };

  // Função que irá exibir o calendário desejado quando o foco cair no input de data
  function showCalendar() {
   if (calendarToUse == 1) {
     renderCalendar(); // Esta function estaria definida no script calendar1.js
   } else {
     displayCalendar(); // Esta function estaria definida no script calendar2.js
   }
  }
 </script>  

 <!-- Todos os scripts que a página vai usar são carregados quando a mesma é renderizada no browser -->
 <!-- Tags JSTL como c.if são resolvidas pelo servidor antes de gerar o HTML final, portanto 
      usar um c.if para decidir quais scripts .js serão carregados não vai funcionar já que 
   a execução ocorre no servidor, antes da renderização do HTML final, ou seja, no HTML
   resultante, só seriam carregados os scripts dentro da condição do c.if que era verdadeira
   no momento que o servidor estava processando o JSP -->
 <script type="text/javascript" src="scripts/calendar1.js"></script> 
 <script type="text/javascript" src="scripts/calendar2.js"></script> 
  </body>
</html>

Espero ter ajudado.

Abraços!