Jump to content
ghlevin

Site responsivo - Problemas com SELECT e INPUT

Recommended Posts

Estou fazendo modificações no site de um cliente, tornando-o responsivo. Tive que fazer várias mudanças de layout que me foram enviadas por um fornecedor e, por causa dessas mudanças, algumas funções Javascript e PHP que eu tinha não funcionam no layout novo.

Em uma delas, eu tenho dois filtros de data e local (unidade ou empresa). O de data é uma INPUT e o de unidades é um SELECT. Vou colocar o código da view abaixo:

<form class="rd-mailform text-left" data-form-output="form-output-global" data-form-type="contact" method="post" novalidate="novalidate">
        <p class="mobile-hide">Selecione abaixo os par&acirc;metros para visualiza&ccedil;&atilde;o.&nbsp;Se desejar salvar,&nbsp;enviar por e-mail ou imprimir,&nbsp;clique em&nbsp;'Gerar PDF'&nbsp;ou&nbsp;'Gerar Excel'.</p>
        <!--<div class="range range-xs-center" style="margin: 0px !important;">-->
          <div class="cell-sm-6">
            <div class="form-group form-group-label-outside">
              <label class="form-label form-label-outside text-dark rd-input-label" for="data-relatorio">Data</label>
              <input class="form-control form-control-last-child" id="data-relatorio" type="text" name="first-name" >
            </div>
          </div>
          <div class="cell-sm-6 offset-top-20 offset-sm-top-0">
            <div class="form-group form-group-label-outside">
              <label class="form-label form-label-outside text-dark rd-input-label" for="comboUnidades">
                Unidade
              </label>
              <select id="comboUnidades" class="form-control select2-multiple" data-minimum-results-for-search="Infinity">
              </select>
            </div>
          </div>
          <div style="width: 100%">
            <div style="position: relative; float: left; padding: 5px" onclick="montaPDF()"><a class="btn btn-ellipse btn-java" href="#">GERAR PDF</a></div>
            <div style="position: relative; float: left; padding: 5px" onclick="montaExcel()" class="mobile-hide"><a class="btn btn-ellipse btn-java" href="#">GERAR EXCEL</a></div>
          </div>

      </form>

Abaixo parte do código do arquivo JS que mostra como eram carregados esses filtros. O de data usa originalmente uma função datepicker, que não funciona no layout atual. E o das unidades usa uma função AJAX pra colocar todas as opções que vem do banco MySQL do site dentro do select comboUnidades:

$(document).ready(function(){
showLoading();

var d = new Date();
d.setDate(d.getDate() - 1);
$('#data-relatorio').datepicker({ 
    dateFormat: "dd/mm/yy",
    maxDate: d
});

$("#data-relatorio").datepicker('setDate',d);

var param = location.href.split("?")[1];

if(typeof param != "undefined" ) {
    var unidade = param.split('=')[1];
}

$.ajax({
      async: false,
      url: '[:raiz]acompanhamentoDiario/getUnidades',
      dataType: 'json',       
      success: function(data) {
          if (data.length > 0){
              var retorno = "";
              for(var i = 0;i < data.length; i++){
                  retorno += "<option value='"+data[i]['id']+"'>"+data[i]['newnome']+"</option>";
              }
              $('#comboUnidades').html(retorno);

              if(typeof param != "undefined" ) {
                  $('#comboUnidades option[value='+unidade+']').attr('selected', 'selected');
                  $('#comboUnidades').trigger('change');
              }
          } else {

          }
      }
});
$('#data-relatorio').change(function(){
    montaTabela();
});

$('#comboUnidades').change(function(){
    montaTabela();
});

var d = new Date();

$('#divTabela').hide();

montaTabela();

hideLoading();

});

Essa função chamada no AJAX se encontra num arquivo de Controller:

public function getUnidades() {
    $acompanhamento = new AcompanhamentoDiario();
    $retorno = $acompanhamento->getUnidadesUsuario();
    echo json_encode($retorno);
}

Por sua vez, essa função do controller chama uma função em PHP que se encontra num arquivo da minha pasta Model do site. Ele traz as unidades do select dependendo do login do usuário:

