jquery Tab - Open Link in current panel does not work

Question

Hi,

I just started playing around with the Jquery ui tabs. The content of the Tabs consist mainly of static content at the beginning.

Now some of the content within the panels do have Links to some kind of subcontent. So if the User clicks on a link in the panel I would like to replace the content of the current panel with the content coming from the link.

So I used the script directly from the jquery ui tab documentation but I can't get it to work. It is always opening the link directly, not within the panel. The code I use for testing is quite simple:

<div id="MyTabs">
    <ul>
        <li><a href="#TestTab1">TestTab</a></li>
        <li><a href="#TestTab2">TestTab</a></li>
    </ul>
    <div id="TestTab1">
        Lorem ipsum dolor. dumm di dumm
        <a href="http://mywebserver/somelink"&gt;Test&lt;/a&gt;
    </div>
    <div id="TestTab2">
        Lorem ipsum dolor. dumm di dumm 2
        <a href="http://mywebserver/somelink2"&gt;Test 2</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#MyTabs').tabs({
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;

                });
            }
        });
    });

Additionally, if I have the content of the panel loaded using an AJAX call no link within the panel is working whatsoever.

Any idea what I`m doing wrong?

Help is really appreciated

Regards

Maik

Edit1:

OK, I got a bit further. I replaced the Javascript with the following snippet:

        $(function() {
        $("#MyTabs").tabs();
        $("#MyTabs").bind('tabsshow', function(event, ui) {
            AddClickHandler(ui);
        });
    });

    function AddClickHandler(ui) {
        $('a', ui.panel).click(function() {
            MyAlert("AddClickHandler");
            $(ui.panel).load(this.href, AddClickHandler(ui));
            return false;
        });
    }

After this change all links on a panel will update the content of the current panel. So far so good. Still one problem left. I can't get it to work for subsequent links. I tried to do it with the second "AddClickHandler" for callback when the ajax call has finished. Using a different function with a simple alert showd it is actually been called when the content of the panel has been updated. But I can't bind anything to the new links in that content. The "$('a', ui.panel)..." doesn't work. What would be the correct selector for this?

Any hint?

Regards

Maik

Answer 1

that doesnt look right at all..

the example looks like this:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

notice, the links are in the TABs themselves, not in the tab content

Edit: Ok, i think i see your problem. I dont see any code for you to register opening of those links within the tabs. so when the user clicks a link, it will open inside the browser window like a normal link.. anyway.

try something like this:

$("#MyTabs").find("a").click(function(){
   $(this).parent(".ui-tabs-panel").load(this.href);
   return false;
});

Edit2: I just realized that your "load" function does the same thing as the function i wrote above. anyway, try my function and see if it works, if it doesm step through your function with firebug and see what is different, and if it doesnt.. step through your function with firebug.. or provide an online demo and i can look at it

Edit3: Ok here is better solution:

add this function:

var bindAjaxLinks = function(){
    $("#MyTabs").find("a").click(function(){
      $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks);
      return false;
    });
}

//in the tabs constructor add the select function:

$("#MyTabs").tabs({select: function(event, ui) {
   bindAjaxLinks();
  },
  //your other stuff
 }

probably not the best solution, since it will rebind the click function to all links every time a link is opened. but probably ok for now, unless you are building some production site

Answer 2

I have this same problem. What is happening is that the "Show/Load" event does not get fired after you have done a $(ui.panel).load(this.href);. I try a couple ways of firing the event again but none have work. The problem is getting the event to fire AFTER the first link is clicked and changes the links within the panel.

Answer 3

you can use live() as follows:

$("#myTabs").tabs({
        load: function(event, ui) {
         $("#myTabs").find("a").live('click', function() {
        $(ui.panel).load(this.href);
        return false;
    });
}})