Click here to Skip to main content
16,016,168 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
I want disable and enable jQueryUI tabs based on the AJAX content.

JavaScript
$("#tabs").tabs({

       collapsible: true,
       fx: [{
           opacity: 'toggle',
           duration: 'slow',
           height: 'toggle'
       },
            {
                opacity: 'toggle',
                duration: 'slow',
                height: 'toggle'
            }],
       beforeLoad: function (event, ui) {

       }
   });

And HTML Code:
HTML
<div id="tabs">
            <ul>
                <li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li>
                <li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li>
                <li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li>
                <li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li>

            </ul>
            <iframe id="iframe1" src="Default2.aspx" style="width: 100%;" height="900"></iframe>

            <iframe id="iframe2" src="Default3.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe3" src="Default4.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe4" src="Default5.aspx" style="width: 100%;"></iframe>
        </div>



For example when the user selects popular-tab it loads Default3.aspx page. In every page I have Next Button. I want when the user clicks the Next button this and the next tab are available to the user, but not the previous tabs. For example when a user in recent-tab and clicks the Next button recent-tab is enabled but popular-tab is disabled.

Edit 01:
i have 4 pages and example page1.aspx,page2.aspx,page3.aspx,page4.aspx, in default i have tab and when user select tabe recent-tab load page1.aspx for user and page2.aspx and page3.aspx and page4.aspx is unactive, in page1 i have button when user click in this button i want go to popular-tab and load page3.aspx and unactive recent-tab and active popular-tab. and etc, when write this code for button next in page2 not work. thanks for help me

Thanks.
Posted
Comments
sri senthil kumar 2-May-13 3:23am    
There are methods to disable and enable which i have mentioned below use them and call them in appropriate place like when u click next disable the tab with current index and enable and select tab with currentindex +1. Like that u need to write some logics thts all it will work.

Function to enable:
$("#tabs").tabs("enable", tabIndex);
$("#tabs").tabs({
selected: tabIndex
});

Function to disable tabs
$("#tabs").tabs("disable", tabIndex);

you can get more of these methods from jquery site too.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900