public function getUnidadesUsuario() {        
    $idUser = Login::retornaIdUser();   
    $perfilAcesso =  Login::retornaPerfilAcesso();

    if(($perfilAcesso == 1) || ($perfilAcesso == 6)) { // Colocado o perfil 6 do Usuário de Demonstração
        /* se perfil de usuairo = 1*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " join usuario_unidade uu on (uu.id_unidade = u.id)";
        $sql .= " WHERE u.ind_unidade_ativa = 1 AND u.ind_predio_novo = 0";
        $sql .= " and uu.id_usuario = $idUser and lower(uu.ind_tipo_investidor) != 'c' ORDER BY newnome ASC";
    } elseif($perfilAcesso == 2) {
        /* se perfil de usuairo = 2*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " join administrador adm on (adm.id_unidade = u.id)";
        $sql .= " WHERE u.ind_predio_novo = 0";
        $sql .= " and adm.id_usuario = $idUser and adm.id_usuario NOT IN (3124,4378)";
        $sql .= " ORDER BY newnome ASC";
    } else {
        /* se perfil de usuario = 3*/
        $sql = "SELECT u.*,concat(e.sigla,' - ',u.nome) as newnome";
        $sql .= " FROM unidade u INNER JOIN cidade c ON u.CIDADE = c.id INNER JOIN estado e ON u.ESTADO = e.id";
        $sql .= " WHERE u.ind_predio_novo = 0 ORDER BY newnome ASC";
    }

    $res = parent::executaQuery($sql);

    return $res;
}

