Two gridviews on the same page, show/hide when jquery tab is clicked

Yii 2.0 General Discussions
1

I have searched for a solution for a long time. Can anyone show me an example.

I have on page 2 gridview’s first gridview is with id gridview1,second gridview is with id gridview2 and two jquery tabs(tab1 and tab2 on the same page ), so when i clicked on tab1 i want to show gridview1 (gridview2 it will

be hidden) and vice versa when i clicked on tab2 it comes up to show gridview2 (gridview1 it will be hidden).

Thanks

2 




<a id="g1" href="">Show gridview 1</a>

<a id="g2" href="">Show gridview 2</a>


<?php

$this->registerJs('


jQuery("#g1").on("click", function() {

	jQuery("#gridview1").show();

	jQuery("#gridview2").hide();

});

jQuery("#g2").on("click", function() {

	jQuery("#gridview2").show();

	jQuery("#gridview1").hide();

});


', View::POS_READY);


?
3

https://jqueryui.com/tabs/




<div id="tabs">

  <ul>

    <li><a href="#tabs-1">Nunc tincidunt</a></li>

    <li><a href="#tabs-2">Proin dolor</a></li>

  </ul>

  <div id="tabs-1">

    <?php //code of gridview1 ?>

  </div>

  <div id="tabs-2">

    <?php //code of gridview2 ?>

  </div>

</div>
4

Hi Soul i try with your example, but both of the gridview’s are showed on the page. I want on the load of page only to show first gridview , second to be hidden, and when i click on the first gridview to show me only first gridvew and vice versa for the second.

5

Add css property ‘display:none’ for gridview, which you want to hide

6

Ok i execute this code:

<?php

$this->registerJs("

   jQuery('#g1').on('click', function() {


   jQuery('#gridview1').show();


   jQuery('#gridview2').hide();


   });


   jQuery('#g2').on('click', function() {


   jQuery('#gridview2').show();


   jQuery('#gridview1').hide();


   });

");

?>

<a id="g1" href="">Show gridview 1</a>

<a id="g2" href="">Show gridview 2</a>

<div id="gridview1">

&lt;p&gt;Content for Gridview 1&lt;/p&gt;

</div>

<div id="gridview2" style="display:none" >

&lt;p&gt;Content for Gridview 2&lt;/p&gt;

</div>

The problem is when i click on show gridview 2 first give me gridview2 and automaticaly shows gridvew1 after that. How can i solve this ?

7

The gridview can be automatically updated and become visible.

Then you can put it in a container and hide it




<div id="container1">

    <div id="gridview1">

        <p>Content for Gridview 1</p>

    </div>

</div>


<div id="container2" style="display:none">

    <div id="gridview2">

        <p>Content for Gridview 2</p>

    </div>

</div>


<?php

$this->registerJs('

    jQuery("#g1").on("click", function() {

        jQuery("#container1").show();

        jQuery("#container2").hide();

    });

   jQuery("#g2").on("click", function() {

        jQuery("#container2").show();

        jQuery("#container1").hide();

   });

', View::POS_READY);

?
8

Okay , thanks Soul it is working now .