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.

thanks for help me, but 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 — Pouya
– Pouya, Commented May 1, 2013 at 5:59

Thinking Sites · Accepted Answer · 2013-04-30 13:39:06Z

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

answered Apr 30, 2013 at 13:39

Thinking Sites

3,54219 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pouya Over a year ago

thanks for help me, but 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.

Thinking Sites Over a year ago

Then change your disabled array to match the disabled tabs. It will work for you. Read the documentation of how to use the tab disabling, it's all there.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related