jQuery UI Tabs problem loading link in tab

Question

I have a problem with jQuery UI tabs. In details, I have tabs which are loading with ajax and my problem is that i want to load page links inside page but i cannot make it.

This is the code of my page with the tabs:

<script>
$(function() {


$( "#tabs" ).tabs({
    ajaxOptions: {
        error: function( xhr, status, index, anchor ){
            $(anchor.hash).html(
                "Could not load this tab");
        }
    }

});


});
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1">Welcome</a></li>
<li><a href="customer.php">Customers</a></li>
<li><a href="subscribers.php">Subscribers</a></li>
<li><a href="subscription.php">Subscriptions</a></li>
    </ul>

</div>

Let's assume know that i have load the tab subscriptions. The subscription.php has a link to another page which i want to load in the same tab.

How can i make it work?

Just curious, wouldn't it be simpler to have iframes containing your page's content inside the tabs, and then the normal anchor linking behavior will work? — Matthew Lock
– Matthew Lock, Commented Aug 26, 2011 at 6:27

bpeterson76 · Accepted Answer · 2011-05-10 15:45:27Z

1

There are probably quite a few ways to do this, but here's a simple one.

Give your link an id, say "link". Set a click handler to do a .load on a page to the desired div. So:

 <a href="#" id="link">

<script type="text/javascript">
     $('#link').click(function() {
          $('#tabid').load('linkpage.html');
     });
</script>

Now, some clarification. You'd have to have an id on the div of the tab you wanted to load content into....I called it tabid for illustration purposes. The load takes the contents of the page, linkpage.html and sets it to be the new value of the div tabid. Basically, you're doing an inner html with external content.

answered May 10, 2011 at 15:45

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI Tabs problem loading link in tab

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related