how to show preloader while loading content using yii CJuitabs

Question

I am trying to show a preloader when I press a tab in the CJuitabs but it does not show the prealoader. Anything I am doing wrong?

<div id="OuterTabs">
<?php
$this->widget('zii.widgets.jui.CJuiTabs', array(
'tabs' => array(
    'Bundle (' . $BundleTotal . ')' => array(
        'ajax' => $this->createUrl('/Frontier/buyFlow/bundles'),
        'id'=>'BundleTab'
    ),
    'Standalone (' . $InternetTotal . ')' => array(
        'ajax' => $this->createUrl('/Frontier/buyFlow/Standalone'),
        'id'=>'StanadAloneTab'
    ),
    'Phone (' . $PhoneTotal . ')' => array(
        'ajax' => $this->createUrl('/Frontier/buyFlow/Phone'),
        'id'=>'PhoneTab'
    )
)
// panel 3 contains the content rendered by a partial view
,

// additional javascript options for the tabs plugin
'options' => array(
    'collapsible' => true,
    'select'=>"js:function(){ $('#BundleTab').html('Loading...') }",
),
'htmlOptions' => array(
    'style' => 'width:100%;float:left',
),
'id' => 'MyTab-Menu'
));
?>
</div>

thank you.

Answer 1

Try to remove

'options' => array(
    'collapsible' => true,
    'select'=>"js:function(){ $('#BundleTab').html('Loading...') }",
 ),

And handle it via manual javascript in this way:

<script>
  $(document).ready(function () {
      $('#BundleTab').click(function () {
          $(this).html("Loading...");
      });
  });
</script>