Bootstrap 4 вкладки и ajax ошибка JavaScript

Question

Я использую вкладки Bootstrap 4 для отображения содержимого, полученного из вызова AJAX.Проблема в том, что я получаю сообщение об ошибке после завершения вызова.

Ошибка:

Uncaught TypeError: $(...).tab is not a function

Вкладки изначально скрыты, и результат вызова AJAX определяет, какие вкладки будут отображатьсяи какую вкладку открывать.

Вкладки являются стандартным примером:

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item hidden">
        <a class="nav-link" id="home-tab" data-toggle="tab" href="#Anotherhome" role="tab" aria-controls="home" aria-selected="true">Another Home</a>
    </li>
    <li class="nav-item hidden" id="profile-tab-container">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item hidden">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
    <div class="tab-pane fade" id="Anotherhome" role="tabpanel" aria-labelledby="home-tab">Another Home</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>

Вызов AJAX также является стандартным.Он вызывается на $(document).ready:

$.ajax({
    url: _url,
    method: "GET",
    success: function (data) {
        // data object gets populated here

        var _profileTab = $("#profile-tab-container");  // <= this is valid - correct object retrieved
        _profileTab.show();                             // <= show the tab on the screen. no error here
        $("#profile-tab").tab("show");                  // <= use the internal bootstrap method to select the tab. error here

    },
    error: function (err) {
        // error handling here;
    }
});

Если я поставлю точку останова на строке, которая вызывает ошибку:

$("#profile-tab").tab("show");  

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

Примечание.Ошибка возникает при загрузке страницы, но если я снова вызываю функцию AJAX (с помощью кнопки), все работает нормально.

Есть ли какой-либо способ запустить весь вызов AJAX или метод отображения после вкладокбыли применены?Или какой-то другой способ отображать содержимое и взаимодействия без ошибок?Я не против отобразить весь контент на странице и скрыть его после звонка?

Answer 1

Ваш код работает нормально, я просто пишу базовый код с фиктивным URL-адресом ajax, и он работает отлично. Пожалуйста, проверьте ваши библиотеки дважды, я думаю, что вы скучали по кому-либо. Попробуйте это, я надеюсь, это поможет вам. Спасибо

Dummy API ссылка

$('document').ready(function() {
  $.ajax({
    url: 'https://reqres.in/api/users?page=2',
    method: "GET",
    success: function (data) {
        var _profileTab = $("#profile-tab-container");
        _profileTab.show();
        $("#profile-tab").tab("show");
    },
    error: function (err) {
        console.log(err);
    }
});
})

.hidden {
  display: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item hidden">
        <a class="nav-link" id="home-tab" data-toggle="tab" href="#Anotherhome" role="tab" aria-controls="home" aria-selected="true">Another Home</a>
    </li>
    <li class="nav-item hidden" id="profile-tab-container">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item hidden">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
    <div class="tab-pane fade" id="Anotherhome" role="tabpanel" aria-labelledby="home-tab">Another Home</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>

 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Ваш код работает нормально.

1. Добавьте все необходимые библиотеки.
2. Проверьте ваш URL-адрес ajax api и его ответ. Я использовал фиктивный URL-адрес ajax: https://jsonplaceholder.typicode.com/todos/1

3. Внимательно проверьте agian.

   $( document ).ready(function() {
    $.ajax({
       url: 'https://jsonplaceholder.typicode.com/todos/1',
       method: "GET",
       success: function (data) {
           // data object gets populated here
   
           var _profileTab = $("#profile-tab-container");  // <= this is valid - correct object retrieved
           //_profileTab.show();                             // <= show the tab on the screen. no error here
           $("#profile-tab").tab("show");                  // <= use the internal bootstrap method to select the tab. error here
   
       },
       error: function (err) {
           // error handling here;
       }
    });
   });
   

Добавление библиотек в html-файл

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>