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 Alberto Nascimento
      Estou tentando, mas não esta exibindo o registro...
       
      localizar.php
       
      <?php session_start(); $_SESSION["localizarfotografia"] = $_POST["codphoto"]; ?> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>EXIBIR FOTOGRAFIA PELO CÓDIGO INTERNO</title> <style type="text/css"> <!-- .Style6 {font-size: 13px} .auto-style20 { text-align: center; } .auto-style22 { background-color: #FEB624; } .auto-style23 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-small; text-align: center; } .auto-style25 { background-color: #FFCC66; } .auto-style26 { font-size: x-small; } .auto-style27 { font-size: x-small; text-align: center; } .auto-style28 { text-align: center; background-color: #FEB624; } --> </style> </head> <body style="margin-top: 50"> <body onload="form1.login.focus();"> <form id="form1" name="form1" method="post" action="pesquisaragora.php"> <div class="auto-style20"> <table align="center" cellpadding="0" cellspacing="0" class="auto-style23" style="width: 500"> <tr> <td class="auto-style20"> &nbsp;</td> </tr> <tr> <td class="auto-style22"> &nbsp;</td> </tr> <tr> <td class="auto-style25" style="height: 41px">Informe o código da FOTOGRAFIA abaixo</td> </tr> <tr> <td class="auto-style25"> <table align="center" style="width: 450"> <tr> <td class="auto-style27"><span class="Style6"> <label> <input name="codphoto" type="text" id="codphoto" style="width: 305px; height: 83px;" /></label></span></td> </tr> <tr> <td class="auto-style26"><strong> </strong></td> </tr> <tr> <td class="auto-style20"><span class="Style6"> <label> <input type="submit" name="Submit" value="LOCALIZAR PHOTO" /></label></span></td> </tr> </table> </td> </tr> <tr> <td class="auto-style25">&nbsp;</td> </tr> <tr> <td class="auto-style28"> &nbsp;</td> </tr> </table> <br></div> </form> </body> </html>  
      pesquisarphoto.php
       
      <?php include("config.php"); $codphoto = $_POST['codphoto']; $sql_logar = "SELECT * FROM photos WHERE codphoto = '$codphoto'"; $exe_logar = mysql_query($sql_logar) or die (mysql_error()); $fet_logar = mysql_fetch_assoc($exe_logar); $num_logar = mysql_num_rows($exe_logar); $codphoto = $fet_logar['codphoto']; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; if ($num_logar == 0){ echo "Desculpe, mas a foto não foi localizada."; echo "<br><a href='javascript:window.history.go(-1)'>Clique aqui e tente novamente.</a>"; } else{ session_start(); $_SESSION['codphoto'] = $codphoto; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; echo $exibir["codphoto"]; echo $exibir["nome"]; echo $exibir["cidade"]; echo $exibir["uf"]; } ?>  
       
       
       
       
       
       
       
       
    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

    • By rogerblower
      o Google me avisou de dois erros no meu site;
       
      Clickable elements too close together
      Text too small to read
       
      Na verificação constatei que o erro é;
       
      Fatal error:  Call to undefined function db_connect() in
       
      O php não me mostra esse erro mesmo habilitando os erros no php ini os arquivos de conexão que estou usando são;
       
      ini.php
      <?php define('DB_HOST', 'localhost'); define('DB_USER', 'user'); define('DB_PASS', 'senha'); define('DB_NAME', 'banco'); ini_set('display_errors', true); error_reporting(E_ALL); require_once 'functions.php'; functions.php
       
      <?php function db_connect() { $pdo = new PDO('mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8', DB_USER, DB_PASS); return $pdo; } function make_hash($str) { return sha1(md5($str)); } function isLoggedIn() { if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in']!== true) { return false; } return true; } O erro esta nesta linha
      <?php $pdo = db_connect(); $sql = $pdo->prepare("SELECT * FROM servicos "); $sql->execute(); while($row=$sql->fetch(PDO::FETCH_ASSOC)){ echo'<a href="servicos.php?id='.$row['id'].'">'.$row['servico'].'</a>'; } Incluo a conexão com banco na header.php e nas demais páginas não aparece o erro
      realmente não sei o que pode estar acontecendo.
      se alguém pode me ajudar?
       
      Obrigado
       
×

Important Information

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