JQuery Accordion / Tabs - calling another function when loading content
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 use an accordion or tabs plugin from the user interface. Upon completion of the load event, I would like to call a JavaScript function, but for each tab - another function - almost like calling onDocumentReady for the 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 }); ); The Ajax file and all are loading correctly, but whenever I try to do something like operator evaluation in JS, it seems to be ignored. Is there a way to do this, so as soon as the file is uploaded, my function will be called - there should be a different function for each tab.
Edit below:
Switching really eases my problem of calling another function. I do not think...
However, after that I have 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 should register messages in a div that is loaded into each of the fragments, but none of the protocols is executed when a new tab is loaded.
My tabs are configured as follows:
$('#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"); } }); I am not exactly what you need, but there is a tabsload event that you can use, for example:
$(function() { $('#tabs').tabs().bind('tabsselect', function(event, ui) { console.log("Loading: ajax/question_" + ui.index + ".html"); return true; //Ensure that the tab gets selected }).bind('tabsload', function(event, ui) { switch(ui.index) { case 0: //do something for first tab... break; case 1: //do something for second tab... break; //etc... } }); ); I used the switch because your “should be a different function for each tab”, but whatever you do, call an external function, etc., you can do it here. You can use ui.tab for the anchor element if you need to make a switch to href , for example, everything that works best.