CODEWITHSUNDEEP
jqueryasp.netselecttabs
coder
coder

Reputation: 13248

Select tab using button with Asp.Net

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?

Upvotes: 2

Views: 2627

Answers (2)

Anders Marzi Tornblad
Anders Marzi Tornblad

Reputation: 19305

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>

Upvotes: 1

Aristos
Aristos

Reputation: 66641

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>

Upvotes: 4

Related Questions