[Resolvido]Trocar tab principal ao atualizar

3 de abril de 2018 17 respostas Resolvido

Gabrielxx12 3 de abril de 2018

Olá a todos, estou criando um sistema de demandas com 3 tabs dentro da página que busca essas demandas no banco de dados, porém ao clicar em qualquer página da segunda ou terceira tab, a página atualiza,troca-se a url para a referida página clicada mas retorna para primeira tab…Acredito que eu deva programar algo para mudar o meu active a cada tab clicada.
Abaixo o meu código para análise.Qualquer ajuda será bem vinda,desde já Obrigado !

<?php include_once ('../mining/header_footer/cabecalho.php'); include_once ("../mining/login/Verifica.php"); ?>

<div class="new">
    <div style="width: 25%;position: relative;left: 630px;top: 45px;color: white;">
       <h3> CONSULTAR DEMANDA </h3>
    </div>
    <div class="immage"></div>
</div>  
  <div id="col_4" >
  
     <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" id="col_4" class="col_4">
        <div style="background: #f2e8e8;width: 83%;float:right;text-shadow:none;color:black;display:inline-block;">
           <main>
              <input style="display:none;"id="tab1" type="radio" name="tabs" checked >
              <label for="tab1">Recentes</label> 
              <input style="display:none;"id="tab2" type="radio" name="tabs" >
              <label for="tab2">Não Finalizadas</label>
              <input style="display:none;"id="tab3" type="radio" name="tabs" >
              <label for="tab3">Finalizadas</label>
              <section id="content1" class="active">
                 <?php include('../mining/form_busca.php'); ?>
              </section>
              <section id="content2" >
                 <?php include('../mining/tratamento.php'); ?>
              </section>     
              <section id="content3" >
                 <?php include('../mining/demandasfinalizadas.php'); ?>
              </section>
           </main>
        </div>
        <div>
           <h5 style="text-align: center;border-bottom: 2px solid black;font-weight: bold;font-size: 25px;width:280px;padding-left: 5px;">PROCURAR DEMANDA</h5>
        </div>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:200px;padding-left: 5px;">Nº da demanda</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="num_demanda" id="numdemanda" type="number" placeholder="(OPCIONAL)Ex: 00000000"/></input>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:250px;padding-left: 5px;">Nome do demandante</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="demandante" id="nomedemandante" type="text" placeholder="(OPCIONAL)Digite o Nome"/></input>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:200px;padding-left: 5px;">Divisão</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="divisao" id="divisao" type="text" method="post" placeholder="(OPCIONAL)Digite a Divisão"/></input>
        <div style="width:16%;padding-top:5px;;width:100px;padding-left: 5px;">
           <h5 style="font-weight: bold">Assunto</h5>
        </div>
        <div style="width:16%;">
           <input style="width:100%" class="consultarform2" name="assunto" id="divisao" type="text" method="post" placeholder="(OPCIONAL)Digite o Assunto"/></input>
        </div>
        <div style="width:16%;padding-top:5px;;width:180px;padding-left: 5px;">
            <h5 style="font-weight: bold">Data de Registro</h5>
        </div>
                    
        <div style="width:16%;">
           <input style="width: 100%" class="consultarform2" name="data_registro" id="divisao" type="text" onkeyup="dataConta(this)" method="post" placeholder="(OPCIONAL)DD-MM-AAAA">
        <div style="width:6%;position: relative;left: 5px;">
           <button style="width:100px !important;" type="submit " name="btnEnviar" id="searchbutton" class="consultarform">
              <h5>Buscar</h5>
           </button>
        </div>
     </form>
  </div>

<?php include '../mining/header_footer/rodape.php'; ?>

17 Respostas

rodevops 3 de abr. de 2018

A resposta você mesmo já tem no seu código, usando PHP_SELF…

<section id="content1" <?=basename($_SERVER['PHP_SELF']) == 'form_busca.php' ? 'class="active"' : ''?>>
    <?php include('../mining/form_busca.php'); ?>
</section>

A lógica é a mesma para as outras sections…

O comando <?=?> é o mesmo que:

<?php echo ..?>

E já vem habilitado no php versão >= 5.4…

A função basename “limpa” a string de um path deixando apenas o nome do arquivo com extensão, por isso compare-o com a string fixa nome_do_arquivo.php

O if ternário: condição ? true : false

É o mesmo que usar if/else, nesse caso se a página atual estiver no PHP_SELF, ativa a tab, caso o contrário não define classe nenhuma (string vazia)…

