Clicking on a selected Tab

Clicking on a selected Tab


Hello,
I have used the Tab UI and i have run into two problems. I have
searched quiet thoroughly for an answer with no luck. I will display
the code and then explain my problems.
My html code is as follows;
<div id="tabs" class="tabPannelClass">
<ul>
<li><a href="#fragment" name="reports.html"><span>Reports</
span></a></li>
<li><a href="#fragment" name="password.html"><span>Password</
span></a></li>
</ul>
<div id="fragment" class="tabClass">
<div id="loadImg" style="text-align:center; margin-top:
200px;">
<img src="img/loadingAnimation.gif" />
</div>
<iframe id="frame" height="100%" width="100%" frameborder="0"
onLoad="doneLoading();" style="display: none;"></iframe>
</div>
</div>
The reason for the above code is so that the body of each tab contains
the contents of a link using Iframes and not AJAX. My javascript is a
follows;
function doneLoading(){
document.getElementById('loadImg').style.display = 'none';
document.getElementById('frame').style.display = 'block';
}
function selectFuntion(e, ui) {
document.getElementById('loadImg').style.display = 'block';
document.getElementById('frame').style.display = 'none';
document.getElementById('frame').src = ui.tab.name;
return true;
}
$(document).ready(function(){
$('#tabs > ul').tabs({selected: null});
$('#tabs > ul').bind('tabsselect',selectFuntion);
});
The above code works and displays a nice loading image while the
iframe load. My first problem is that i want to be able to execute the
selectFuntion function when i click on a selected tab. I have tried
binding clicks to everything i can find with no success. The tabselect
event does not fire either on a selected tab. Does anyone have any
suggestings.
When i have a default tab selected ('selected': 0 for example) and the
page loads, the tab select event is not triggered. Is there anyway to
trigger it?
Any suggestions are greatly appreciated.
Paul