1

Como posso obter o valor passado pelo aria-controls do Bootstrap tab panel para comparar a partir de um Array de dados para trazer apenas os produtos da categoria em questão.

Por onde começar o JavaScript? Sendo que esse valor obtido por JavaScript precisará ser convertido em uma variável Php para fazer a comparação na condição IF. Para verificar seria Algo como:

    foreach ( $ArrayProdutos as $key => $value ) :
        $ArraySliceProdutos = explode( '__', $ArrayProdutos[$key] );

        if (  $aria_controls_valor == $ArraySliceProdutos['categoria']    ) :

             echo"
                <div role='tabpanel' class='tab-pane' id='$aria_controls_valor' aria-labelledby='$aria_controls_valor-tab'>
                    <h4> $ArraySliceProdutos['titulos']</a></h4>
                </div>
            ";

       endif;
    endforeach;

Para ilustrar melhor, clique em Executar para ver o resultado :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li role="presentation" class="active"> <a title="Todos os produtos" href="#todos" aria-controls="todos" role="tab" data-toggle="tab">Todos</a></li>
    <li role="presentation"> <a title="" href="#categoria1" aria-controls="categoria1" data-toggle="tab" tabindex="0">Categoria 1</a>
      <li role="presentation"> <a title="" href="#categoria2" aria-controls="categoria2" data-toggle="tab" tabindex="0">Categoria 2</a>
      </li>
  </ul>
</div>

<div class="tab-content">

  <div role="tabpanel" class="tab-pane active" id="todos" aria-labelledby="todos-tab">
    <h4> Todos os produtos</a>
    </h4>
  </div>

  <div role="tabpanel" class="tab-pane" id="categoria1" aria-labelledby="categoria1-tab">
    <h4> Produtos da categoria 2</a>
    </h4>
  </div>

  <div role="tabpanel" class="tab-pane" id="categoria2" aria-labelledby="categoria2-tab">
    <h4> Produtos da categoria 3</a>
    </h4>
  </div>
</div>
</div>

1 Resposta 1

1

Pegar o aria-controls:

$('li[role="presentation"] a').click(function(){
    var aria_controls=$(this).attr('aria-controls');
    //aqui você faz o ajax para enviar o valor para uma pagina php que fará o restante
    $.ajax({
        type:'POST',
        url:'SEU_ARQUIVO.php',//arquivo onde vai ser executado a busca dos produtos
        data:{'aria_controls':aria_controls},//passa a variavel por POST para o arquivo php
        success:function(callback){
            //função de retorno para exibir os produtos
        }
    });
});

Para passar apenas a variavél JavaScript para PHP:

<?php
    $aria_controls = "<script>document.write(aria_controls)</script>";
?>
13
  • 1
    não quero usar ajax uma vez que já tenho o Array de produtos pronto, só queria pegar o valor que foi clicado e passar para uma variável PHP para ser comparada no Array, mesmo assim obrigado pela resposta. (a não ser que essa seja a única maneira hehe)
    – denis
    4/05/2018 às 18:47
  • 1
    agora vc só precisa fazer a comparação
    – Wees Smith
    4/05/2018 às 18:50
  • 1
    Estou tentando ainda não deu certo. Eu removi o ajax do script e utilizei o resto é isso mesmo né? Mas ao clicar não imprime nada na variável $aria_controls !
    – denis
    4/05/2018 às 19:48
  • 1
    Entendi, faz sentido mas o Bootstrap faz isso sem atualizar a página então deve ter como de algum jeito !
    – denis
    4/05/2018 às 20:37
  • 1
    Caso eu use o ajax pra imprimir os resultados seria como <div id="?"></div> ?
    – denis
    4/05/2018 às 20:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .