CODEWITHSUNDEEP
jqueryhtml
BlueTabby
BlueTabby

Reputation: 11

Trigger jquery function on tab load? None of my attempts are working

I am using the responsivematchheight jquery script to equalize divs in five different tabs.

The active tab works perfectly, but when I change the tab, the script does not fire. I've tried using onclick, activate, load... I'm sure I'm doing something wrong.

Here's the basic function for loading the script:

jQuery(document).ready(function(){

    jQuery('.tabfeature').responsiveEqualHeightGrid();
    });

And here's the block of html that triggers the different tabs:

<div class="tabshome">
  <ul class="nav nav-tabs" id="hometabs">
<li class="active"><a data-toggle="tab" href="#ps">Prospective Students</a>    </li>
<li><a data-toggle="tab" href="#cs">Current Students</a></li>
    <li><a data-toggle="tab" href="#fs">Faculty/Staff</a></li>
<li><a data-toggle="tab" href="#comm">Our Community</a></li>
<li><a data-toggle="tab" href="#alum">Alumni</a></li>
</ul>
      <div class="tab-content">
<div id="ps" class="tab-pane fade in active">     
<?php if( have_rows('prospective_students') ): ?>

<?php while( have_rows('prospective_students') ): the_row(); 

    // vars
    $ps_photo = get_sub_field('ps_box_one_photo');
    $ps_title = get_sub_field('ps_box_one_title');
    $ps_text = get_sub_field('ps_box_one_text');
    $ps_link = get_sub_field('ps_box_one_link');
    $ps_linktext = get_sub_field('ps_box_one_link_text');
    ?>
<div class="tabholder">
    <div class="tabfeature">

I've tried all of the following (not all at once...):

jQuery("#hometabs a").click(function(responsiveEqualHeightGrid){
            jQuery('.tabfeature').responsiveEqualHeightGrid();

});
jQuery( "#hometabs" ).tabs();
 jQuery("#hometabs").tabs({
create: function(event, ui) {

    jQuery('.tabfeature').responsiveEqualHeightGrid();
}
});

jQuery( "#hometabs" ).on( "tabsload", function( event, ui ) {
jQuery('.tabfeature').responsiveEqualHeightGrid(); } );

Here's the page: http://tcmedc.wpengine.com

Am I using incorrect syntax or am I just totally off-base??

Upvotes: 1

Views: 1050

Answers (2)

BlueTabby
BlueTabby

Reputation: 11

FYI - I found a solution - although I never found an answer!

But if anyone should run into this issue, I tried another jQuery plugin script called jquery-match-height.js (https://github.com/liabru/jquery-match-height) and it has handlers and triggers built in to handle events and changes on the page.

Works perfectly right out of the box! :)

Upvotes: 0

Nomenator
Nomenator

Reputation: 1127

You can define the load procedure right in the tabs constructor:

$("#hometabs").tabs({
  load: function(event, ui){
    $('.tabfeature').responsiveEqualHeightGrid();
  }
  create: function(event, ui) {
    $('.tabfeature').responsiveEqualHeightGrid();
  }
});

But I don't think it will work as you expect. The API description at https://api.jqueryui.com/tabs/#event-load describes an event which is triggered by an AJAX call after a remote tab has been loaded, for which you need to use this: https://jqueryui.com/tabs/#ajax. As far as I can tell, your tabs are pre-generated by the PHP script and the effect from responsiveEqualHeightGrid() which you see is actually coming from other places you trigger it.

If you just want to trigger on opening a new tab, you can use activate: trigger instead:

$("#hometabs").tabs({
  activate: function(event, ui){
    $('.tabfeature').responsiveEqualHeightGrid();
  }
  create: function(event, ui) {
    $('.tabfeature').responsiveEqualHeightGrid();
  }
});

Activate does not get fired at creation, so you still need the create: directive. If activate does not suit you, you can use the href attribute in a tab’s link to select the appropriate tab on the link’s click event:

$("#hometabs a").click(function() {
  $('.tabfeature').responsiveEqualHeightGrid();
  //OR to target specifically the tab you’re opening;
  $($(this).attr("href")).find(".tabfeature").responsiveEqualHeightGrid();
});

Upvotes: 1

Related Questions