jQuery UI Tabs change ajax panel destination?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
flying_circus
Forum Regular
Posts: 732
Joined: Wed Mar 05, 2008 10:23 pm
Location: Sunriver, OR

jQuery UI Tabs change ajax panel destination?

Post by flying_circus »

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:

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>
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).

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? :)
Post Reply