facing a problem with jquery ui tabs strategy

Question

My requirement was to develop a page that will have three tabs.
First two tabs will have pages we already have in our site and third tab will be new page.
So, because I wanted to utilize two pages we already had. I decided to go with ajax feature of jquery UI tabs.

Code looks like this:

<div id="tabs">
  <ul>
     <li><a href="/failedReport.jsp?isIdentity=true&hohPHA=<%=request.getParameter("Code")%>">Failed Report</a></li>
     <li><a href="/Verificationreport.jsp?isIdentity=true&hohPHA=<%=request.getParameter("PHA_Code")%>">Verification Report</a></li>
     <li><a href="/VerificationReportNew.action?phaValue=<%=request.getParameter("PHA_Code")%>">Verification New</a></li>
  </ul>
</div>

The new page just consists these three tabs, which are calling other pages.

Everything works fine so far.

Problem is: The first tab, failedReport.jsp, has server-side pagination inside it. So if user is on the first tab and clicks on a pagination link that is inside failedReport.jsp then my tabs are gone out the window and control is given solely to failedReport.jsp. To overcome this, I started setting some attributes and added same above tabs inside failedReport.jsp as well, but they only show when user clicks pagination link. But when page loads after pagination. it is again calling the first tab again automatically

Is there a better way to do this? has someone encountered a problem along the same lines?

Answer 1

Check out this doc: http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page

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

You can make the 'a' selector more specific to only target the pagination links.