Get value passed by Aria-Controls (Bootstrap tab panel)

Asked

Viewed 234 times

1

How can I get the value passed by Aria-Controls of Bootstrap tab panel to compare from an Array of data to bring only the products of the category in question.

Where to start the Javascript? This value being obtained by Javascript will need to be converted into a variable Php to make the comparison in condition IF. To check it would be 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 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>
<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>

php javascript jquery twitter-bootstrap

1 answer

1


Catch the 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 JavaScript for PHP:

<?php
    $aria_controls = "<script>document.write(aria_controls)</script>";
?>
  • 1

    I don’t want to use ajax since I already have the Product Array ready, I just wanted to take the value that was clicked and move to a PHP variable to be compared in the Array, but thanks for the answer. (unless that’s the only way hehe)

  • 1

    now you just need to make the comparison

  • 1

    I’m trying not yet worked out. I removed the ajax from the script and used the rest is that right? But clicking does not print anything in the $aria_controls variable !

  • In fact, I did some tests here, because I had not tested the code, pass the variable to php without updating the page, because PHP runs on the server and not in the browser. You would have to use ajax to bring the comparison and just print on the current page

  • 1

    I get it, it makes sense but Bootstrap does it without updating the page so there must be some way !

  • 1

    If I use ajax to print the results would it be like <div id="?" ></div> ?

  • yes, you print the result where they would appear according to your previous logic

  • Okay I’ll try here !

  • I did it with jquery passing an id on the element but how to turn the output into a php variable? I used $(Document.body). append(id); and in the console print correctly, I just need to turn to php now and with Document.write it doesn’t work ! Can help more?

  • You’ll have to use $.ajax()

  • I saw that there will be no way ! Thank you

  • Was using ajax same thank you !

  • Thank you very much

Show 8 more comments

Browser other questions tagged php javascript jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.