перезагрузка части вкладки и ее счетчика меток, но остается там без обновления страницы

#javascript #html #jquery #ajax

#javascript #HTML #jquery #ajax

Вопрос:

могу ли я попросить помощи относительно этого фрагмента кода? Я перезагружаю часть div (которая в основном представляет собой вкладку со счетчиком на ее метке), чтобы обновить текущее количество элементов в ней. Я могу успешно перезагрузить часть div, только используя:

$("#custom-tabs-one-tab").load(location.href " #custom-tabs-one-tab");
.

Это та часть кода, которую я пытаюсь перезагрузить. (только для этого div)

 <div class="card-header p-0 pt-1" id="append_note_data_counter_tab"&&t;
    <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist"&&t;
        <?php if ($user['appendtimekeepin&approval'] == 'true') { ?&&t;
            <li role="presentation" class="nav-item"&&t;
                <a class="nav-link active" href="#append_note-tab1" aria-controls="append_note-tab1" role="tab" data-to&&le="tab"&&t;Append Timekeepin& Approvalamp;nbsp;<span class="bad&e bad&e-primary"&&t;<?php echo $eatimekeepin&countapproval; ?&&t;</span&&t;</a&&t;
            </li&&t;
        <?php } ?&&t;
        <?php if ($user['authorizedovertimeapproval'] == 'true') { ?&&t;
            <li role="presentation" class="nav-item"&&t;
                <a class="nav-link" href="#append_note-tab2" aria-controls="append_note-tab2" role="tab" data-to&&le="tab"&&t;Authorized Overtime Approvalamp;nbsp;<span class="bad&e bad&e-success"&&t;<?php echo $eaovertimecountapproval; ?&&t;</a&&t;
            </li&&t;
        <?php } ?&&t;
        <?php if ($user['chan&escheduleapproval'] == 'true') { ?&&t;
            <li role="presentation" class="nav-item"&&t;
                <a class="nav-link" href="#append_note-tab3" aria-controls="append_note-tab3" role="tab" data-to&&le="tab"&&t;Chan&e Schedule Approvalamp;nbsp;<span class="bad&e bad&e-warnin&"&&t;<?php echo $hrchan&eschedcountapproval; ?&&t;</a&&t;
            </li&&t;
        <?php } ?&&t;
        <?php if ($user['departmentscheduleapproval'] == 'true') { ?&&t;
            <li role="presentation" class="nav-item"&&t;
                <a class="nav-link" href="#append_note-tab4" aria-controls="append_note-tab4" role="tab" data-to&&le="tab"&&t;Department Schedule Approvalamp;nbsp;<span class="bad&e bad&e-dan&er"&&t;<?php echo $easchedulelistcountapproval; ?&&t;</a&&t;
            </li&&t;
        <?php } ?&&t;
    </ul&&t;
</div&&t;
  

Я тоже пробовал этот метод, но безуспешно.

 <script&&t;
$(document).ready(function(){
    $('a[data-to&&le="tab"]').on('show.bs.tab', function(e) {
        localStora&e.setItem('activeTab', $(e.tar&et).attr('href'));
    });
    var activeTab = localStora&e.&etItem('activeTab');
    if(activeTab){
        $('#custom-tabs-one-tab a[href="'   activeTab   '"]').tab('show');
    }
});
</script&&t;
  

Вкладка перезагружается и обновляет счетчик, но проблема в том, что она не остается на предыдущей выбранной вкладке, она всегда возвращается к первой.

Есть ли обходной путь для решения этой проблемы? Заранее спасибо, ребята.

Ответ №1:

Попробуйте выбрать активную вкладку после перезагрузки div, передав обратный вызов .load функции. Что-то вроде этого:

 $("#custom-tabs-one-tab").load(location.href   " #custom-tabs-one-tab", function() {
    var activeTab = localStora&e.&etItem('activeTab');
    if(activeTab){
        $('#custom-tabs-one-tab a[href="'   activeTab   '"]').tab('show');
    }
});
  

Комментарии:

1. Спасибо, это работает отлично. Я в замешательстве, я изучу это подробнее, я не знал, что мы можем добавить функцию внутри .load().