A função montaTabela(), por ora, ainda não quero modificar, por isso não vou mostrar como ela é. Ela é executada na página dependendo da mudança dos filtros. Por ora, eu só queria saber como "popular" o select comboUnidades e como funcionar o filtro de data data-relatorio de forma semelhante ao datePicker.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Carcleo
      Parece brincadeira, mas estou fazem 3 dias tentando instalar a cURL e não consigo
      Windows 10 Pro Apache 2.4 Php 7.3.4 MySQL 8.0.15.0 Tentativas:
      1) libeay32.dll, msvcr71.dll, ssleay32.dll e php_curl.dll coladas na pasta system32 e adicionadas ao PATH do Windows 2) Baixei a biblioteca cURL do site https://curl.haxx.se/, cliquei em curl.exe e nada acontece. 3) ;extension=CURL e ;extension=php_curl.dll descomentadas no php.ini (Embora a linha ;extension=php_curl.dll não exista nessa versão do PHP eu inserí ela na lista) 4) Confirmado de que o php.ini é o correto.  Agora só faltam 2 tentativas
       
      A) Apelar para a fé.
      B) Instalar Apache e PHP antigos pois lembro-me que usei em um projeto fazem uns anos e funcionava de boa.
           Mas não gostara de voltar no tempo.
       
      Claro que essas 2 foram só para descontrair!
       
      Alguém me ajuda? Ode estou errando?
    • By terra
      Olá,
       
      Preciso pegar o valor desse select
       
       
       aqui nessa query
       
       
      Agradeço qualquer ajuda
    • By violin101
      Caros amigos, saudações...
       
      Gostaria de tirar uma dúvida com os amigos se tem a possibilidade de fazer e como fazer.
       
      A pasta MODELS tem como fazer separado como a pasta CONTROLLERS, por exemplo:
       
      a pasta controller consigo fazer assim: PASTA e SUBPASTAS.
       
      controller
      |__ Admin
      |_____ Estoque
      |_______ Financeiro
       
      na pasta Models, fica tudo junto as funções, como por exemplo:
      admin_model.php
      caixa_model.php
      vendas_model.php
      e etc
       
      na Models, tem como fazer como na pasta controller, assim:
      |__ Admin
           |__ admin_model.php
      |_____ Estoque
                 |__ estoque_model.php
      |_______ Financeiro
                    |__ caixa_model.php
       
      para chamar uma função no controller, faço desta forma: 
      <?php $this->load->model('categorias_model'); $this->data['categorias'] = $this->categorias_model->getActive('categorias', 'categorias.idCategorias,categorias.categoria'); ?>  
      Conforme minha dúvida acima, como seria o caminho para chamar esta função:   
      $this->load->model('categorias_model');
       
       
      Grato,
       
      Cesar
    • By chuxi
      <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
    • By gbilibio
      Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do
      navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:
       
      Página HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
          <head>
              <meta charset="UTF-8"/>
              <title>Aula 07</title>
              <link rel="stylesheet"
              type="text/css" href="style.css"/>
              <meta name="viewport"
              content="width=device-width, 
              initial-scale=1.0"/>
          </head>
          <body>
              <header>
                  <div class="contatos">
                      <div class="cont">
                          <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
                      </div>
                  </div>
              </header>
              <div class="topo">
                  <div class="contatos2">
                      <div class="cont2">
                          <img  align="right" src="logo.png">
                      </div>
                      <div class="cont2">
                          <p> HOME </p>
                      </div>
                      <div class="cont2">
                          <p> EMPRESA </p>
                      </div>
                      <div class="cont2">
                          <p> SERVIÇOS </p>
                      </div>
                      <div class="cont2">
                          <p> HOSPEDAGEM </p>
                      </div>
                      <div class="cont2">
                          <p> PORTIFÓLIO </p>
                      </div>
                      <div class="cont2">
                          <p> CONTATO </p>
                      </div>
                  </div>
              </div>
              <div class="banner">
              
              </div>
              <div class="banner2">
              
                  <div class="banneresq">
                  <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
                  <div class="linhatexto">
                  
                  </div>
                  <p> 
                  Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
                  no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
                  são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
                  Bem para Atender Sempre.<br>
                  </p>
                  <div class="botaoentrar" >
                  <h1>Entrar</h1>
                  </div>
                  </div>
                  
                  <div class="bannerdir">
                  
                  <img src="Imagens/bannerdireita2.jpg" width="320" height="280">
                  
                  </div>
              </div>
              <div class="banner3">
                  
                  <div class="caixamaior">
                      <div class="caixa1">
                          <img src="Imagens/box1.jpeg" width="250" height="200">
                              <div align="center">
                                  <p> CRIAÇÃO DE SITES </p>
                              </div>
                              <div class="caixa1texto">
                                  <h1> 
                                  Temos desde sites simples de 1 página,<br>
                                  modelos padrões e personalizados<br>
                                  com páginas internas. Confira nossos<br>
                                  modelos ou solicite um.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa2">
                          <img src="Imagens/box2.jpg" width="250" height="200">
                              <div align="center">
                                  <p> HOSPEDAGEM DE SITES </p>
                              </div>
                              <div class="caixa2texto">
                                  <h1>
                                  Hospede um site em um servidor<br>
                                  confiável e de qualidade, que sempre<br>
                                  lhe dê suporte necessário. Deixe seu<br>
                                  site 100% online.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa3">
                          <img src="Imagens/box3.jpg" width="250" height="200">
                              <div align="center">
                                  <p> MANUTENÇÃO DE SITES </p>
                              </div>
                              <div class="caixa3texto">
                                  <h1>
                                  Mantenha seu site sempre atualizado,<br>
                                  passando credibilidade aos seus<br>
                                  clientes e ganhando ponto com o<br>
                                  Google e outros buscadores.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                          
                      </div>
                      
                  </div>
              
              </div>
          </body>
      </html>
       
      PÁGINA CSS
       
      @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
      @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
      @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
      @import url('https://fonts.googleapis.com/css?family=Karla:400,700');
      header{
          width: 100%;
          height: auto;
          overflow: hidden;
          background-color: #023180;
          margin: auto;
      }
      body{
          margin: 0px;
      }
      .contatos{
          width: 100%;
          max-width: 900px;
          height: auto;
          overflow: hidden;
          margin: auto;
      }
      .cont{
          width: 33.3%;
          height: 40px;
          float: left;
      }
      .cont p{
          color:#ffffff;
          font-family: 'Muli';
          font-weight: 400;
      }
      .topo{
          width:80%;
          height:120px;
          float:right;
          
      }
      .cont2{
          font-family:'Cabin';
          color:#023180;
          width:13.3%;
          height:40px;
          float:left;
          
      }
      .cont2 p{
          font-size:15px;
          margin-left:100px;
          margin-top:30px;
          
      }
      .logo{
          margin-left:350px;
          margin-top:10px;
      }
      .banner{
          width:100%;
          height:500px;
          background:url(Imagens/banner.jpg);
          float:left;
          margin-top:30px;
      }
      .banner3{
          width:100%;
          height:500px;
          background-color:#083875;
          float:left;
          margin-top:50px;
          vertical-align: middle;
      }

      .caixamaior{
          width:100%;
          height:auto;
          
      }
      .caixamaior p{
          color:#FFFFFF;
          font-family:'Scada';
          
      }
      .caixa1texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa2texto h1{    
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa3texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .botaosaibamais{
          
          width:150px;
          height:50px;
          background-color:#21588E;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
          margin-left:45px;
          margin-top:20px;
      }
      .botaosaibamais h1{
          font-family:'Scada';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;    
      }
      .caixa1{
          margin-left:15%;
          margin-top:5%;
          float:left;    
      }
      .caixa2{
          
          margin-left:10%;
          margin-top:5%;
          float:left;    
      }
      .caixa3{    
          margin-left:10%;
          float:left;
          margin-top:5%;
      }
      .banneresq{
          float:left;
          margin-left:120px;
          margin-top:65px;
      }
      .banneresq h1{
          font-family: 'Oxygen';
      }
      .banneresq p{
          color:#3F3B3B;
          font-family: 'Oxygen';
          font-size:16px;
      }
      .linhatexto{
          width:75px;
          height:4px;
          background-color:#A11606;
          margin-top:-5px;
      }
      .botaoentrar{
          width:150px;
          height:50px;
          background-color:#800000;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
      }
      .botaoentrar h1{
          font-family:'Oxygen';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;
      }
      .bannerdir{
          float:left;
          margin-top:60px;
          margin-left:70px;    
      }
      @media only screen and (max-width: 600px){
          .cont{
              width: 100%;
          }
          .cont p{
              text-align: center;
          }
          
          .banner{
              width:100%;
          
          }
      }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.