Hiding asp.net button when a certain tab is selected jquery

Question

I have a page with tabs setup and an asp button.

<div id="tabs" style="width:700; height:1000">
    <ul>
    <li><a href="#tabs-1">Referral</a></li>
    <li><a href="#tabs-2">Details</a></li>
    <li><a href="#tabs-3">Other</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
    <asp:Button ID="btnMainSave" runat="server" Text="Save" />    
</div>

When tabs-3 is selected, I want the button to be invisible but visible for the first two tabs. How can I achieve this using jquery baring in mind that I am a beginner. I have tried the following code but it hasn't worked.

<script type="text/javascript" >
$(function () {
    $('#tabs, #tabs-3').tabs({
        active: function (event, ui) {
            $("#btnMainSave").hide();
        }
    });
});
</script>

Any help would be appreciated. Thanks

Rob

The problem here is that is a server side ID and you are client side, have a look here. http://stackoverflow.com/questions/5392958/getting-id-from-asp-net-runat-server-in-jquery — rrrr-o, Jun 14 '13 at 10:43

billyonecan · Accepted Answer · 2013-06-14T11:54:41.573

0

You need to use the activate event (not the active option):

$(function () {
    $('#tabs, #tabs-3').tabs({
        activate: function (event, ui) {
            $("#btnMainSave").hide();
        }
    });
});

Edit

You'll have to add some logic to check which panel is being activated, and hide the button based on that. I don't know which version of jQuery UI you're using, but the following will work in the latest:

activate: function(e, ui) {
  $('#btnMainSave').toggle( !$(ui.newPanel).is('#tabs-3') );
}

Here's a fiddle

edited Jun 14 '13 at 11:54

answered Jun 14 '13 at 10:46

billyonecan

20,090
8
42
64

I've made the change to activate and now its behaving a bit strangely. The button shows on the first tab but disappears from the 2nd and 3rd tab and when I go back to the first tab afterwards, its missing from there too. – spytek Jun 14 '13 at 11:27
You need to add some logic to check if the tab is `tab3` when activated – billyonecan Jun 14 '13 at 11:28

score 0 · Answer 2 · answered Jun 14 '13 at 12:01

0

Try this: DEMO

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});

answered Jun 14 '13 at 12:01

coder

13,002
31
112
214

Hiding asp.net button when a certain tab is selected jquery

2 Answers2

Edit

Here's a fiddle