How to keep a tab active after asp.net button event?

Question

I would like to know how to keep a tab open after a button postback event, I could not get it to work using HiddenFields. I would like the second tab to stay open after a button click on the second tab however my code would always refresh to the first tab.

I have also tried to use an update panel instead of refreshing the entire page however the tabs would not toggle properly using this method.

I would prefer to not postback on every tab click as it affects the user experience. Is there any other codes to do this without affecting the fade aesthetics?

 $(function () { $('.tab-content:first-child').show(); $('.tab-nav').bind('click', function (e) { $this = $(this); $tabs = $this.parent().parent().next(); $target = $($this.data("target")); $this.siblings().removeClass('active'); $target.siblings().css("display", "none"); $this.addClass('active'); $target.fadeIn("slow"); }); $('.tab-nav:first-child').trigger('click'); });

 <ul class="tabs-nav d-flex" style="padding-left: 35px;"> <li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_1">Overview</li> <li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_2">Expenses</li> </ul> <div id="tab_1" class="tab-content"> <p>abc</p> </div> <div id="tab_2" class="tab-content"> <p>abc</p> <asp:Button ID="saveexpense" runat="server" Text="Save"/> </div>

Answer 1

You may be better off creating a web method and calling that from your jQuery instead of trying something with update panels. Especially considering the performance problems update panels can cause.

You would move your save functionality into a web method like this

[WebMethod]
public static void SaveExpense(string data, string moredata)
{
    //your save code here
}

and something like this in your front end

<button id="saveexpense">Save</button>

Then you can call your webmethod like this

$('#saveexpense').click(function () {
    $.ajax({
        type: "POST",
        url: "CurrentPage.aspx/SaveExpense",
        data: JSON.stringify({ data: $("#textbox").val(), moredata: $("#textbox2").val() }) ,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            console.log("data saved");
        },
        error: function (jXHR, textStatus, err) {
            console.log(err);
        }
    });
});