How to Enable And Disable jQuery Tab in RunTime In ASP.NET

Question

I want disable and enable jQueryUI tabs based on the AJAX content.

<script>
        $(function () {
            $("#tabs").tabs({
                disabled: [1, 2,3],
                collapsible: true,
                fx: [{
                    opacity: 'toggle',
                    duration: 'slow',
                    height: 'toggle'
                }, 
                     {
                         opacity: 'toggle',
                         duration: 'slow',
                         height: 'toggle'
                     }],
                beforeLoad: function (event, ui) {
                    ui.jqXHR.error(function () {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. ";
                    });
                }
            });
        });


    </script>

And HTML Code:

<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="Default2.aspx" style="width: 100%;"></iframe>

            <iframe id="iframe4" src="Default3.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.

Answer 1

On the click event of the 'Next' button you can have an onclick function that disables the previous tabs.

For example if you click on the next button in 'recent-tab' the next button would look something like this:

<button onclick="$('.next-button').tabs({ disabled: [ 1, 2, 3 ] })">Next</button>

Below is the official documentation on tab disabling.

http://api.jqueryui.com/tabs/#option-disabled