jQuery tabs - opening pagination links inside a tab

Question

I'm having the following setup of jQuery UI tabs:

$(function() {
    $('#tabs').tabs({
        ajaxOptions: {
            type:'post',
            async: false,
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab." );
            }
        },
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
    });     
});

this loads tabs ok:

<div id="tabs">
        <ul>
          <li><a href="div-s.php">Summary</a></li>
          <li><a href="content.php?div=Production">Products</a></li>
          <li><a href="content.php?div=Digital">Recordings</a></li>
          <li><a href="login.php">Login</a></li>
          <li><a href="resources.html">Resources</a></li>
        </ul>
    </div>

my fist tab div-s.php contains pagination. I expect for pagination links to be opened in the same tab, yet when I click on them, browser actually redirects me to div-s.php?pagenum=2

how can i fix this please?

Answer 1

Here's what happening: the jquery.tab plugin "turn off" your tab links when you enable the ajaxOptions in the attributes map.

So, when you click in some tab, the content will be loaded by AJAX requests and inserted in tab panel. All the HTML elements in your tab content will work as ordinary elements if you do not add event listener or any kind of script to them. Then, when you load the content that has your paginations links and you click in one of them, you will be doing a click in a normal link that you reload all the page, since your tab panel is not an inframe.

The solution:

The function that you set in load attribute is doing nothing, but it will work to force ajax load in links inside tab panel with a little modification :)

$(".ui-tabs-panel.ui-widget-content").delegate('a', 'click', function(event) {
  event.preventDefault();
  $(this).closest('.ui-tabs-panel.ui-widget-content').load(this.href);
});

Finished :) Execute this function after run the tab plugin and all link element inside .ui-tabs-panel.ui-widget-content will force their own tab to reload with their own href