Gabrielxx12 3 de abr. de 2018

Obrigado pela ajuda, mas sem êxito…
Esqueci de falar que todo esse código está denominado como “consultar.php”, para chama-lo no navegador eu digito “localhost/mining/consultar.php” e por exemplo, quando troco para página 2 na aba 1 a url que vem para referenciar a pagina 2 é “localhost/mining/consultar.php?pagina=2” ja se eu fizer o mesmo na aba 2 tenho o retorno de “localhost/mining/consultar.php?page=2” e assim por diante…
Acredito que não está ocorrendo nada devido a minha url nunca ser “localhost/mining/form_busca.php?pagina=2” ou “localhost/mining/tratamento.php?page=2”, me corrija se eu estiver errado por favor.

segue o código atualizado dps que implementei sua ajuda.

rodevops 3 de abr. de 2018

Falha sua ao explicar dessa forma então, subentende-se que cada aba chama uma página diferente… mas enfim… devo imaginar que cada página passada junto a url contém um número referente a aba é isso mesmo?

Se for, é só trocar por…

<?=$_GET['pagina'] == 2 ? 'class="active"' : ''?>

Veja se ajuda, sucesso!

Gabrielxx12 3 de abr. de 2018

Não não, digo aqui no site na hora de te mandar como resposta.Ele nao está saindo formatado como html
veja ai como está:

<?php include_once ('../mining/header_footer/cabecalho.php'); include_once ("../mining/login/Verifica.php"); ?>

<div class="new">
    <div style="width: 25%;position: relative;left: 630px;top: 45px;color: white;">
       <h3> CONSULTAR DEMANDA </h3>
    </div>
    <div class="immage"></div>
</div>  
  <div id="col_4" >
  
     <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" id="col_4" class="col_4">
        <div style="background: #f2e8e8;width: 83%;float:right;text-shadow:none;color:black;display:inline-block;">
           <main>
              <input style="display:none;"id="tab1" type="radio" name="tabs" checked >
              <label for="tab1">Recentes</label> 
              <input style="display:none;"id="tab2" type="radio" name="tabs" >
              <label for="tab2">Não Finalizadas</label>
              <input style="display:none;"id="tab3" type="radio" name="tabs" >
              <label for="tab3">Finalizadas</label>
              <section id="content1" <?=$_GET['pagina'] >=1 ? 'class="active"' : ''?>>
                 <?php include('../mining/form_busca.php'); ?>
              </section>
              <section id="content2" <?=$_GET['page'] >=1 ? 'class="active"' : ''?>>
                 <?php include('../mining/tratamento.php'); ?>
              </section>     
              <section id="content3" <?=basename($_SERVER['PHP_SELF'])== 'finalizadas.php' ? 'class="active"' : ''?>>
                 <?php include('../mining/demandasfinalizadas.php'); ?>
              </section>
           </main>
        </div>
        <div>
           <h5 style="text-align: center;border-bottom: 2px solid black;font-weight: bold;font-size: 25px;width:280px;padding-left: 5px;">PROCURAR DEMANDA</h5>
        </div>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:200px;padding-left: 5px;">Nº da demanda</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="num_demanda" id="numdemanda" type="number" placeholder="(OPCIONAL)Ex: 00000000"/></input>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:250px;padding-left: 5px;">Nome do demandante</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="demandante" id="nomedemandante" type="text" placeholder="(OPCIONAL)Digite o Nome"/></input>
        <div class="consultarform">
           <h5 style="font-weight: bold;width:200px;padding-left: 5px;">Divisão</h5>
        </div>
        <input style="width:16%" class="consultarform2" name="divisao" id="divisao" type="text" method="post" placeholder="(OPCIONAL)Digite a Divisão"/></input>
        <div style="width:16%;padding-top:5px;;width:100px;padding-left: 5px;">
           <h5 style="font-weight: bold">Assunto</h5>
        </div>
        <div style="width:16%;">
           <input style="width:100%" class="consultarform2" name="assunto" id="divisao" type="text" method="post" placeholder="(OPCIONAL)Digite o Assunto"/></input>
        </div>
        <div style="width:16%;padding-top:5px;;width:180px;padding-left: 5px;">
            <h5 style="font-weight: bold">Data de Registro</h5>
        </div>
                    
        <div style="width:16%;">
           <input style="width: 100%" class="consultarform2" name="data_registro" id="divisao" type="text" onkeyup="dataConta(this)" method="post" placeholder="(OPCIONAL)DD-MM-AAAA">
        <div style="width:6%;position: relative;left: 5px;">
           <button style="width:100px !important;" type="submit " name="btnEnviar" id="searchbutton" class="consultarform">
              <h5>Buscar</h5>
           </button>
        </div>
     </form>
  </div>

