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?

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