jQuery UI Tabs change ajax panel destination?
Posted: Mon Nov 07, 2011 11:51 pm
Hey guys,
I'm finally getting on board with jQuery and it's making me feel rather green again...
My tabs are pulling content via an ajax request, but it seems to want to draw the content just below the UL tags, but within the <div id="tabs"> element. I don't want it there, I want it elsewhere on my page.
Consider the following code:
I've come up with a hack, but I don't feel that it's the right thing. I've used css to display:none on the ui-tabs-panel and on a successful ajax request, I am manually populating the area that I want the output. But this also means I am placing the ajax data in 2 places (one of which is hidden).
Help?
I'm finally getting on board with jQuery and it's making me feel rather green again...
My tabs are pulling content via an ajax request, but it seems to want to draw the content just below the UL tags, but within the <div id="tabs"> element. I don't want it there, I want it elsewhere on my page.
Consider the following code:
Code: Select all
<div id="tabs">
<ul>
<li><a href="mock_ajax/overview.php">Overview</a></li>
<li><a href="mock_ajax/spec.php">Spec</a></li>
<li><a href="mock_ajax/files.php">Files</a></li>
<li><a href="mock_ajax/timeline.php">Timeline</a></li>
<li><a href="mock_ajax/todo.php">To Do</a></li>
</ul>
// I don't want the self-rendered panel (output) here
</div>
/* Lots of other code */
<div id="panel_output">I want the panel output here.</div>
Code: Select all
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
},
success: function(message)
{
$("#panel_output").empty().append(message);
}
}
});
});Help?