CODEWITHSUNDEEP
jqueryajaxjquery-uitabsjquery-ui-tabs
user729334
user729334

Reputation: 27

jQuery UI Tabs problem loading link in tab

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?

Upvotes: 1

Views: 3179

Answers (1)

bpeterson76
bpeterson76

Reputation: 12870

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.

Upvotes: 1

Related Questions