I have the following markup:
<body>
<div id="tabs" style="float: left">
<ul>
<li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li>
<li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li>
<li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li>
<li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li>
<li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li>
<li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li>
</ul>
<div id="dynamicContent">
</div>
</div>
<div class="demo-description">
<p>Click tabs to see answers to Questions</p>
</div>
</body>
I would like to utilize an accordion or the tabs plugin from the UI. Upon completion of the load event, I'd like to call a JavaScript function, but a different function for each tab -- almost like calling onDocumentReady for a page.
I have the following JavaScript:
$(function() {
$('#tabs').tabs().bind('tabsselect', function(event, ui) {
console.log("Loading: ajax/question_" + ui.index + ".html");
return true; //Ensure that the tab gets selected
});
);
That's properly loading the Ajax file and all, but whenever I attempt to do something such as evaluating a statement in the JS, it seems to be ignored. Is there any way I can do this, so that once the file is loaded my function is called -- needs to be a different function for each tab.
Edit below:
Switching does in fact alleviate my problem of calling a different function. I wasn't thinking...
However, what I'm after is having an empty div in each of these tabs which is used for logging (in case I'm in a web environment without Firebug).
I have the following function:
if (typeof console === 'undefined') {
var console = { };
console.log = function(msg) {
$('#dynamicContent').append(createElement('p', msg));
};
}
Which is supposed to log messages to a div which is loaded in each of the fragments, but none of the logging is done when a new tab is loaded.
My tabs are setup with the following:
$('#tabs').tabs({
select: function(event, ui) {
log.debug("Loading: ajax/question_" + ui.index + ".html");
},
show: function(event, ui) {
log.debug("Finished Loading: ajax/question_" + ui.index + ".html");
}
});