Get value passed by aria-controls (Bootstrap tab panel)

Navigation
1

How can I get the value passed by the aria-controls of the Bootstrap tab panel to compare from a data array to bring only the products of the category in question.

Where to start JavaScript ? This value obtained by JavaScript will need to be converted to a Php variable to make the comparison in the IF condition. To check it would look something like: 

    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;

To illustrate better, click on Run to see the result: 

<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><scriptsrc="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>
    
asked by anonymous 04.05.2018 / 20:21

1 answer

1

Paste 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
        }
    });
});

To pass only the%% variable from% to JavaScript : 

<?php
    $aria_controls = "<script>document.write(aria_controls)</script>";
?>
    
04.05.2018 / 20:36
Add and remove select with button Excesses and database connection