Search code examples
javascriptajaxhttp-redirectrazorhref

Bootstrap 3 - Refreshing page to specific tab


I've got a page with 5 tabs on it - upon clicking a Save button on any tab, it should perform the tasks such as validation and posting data to a controller - which work fine. Once an Ajax call returns successful it calls an alert to let the user know it's successfully saved data and then (this is where it goes wrong) refresh the page; returning to the same tab.

Currently it just modifies the URL bar address to the right tab, but doesn't actually refresh the page. I have to manually press enter on the URL bar for it to refresh.

I have this code in my document.ready:

$(function () {
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');

            $('.nav-tabs a').click(function (e) {
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            });
        });

This is my Ajax function - it works but the code to refresh the page does at detailed above.

$.ajax({
     type: "POST",
     url: '@Url.Action("AddNewAssessment","ChangeManagement")',
     dataType: "text",
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify(dataList)
}).done(function (data) {
     if (data == "Success") {
         alert("Saved successfully");
         var test = window.location.href + "tab_Assessment";
         window.location.href = test;
      }
}).fail(function () {
     alert("There was a problem, please try again.");
});

What am I doing wrong?

From the research I've done, nobody seems to have this issue (I've looked at multiple SO questions.)


Solution

  • Okay so I managed to figure it out. Instead of trying to load a page based on which function I'm in, I simply use localStorage to save which tab I've come from and then once I've reloaded the page I can access localStorage and open that tab.

                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("etc","data")',
                            dataType: "text",
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify(dataList)
                        }).done(function (data) {
                            if (data == "Success") {
                                alert("Edit successful");
                                localStorage.setItem('tab', "CAB");
                                location.reload();
                            }
                        }).fail(function () {
                            alert("There was a problem, please try again.");
                        });
    

    On document.ready:

        $(document).ready(function () {
        if (localStorage.getItem('tab')) {
            var tab = "#tab_" + localStorage.getItem('tab');
            $('[href=' + tab + ']').tab('show');
            localStorage.clear();
        }
    
        $(function () {
            var hash = window.location.hash;
            hash && $('ul.nav a[href="' + hash + '"]').tab('show');
    
            $('.nav-tabs a').click(function (e) {
                $(this).tab('show');
                var scrollmem = $('body').scrollTop();
                window.location.hash = this.hash;
                $('html,body').scrollTop(scrollmem);
            });
        });