Select tab using button with Asp.Net

Question

I have a masterpage and within the Default page I have included jquery tabs with a button inside the tabs.

Now If I click button it should select tab 2.

So here Is what I have done

<script type="text/javascript">
        $("#<%=Nextbutton.ClientId%>").click(function () {
            $('#tabs').tabs('select', 1);
        });
</script>

Here is my tabs with a button inside it:

<div id="tabs" style="position:relative;margin-left:0px;margin-top:30px;margin-bottom:30px;width:946px; height:432px;">
    <ul>
        <li><a href="#tabs-1">Step 1</a></li>
        <li><a href="#tabs-2">Step 2</a></li>
        <li><a href="#tabs-3">Step 3</a></li>
    </ul>
<div id="tabs-1">
 <asp:Button ID="Nextbutton" class="nexttab" runat="server" Text="Go to Next tab" style="position:absolute;left:332px;top:345px;"/>
</div>
<div id="tabs-2">
//Some Content
</div>
<div id="tabs-3">
//Some Content
</div>

Now my problem is whenever I click the button the page is refreshing and not selecting the tab and the same thing got worked without the master page

Can anyone point out me the right way to do this?

Aristos · Accepted Answer · 2012-02-09 17:33:02Z

4

To avoid the post back just return false, or call the event.preventDefault();

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=Nextbutton.ClientId%>").click(function (event) {
            $('#tabs').tabs('select', 1);
            return false;
        });
    });
</script>

answered Feb 9, 2012 at 17:33

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

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

7 Comments

coder Over a year ago

@Aristos-Thanks for your reply.I have just now tried using this again it refreshes the whole page.

Aristos Over a year ago

@DotNetter Also try to load this click when the dom is ready, probably did not find it when you call it. I have add the ready() function, try it.

coder Over a year ago

@Aristos-Thats the main thing there is no document.ready function now I have included it and got working.Thanks for pointing me out.

Aristos Over a year ago

@DotNetter PreventDefault is also good and maybe better than return false, just is good to know how to prevent default, you return false and this is stop the next events.

coder Over a year ago

@You're right it is good to know actually I have used return false on OnClientClick but it did not worked.So I thought something may be wrong with my code.

|

Anders Tornblad · Accepted Answer · 2012-02-09 17:36:17Z

1

You need to prevent the default action for the event.

<script type="text/javascript">
    $("#<%=Nextbutton.ClientId%>").click(function (event) {
        event.preventDefault();
        $('#tabs').tabs('select', 1);
    });
</script>

answered Feb 9, 2012 at 17:36

Anders Tornblad

19.4k9 gold badges53 silver badges67 bronze badges

1 Comment

coder Over a year ago

@Atornblad-Thanks for your reply.I have done as Aristos said and worked well!

Collectives™ on Stack Overflow

Select tab using button with Asp.Net

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related