How to Disable Auto loading in Jquery Ajax tabs

Question

I am facing one problem due to auto-loading in Jquery Ajax tabs. How can I disable the autoloading of the tabs. It hang up my browser. Below is scenario of my requirement.

On the 1st tab it load the category such as

• Category 1
• Category 2
• Category 3

When I click on the Category 1 link then it open the tab 2 and content for the tab 2 is as below

• Sub Category 1
• Sub Category 2
• Sub Category 3

When I click on the Sub Category 1 link then it will open the tab 3

But I want to disable the auto loading in Jquery Ajax tabs

Can you please guide me how can I implement it.

Answer 1

I figure out the issue and need to comment the below code

    if ( this.active.length ) {
            this.load( options.active );
        }

in the file jquery-ui.js file

It stop auto loading ...

Answer 2

Another quick fix (working in jQuery.ui v1.11.2)

jQuery.ui.tabs.prototype._isLocal = function() { return true; };

Use before calling .tabs(). This tricks jQuery.ui into believing the tab is already loaded. Needed if you are using virtual document paths at your site which remap the url path to another document via .htaccess (or some other means). _isLocal does not correctly identify that the tab is local with virtual paths in effect and tries to load the tab content even when it is explicitly in the document.

Answer 3

Try this beforeLoad event:

$(".selector").tabs({
    beforeLoad: function(event, ui) {
        // if the target panel is empty, return true
        return ui.panel.html() == "";
    }
});