<?php include '../mining/header_footer/rodape.php'; ?>

rodevops 3 de abr. de 2018

Alguma mensagem de erro?

Gabrielxx12 3 de abr. de 2018

Agora deu certo, foi com a formatação.

rodevops 3 de abr. de 2018

Assim está ficando confuso, você precisa definir um parâmetro, não pode usar $_GET[‘page’], $_GET[‘pagina’] e $_SERVER[‘PHP_SELF’] ao mesmo tempo para a mesma coisa…

E também cuidado ao usar essa comparação…

$_GET['page'] >= 1...

Você está dizendo ao php, “quando a page for maior ou igual a 1 ativa o tab” e isso obviamente está errado! Pois tab2 e tab3 são maiores que 1 e 1 é igual a 1 compreende a lógica agora?

Vamos por partes, qual o trecho das tabs que você usa para mudar? seria esses radios buttons acima do section?

Gabrielxx12 3 de abr. de 2018

Sim, esses labels são minhas abas.As 3 pra ser exato

rodevops 3 de abr. de 2018

E como você está fazendo para quando clicar no radio recarregar a página?

Gabrielxx12 3 de abr. de 2018

A página “consultar.php” só é carregada após eu clicar em alguma pagina(1,2,3…n) dentro de alguma tab pois cada pagina clicada tem um “href”,por exemplo clicando na pagina 2 da tab1 tera um “href=localhost/mining/consultar.php?pagina=2”, entende ? se eu apenas ficar clicando nas tabs não irá atualizar a página consultar.php

Gabrielxx12 3 de abr. de 2018

Mais um exemplo,para você poder melhor me entender
aqui minha url está na page=3 que é uma url que apenas a TAB2 envia via href

e após atualizar foi retornado a TAB1 msm com a url sendo da TAB2

Gabrielxx12 3 de abr. de 2018

rodevops 3 de abr. de 2018

Independentemente de como seu código está, uma coisa precisa ficar clara, cada vez que você chamar url/consultar.php?pagina=2 ou pagina=3 ou pagina=1 etc… precisa passar a qual tab o conteudo pertence para isso você pode acrescentar no fim da url…

href=localhost/mining/consultar.php?pagina=2&tab=1 ou 
href=localhost/mining/consultar.php?pagina=3&tab=2 ou 
href=localhost/mining/consultar.php?pagina=100&tab=3 etc...

Isso em cada href que você encontrar no seu código que aponte para consultar.php entendido até aqui?

Feito isso, você pode usar o get assim…

<?=$_GET['tab'] == 1 ? 'class="active"' : ''?>

E assim para o tab == 2, tab == 3 etc pegou a lógica da coisa agora? sucesso ai!

Gabrielxx12 3 de abr. de 2018

Sim vou testar agr msm. Obrigado !

rodevops 3 de abr. de 2018

E volto a puxar sua orelha, há pontos no código que você usa:

localhost/mining/consultar.php?pagina=2

Outro você usa:

localhost/mining/consultar.php?page=3

Preste bem atenção! se ambas chaves tem o mesmo propósito, mantenha o mesmo nome para os dois!!! Seja coerente, isso é lógica!!! sucesso!

Gabrielxx12 3 de abr. de 2018

Fiz isso para separar as urls de acordo com sua determinada tab, pois só a tab1 me retorna “pagina” e apenas a tab2 me retorna "page"
eu tentei fazer deixando as duas tabs me retornando “pagina” mas quando clicava em alguma página,por exemplo página 2,a tab1 e tab2 trocavam igualmente para suas respectivas páginas 2.Entendeu ?

Solucao aceita

rodevops 3 de abr. de 2018 1 like

É como falei, isso é lógica…

Se você usa pagina e page para o mesmo propósito (dizer a qual tab pertence) não seria mais fácil apenas indicar a tab?

localhost/mining/consultar.php?tab=1 // digamos que essa esta na pagina 1
localhost/mining/consultar.php?tab=2 // essa outra na pagina 2
localhost/mining/consultar.php?tab=3 // essa outra na pagina 3

E assim em diante?

Bom, creio que você pegou a mecânica agora é contigo…

Criado 3 de abril de 2018

Ultima resposta 3 de abr. de 2018

Respostas 17

Participantes 2

17 Respostas

Topicos relacionados