jQueryUI Tabs Loading Content Via AJAX Tab Into A New Selector?

Question

I'd like to be able to target where the AJAX content ends up. Does anyone have any ideas?

<div class="tabs">
  <ul>
    <li><a href="ajax/content1.html">tab1</a></li>
    <li><a href="ajax/content1.html">tab1</a></li>
  </ul>
</div>

<div id="tab-content-target">
... this is where new tabs get created
</div>

Adam Merrifield · Accepted Answer · 2011-11-17 22:22:04Z

1

This should do the trick.

$('a').click(function(e){
    e.preventDefault();
    $('#tab-content-target').load($(this).attr('href'));
});

answered Nov 17, 2011 at 22:22

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1052781 Over a year ago

This would work, except the jquery-ui-tabs function ultimately replaces the href on the links with the tab's ID, and no doubt creates the events to make the ajax call. So I lose the ability to load the href. Otherwise this would have worked.

Adam Merrifield Over a year ago

can you make the actual href value in a different attribute that wont be removd? like alt or title or rel?

Johnny Craig · Accepted Answer · 2011-11-17 22:27:49Z

1

<div class="tabs">
  <ul>
    <li><a href="ajax/content1.html" class='aLink'>tab1</a></li>
    <li><a href="ajax/content1.html" class='aLink'>tab2</a></li>
  </ul>
</div>

<div id="tab-content-target">
    ... this is where new tabs get created
</div>

<script type='text/javascript'>
    $('.aLink').click(function(){
           $.ajax({ $(this).attr('href'),success: function(data){
                       $('#tab-content-target').html(data);                        
                     }
           });
           return false;
    });
</script>

answered Nov 17, 2011 at 22:27

Johnny Craig

4,9902 gold badges28 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQueryUI Tabs Loading Content Via AJAX Tab Into A New Selector?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related