Bootstrap nav nav-tabs设置选项卡。刷新时，javascript中的``显示''会导致屏幕闪烁

Question

I have an MVC page that gets refreshed every 10 seconds or so, this is done using javascript and returns JSON. My first issue was on ther return the active was not getting set correctly. I have fixed this issue and the page even returns to the same position it was at before the refresh.

My problem is, that when I set the active tab to show, the screen blinks/flickers whatever you want to call it.

Here is what I am doing.....

VehicleDetails.prototype.requestVehicleDetails = function () {
            var self = this;
            var active = $('#VehicleTabs li.active').text();
            if (active == "Alerts") {
                self.activeTab = 0;
            }
            if (active == "Overview") {
                self.activeTab = 1;
            }
            if (active == "Tires") {
                self.activeTab = 2;
            }

            $.ajax({
                type: 'GET',
                url: self.vehiclesUrl + "/VehicleDetails?id=" + self.chid + "&alertsPage=" + self.alertsPage + " &warningsPage=" +
                    self.warningsPage + "&activeTab=" + self.activeTab,
                cache: false,
                success: function (result) {
                    self.updateVehicleDetails(result);
                    $("#data-error-alert").hide();
                    self = null;
                },
                error: function (result) {
                    $("#data-error-alert").show();
                    self = null;
                }
            });
        };

VehicleDetails.prototype.updateVehicleDetails = function (result) {
            var self = this;
            self.vehicleDetails = result;
            $("#change-status-button").removeAttr("disabled");
            $("#change-assignments-button").removeAttr("disabled");
            var template = $.templates("#vehicle-deatils-template");
            var htmlOutput = template.render(result);
            $("#content-placeholder").html(htmlOutput);
            //set the active tab back to what it was
            this.showActiveTab(this.activeTab);....



VehicleDetails.prototype.showActiveTab = function (activeTab) {
            //this does not work to keep from blinking
            // on load of the page: switch to the currently selected tab           
            //var hash = window.location.hash;
            //$('#VehicleTabs a[href="' + hash + '"]').tab('show');
            if (activeTab === 0) {
                $('[href="#tabAlarms"]').tab('show');
            }
            if (activeTab === 1) {
                $('[href="#tabOverview"]').tab('show');
            }
            if (activeTab === 2) {
                $('[href="#tabTires"]').tab('show');
            }
        };

I have tried other solutions such as....

<style type="text/css">
    .js #VehicleTabs {
        display: none;
    }
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
    $('html').addClass('js');
</script>

but this only hid the tabs and showed the data for the first tab but I was unable to get to the other tabs.

Any help would be greatly appreciated.

Answer 1

I was able to fix the screen flicker on page refresh by removing the active class from the tab div.

<div id="tabAlarms" class="tab-pane fade in">
                @*<div id="tabAlarms" class="@(Model.ActiveTab == 0 ? "tab-pane fade in active" : "tab-pane fade in")">*@
                    <div class="row" id="alerts">
                        @Html.Partial("_Alerts", Model)
                    </div>
                </div>
                <!--Overview tab-->
                <div id="tabOverview" class="tab-pane fade in">
                @*<div id="tabOverview" class="@(Model.ActiveTab == 1 ? "tab-pane fade in active" : "tab-pane fade in")">*@
                    <div class="row" id="overview">
                        @Html.Partial("_Overview", Model)
                    </div>
                </div>
                <!--Tires tab-->
                <div id="tabTires" class="tab-pane fade in">
                @*<div id="tabTires" class="@(Model.ActiveTab == 2 ? "tab-pane fade in active" : "tab-pane fade in")">*@
                    <div class="row" id="tires">
                        @Html.Partial("_Tires", Model)
                    </div>

                </div>