locked
Set Active Bootstrap nav item after reload RRS feed

  • Question

  • User399031849 posted

    I have this situation in my csHTML page:

    <div class="col-md-4">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a class="nav-link" id="v-pills-stage-tab" data-toggle="pill" href="#v-pills-stage" role="tab" aria-controls="v-pills-stage" aria-selected="true">stage</a></li>
                        <li><a class="nav-link" id="v-pills-school-tab" data-toggle="pill" href="#v-pills-school" role="tab" aria-controls="v-pills-school" aria-selected="false">school</a></li>
                        <li><a class="nav-link" id="v-pills-sog-tab" data-toggle="pill" href="#v-pills-sog" role="tab" aria-controls="v-pills-sog" aria-selected="false">Host</a></li>
                        <li><a class="nav-link" id="v-pills-info-tab" data-toggle="pill" href="#v-pills-info" role="tab" aria-controls="v-pills-info" aria-selected="false">Info</a></li>
                        <li class="no-hover"><a class="nav-link" style="margin-top: 20px;"><strong>Settings</strong></a></li>
                        <li><a class="nav-link" id="v-pills-inner-tutor-tab" data-toggle="pill" href="#v-pills-inner-tutor" role="tab" aria-controls="v-pills-inner-tutor" aria-selected="false">Tutor</a></li>
                        <li><a class="nav-link" id="v-pills-tutor-sog-tab" data-toggle="pill" href="#v-pills-tutor-sog" role="tab" aria-controls="v-pills-tutor-sog" aria-selected="false">Host Tutor</a></li>
                        <li id="nav-item-durata-tab" class="@(Model.DisplayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-duration-tab" data-toggle="pill" href="#v-pills-duration" role="tab" aria-controls="v-pills-duration" aria-selected="false">duration</a></li>
                        <li id="nav-item-objective-tab" class="@(Model.DisplayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-objective-tab" data-toggle="pill" href="#v-pills-objective" role="tab" aria-controls="v-pills-objective" aria-selected="false">objective</a></li>
                        <li id="nav-item-user-tab" class="@(Model.DisplayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-tipo-utenza-tab" data-toggle="pill" href="#v-pills-user" role="tab" aria-controls="v-pills-user" aria-selected="false">User</a></li>
                        <li id="nav-item-activity-tab" class="@(Model.DisplayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-activity-tab" data-toggle="pill" href="#v-pills-activity" role="tab" aria-controls="v-pills-activity" aria-selected="false">Activity</a></li>
                        <li id="nav-item-validation-tab" class="@(Model.DisplayWarning ? "warning" : "")"><a class="nav-link" id="v-pills-validation-tab" data-toggle="pill" href="#v-pills-validation" role="tab" aria-controls="v-pills-validation" aria-selected="false">Validation</a></li>
                        <li><a class="nav-link" id="v-pills-policy-tab" data-toggle="pill" href="#v-pills-policy" role="tab" aria-controls="v-pills-policy" aria-selected="false">policy</a></li>
                        <li><a class="nav-link" id="v-pills-rights-tab" data-toggle="pill" href="#v-pills-rights" role="tab" aria-controls="v-pills-rights" aria-selected="false">rights</a></li>
                        <li><a class="nav-link" id="v-pills-job-tab" data-toggle="pill" href="#v-pills-job" role="tab" aria-controls="v-pills-job" aria-selected="false">job</a></li>
                    </ul>
                </div>
                
                
                
                
                @section Scripts {
        <script type="text/javascript" src="~/Scripts/alertify.min.js"></script>
        <script>
    
    
            $(document).ready(function () {
    
                $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
                    var target = $(e.target).attr("href"); // activated tab
                    if (target === '#v-pills-objective' || target === '#v-pills-user' ||
                        target === '#v-pills-activity' || target === '#v-pills-validation') {
                        refresh(target);
                    }
                    
                });
    
                var targetTab = localStorage.getItem("tab");
                if (targetTab != null) {
                    $('#nav nav-pills nav-stacked').find('#v-pills-stage').setAttribute('aria-selected', "false");
                    $('#nav nav-pills nav-stacked').find(targetTab).parent().addClass('active');
                    $('#nav nav-pills nav-stacked').find(targetTab).setAttribute('aria-selected', "true");
                }
    
            });
    
            function refresh(target) {
                var url = BASE_PATH + "ProjectPages/Index";
    
                API_ajaxWrapper_Library.ajax(url,
                    {
                        traditional: true,
                        method: "POST",
                        data: {
                        },
                        onDone: function () {
                            refreshTab(target);
                        },
                        onFail: function () {
                            alertError();
                        }
                    });
            }
    
            function refreshTab(target) {
                localStorage.setItem("tab", target);
                location.reload(true);
            } 
    
        </script>
    }
    In different tabs I have checkboxes or text fields where the user can write or select options, each tab has a save button, what I need is that if I have changed some choices and I have not saved them and I exit the section I refresh from the database (no problem so far) I put location.reload (true); because when I reopen the tabs the situation was inconsistent with the model only that doing so always reopens the first tab (active by default) and it seems that

    var targetTab = localStorage.getItem("tab");
                if (targetTab != null) {
                    $('#nav nav-pills nav-stacked').find('#v-pills-stage').setAttribute('aria-selected', "false");
                    $('#nav nav-pills nav-stacked').find(targetTab).parent().addClass('active');
                    $('#nav nav-pills nav-stacked').find(targetTab).setAttribute('aria-selected', "true");
                }
    it does not work, how can I do?




    Sunday, November 15, 2020 6:50 PM

All replies

  • User-474980206 posted

    Pretty poor design, I’d fail on it a code review. Why an Ajax post with no data followed by a location reload. As you are navigating in any case, just use browser navigation. The server code should set the markup for the active nav item, not JavaScript.

    You should probable build a server object to hold the navigation setting, and render, rather than so much hard coding.

    Sunday, November 15, 2020 10:24 PM