If the tabs are the only Ajax requests on the page (at least during initial
page load), you can use a jQuery
ajaxSuccess()<http://api.jquery.com/ajaxSuccess/>handler to count the number of
Ajax calls and equalize the heights after
the third Ajax call. Something like this (not tested):
var num_tabs = 3;
var tabs_loaded = 0;
$('#equalize1').ajaxSuccess(function() {
tabs_loaded += tabs_loaded;
if (tabs_loaded === num_tabs) {
$(this).equalHeights();
};
});
That goes inside your document ready handler. If you have other Ajax calls
on the page and you need to distinguish only the calls for the tabs, note
that the ajaxSuccess event will pass the Ajax settings object as the third
argument to the handler, so you can checking settings.url to see if the URL
of the action is one of the tabs.
Anthony
On Sunday, July 1, 2012 5:51:48 AM UTC-4, Annet wrote:
>
> I am using this JavaScript to equalize column heights:
>
> <script type="text/javascript">
> $(document).ready(function(){
>
> $('a[href=#{{=tab}}]').tab('show');
>
> $(function() {
> $('#equalize1').equalHeights();
> });
>
> $(function() {
> $('#equalize2').equalHeights();
> });
>
> });
>
> </script>
>
>
> <div class="row-fluid" id="equalize1">
> ...
> </div> <!-- /row -->
>
> <div class="row-fluid" id="equalize2">
> ...
> </div> <!-- /row -->
>
> The problem is that #equalize1 contains tabs that load their content as
> follows:
>
> {{=LOAD('site','classes.load',args=session.id,ajax=True,target='tab-1')}}
>
>
> What I am looking for is a way to execute this function:
>
> $(function() {
> $('#equalize1').equalHeights();
> });
>
> after classes have been loaded.
>
>
> Kind regards,
>
> Annet
>
