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 ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By EstilloWeb
      Está ocorrendo um erro em meu comando MySQL na ordenação dos resultados. O código é o seguinte:
      $sql_imos4 = "Select DISTINCT imovel FROM propostas ORDER BY id DESC"; $exe_imos4 = mysqli_query($conexao, $sql_imos4); O objetivo é listar uma única vez um imóvel com proposta, mesmo que haja dois ou mais registros, sempre ordenado mais recente. O que está ocorrendo quando o imóvel tem mais de uma proposta cadastrada, a ordenação está sendo feita pelo ID da proposta mais antiga.
      Exemplo:
      imóvel ref. 4528 tem duas propostas, sendo que a mais recente tem o ID 235 porém aparece na listagem abaixo do imóvel ref. 4325, que tem uma só proposta e ID 230.
      O resultado deveria estar invertido neste caso.
      Onde pode estar o erro? Agradeço a ajuda.
    • By Herberto Silva
      Olá
      Estou com uma dificuldade em elaborar um select de forma que verifique um campo data, (com uma atribuição de uma variável $current_date = date('Y-m-d');) caso exista essa data o select posicione-se no registo, neste caso no registo que contém a data igual a $current_date, mantendo os restantes registos da tabela disponíveis
×

Important Information

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