Блог

Главная - Вопросы по программированию - Jquery.load html не инициализирует bootstrap

Jquery.load html не инициализирует bootstrap

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть три страницы: main.html, nav.html, sidebar.html

Я разделил навигацию и боковую панель для своего проекта. На странице навигации у меня есть кнопка для сворачивания страницы боковой панели. Я использую bootstrap framework для темы. Но когда я отделяю его, боковая панель не сворачивается при нажатии кнопки на навигаторе. Вот код main.html

 <link href="global/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="global/js/main/jquery.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $( "#nav" ).load( "inc/nav.html" );
        $( "#sidebar" ).load( "inc/sidebar.html" );
    });
</script>
<div id="nav"></div>
<div class="page-content" style="padding-bottom:70px;">
    <div id="sidebar"></div>
    <div class="content-wrapper bg-white">
        <div class="content">test</div>
    </div>
</div>

И это nav.html

 <div class="navbar navbar-expand-md navbar-dark bg-indigo navbar-static" style="background:#81018d;">
    <div class="navbar-brand">
        <a href="#" class="d-inline-block">
            <img src="../../assets/images/logo/headerwhite.png" alt="">
        </a>
    </div>
    <div class="d-md-none">
        <button class="navbar-toggler sidebar-mobile-main-toggle legitRipple" type="button">
            <i class="icon-paragraph-justify3"></i>
        </button>
    </div>
</div>

И sidebar.html

 <div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">
    <div class="sidebar-content">
        <div class="card card-sidebar-mobile">
            <ul class="nav nav-sidebar" data-nav-type="accordion">
            <li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu" title="Main"></i></li>
            <li class="nav-item"><a href="#" class="nav-link active">Menu Beranda</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Transaksi</a></li>    
            </ul>
        </div>
    </div>  
</div>

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

1. Bootstrap инициализирует элементы управления только при загрузке DOM (по умолчанию). Вам также необходимо сделать это в рамках обратного вызова load() методов для создания экземпляров элементов управления, которые были динамически добавлены в DOM. Однако стоит отметить, что использование AJAX для включения содержимого на каждой странице — не лучшая идея, поскольку вы добавляете дополнительные ненужные запросы на свой сервер. Вместо этого исследуйте включения на стороне сервера, предполагая, что ваш хостинг их поддерживает

2. В дополнение к вышесказанному, если вы загрузите навигационную панель / боковую панель через ajax, вы получите флэш-файл с нестайлинговым контентом (FOUC), где будет отображаться ваша страница, ваш пользователь начнет читать, затем содержимое будет перемещаться по мере загрузки других частей. Это не доставляет удовольствия пользователю.

3. Я думаю, что мне нужно разделить его, потому что у меня так много страниц. Итак, если я отредактирую nav.html отображение также будет меняться на каждой странице. Поэтому мне нужно его разделить. Есть ли какая-либо другая идея сделать это, я имею в виду. Если мы используем его в PHP, мы используем только sintax include («url»), чтобы заставить его работать. Но мне нужно, чтобы это работало в html, а не в PHP. Пожалуйста, приведите решение и пример…

4. Может ли кто-нибудь помочь…