#javascript #ajax #bootstrap-4 #adminlte
Вопрос:
Я хочу нарисовать данные динамического меню боковой панели из базы данных с помощью AJAX в панели администратора 3 с панелью начальной загрузки 4. Когда я динамически загружал данные меню боковой панели с помощью AJAX, боковая панель открывалась или сворачивалась, не работала.Мой URL-адрес JSFiddle приведен ниже. Когда статические данные нажимаются на класс». sidebar » без ajax, меню открывается/скрывается. Но использование меню вызова ajax открыть/скрыть не работает.
$(document).ready(function(){ var url = ""; $.ajax({ url: url, }).done(function(resp){ //retrive data var ret = 'lt;nav class="mt-2"gt;lt;ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"gt;lt;li class="nav-item"gt;lt;a href="#" class="nav-link"gt;lt;i class="nav-icon fas fas fa-user"gt;lt;/igt;lt;pgt;Adminlt;i class="right fas fa-angle-left"gt;lt;/igt;lt;/pgt;lt;/agt;lt;ul class="nav nav-treeview"gt;lt;li class="nav-item"gt;lt;a href="#add-order.php" class="nav-link"gt;lt;i class="far fa-circle nav-icon"gt;lt;/igt;lt;pgt;Rahimlt;/pgt;lt;/agt;lt;/ligt;lt;/ulgt;lt;ul class="nav nav-treeview"gt;lt;li class="nav-item"gt;lt;a href="#" class="nav-link"gt;lt;i class="far fa-circle nav-icon"gt;lt;/igt;lt;pgt;Testlt;/pgt;lt;/agt;lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt;lt;/navgt;'; $('.sidebar').html(ret); }); }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;"gt; lt;!-- Site wrapper --gt; lt;div class="wrapper"gt; lt;!-- Navbar --gt; lt;nav class="main-header navbar navbar-expand navbar-primary navbar-dark"gt; lt;!-- Left navbar links --gt; lt;ul class="navbar-nav"gt; lt;li class="nav-item"gt; lt;a class="nav-link" data-widget="pushmenu" href="#" role="button"gt;lt;i class="fas fa-bars"gt;lt;/igt;lt;/agt; lt;/ligt; lt;!-- lt;li class="nav-item d-none d-sm-inline-block"gt; lt;a href="#" class="nav-link"gt;Homelt;/agt; lt;/ligt; lt;li class="nav-item d-none d-sm-inline-block"gt; lt;a href="#" class="nav-link"gt;Contactlt;/agt; lt;/ligt; --gt; lt;/ulgt; lt;!-- Right navbar links --gt; lt;ul class="navbar-nav ml-auto"gt; lt;li class="nav-item dropdown user-menu"gt; lt;a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"gt; lt;img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image"gt; lt;span class="d-none d-md-inline"gt;adminlt;/spangt; lt;/agt; lt;ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right"gt; lt;!-- Menu Footer--gt; lt;li class="user-footer"gt; lt;!--lt;a href="#" class="btn btn-default btn-flat"gt;Profilelt;/agt;--gt; lt;a href="logout.php" class="btn btn-danger btn-flat float-right"gt;Sign outlt;/agt; lt;/ligt; lt;/ulgt; lt;/ligt; lt;!-- lt;li class="nav-item"gt; lt;a class="nav-link" data-widget="fullscreen" href="#" role="button"gt; lt;i class="fas fa-expand-arrows-alt"gt;lt;/igt; lt;/agt; lt;/ligt; lt;li class="nav-item"gt; lt;a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"gt; lt;i class="fas fa-th-large"gt;lt;/igt; lt;/agt; lt;/ligt; --gt; lt;/ulgt; lt;/navgt; lt;!-- /.navbar --gt;lt;aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4"gt; lt;a href="#" class="brand-link"gt; lt;i class="brand-image fas fa-tachometer-alt" style="opacity: .8"gt;lt;/igt; lt;span class="brand-text font-weight-light"gt;Dashboardlt;/spangt; lt;/agt; lt;div class="sidebar"gt; lt;/divgt; lt;/asidegt; lt;div class="container-fluid"gt; lt;div class="content-wrapper" style="min-height: 549px;"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; Ответ №1:
Просто поместите код после успешной функции, и он будет работать.
$('[data-widget="treeview"]').Treeview('init');