Проблема
В настоящее время я выполняю загрузку страниц без обновления на своем веб-сайте и использую ajax для загрузки страницы в соответствии с разделом содержимого моего веб-сайта, когда пользователь выбирает страницу на боковой панели..
Однако, когда я пытаюсь загрузить страницу, она теряет все свои функции Bootstrap (такие как выпадающие списки, переключаемые и т. Д.) И DataTables тоже не загружаются.
Пример: У меня есть функция, которая добавляет класс 'active' на начальную вкладку, которая работает, если я загружаю страницу через URL.
Однако, похоже, он не вызывается через метод динамической загрузки страницы, который запускается, когда человек нажимает на страницу в меню.Кроме того, DataTables не будут загружаться.
Это часть загрузки страницы без обновления после попыток исправить проблему:
$(document).on('click', 'a[name=user], a[name=moderator], a[name=admin], a[name=groups]', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.get('preloader.html', function(html) {
$("#inner_content").append(html);
});
if(location.pathname != href) {
loadContent( '#css', href, '#css' );
loadContent( '#script_elements', href, '#script_elements' );
window.history.pushState('page2', 'Title', href);
}
loadContent( '#inner_content', href, '#inner_content' );
});
//Content Loading Function
function loadContent(target, url, selector) {
$.ajax({
url: url,
success: function(data,status,jqXHR) {
$(target).empty();
$(target).html($(data).find(selector).addBack(selector).children());
}
});
}
Структура страницы, которая должна быть загруженачто-то в этом роде (лезвие):
@extends('user.layouts.main')
@section('extra_css')
<style>
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.dataTables_length !important {
margin-left:20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.colorpicker-alpha {display:none !important;} .colorpicker{ min-width:128px !important;}
</style>
@endsection
@section('title', 'Group')
@section('content')
<div class="row" id="content">
<div class="col">
<div class="tabs tabs-dark rounded-0 shadow">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#group1" name="groupSelector" data-toggle="tab" value="{{ $user->group->id }}">{{ $user->group->name }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="group1">
<div id="#{{ $user->id }}" class="tab-pane active ">
<div class="row">
<div class="col-xl-12">
<section class="card">
<header class="card-header">
<div class="card-actions">
<a href="#" class="card-action-loader" style="display: none;" name="loader"></a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item text-1 popup-with-zoom-anim ws-normal" href="#chooseRole">Choose Role</a>
<a class="dropdown-item text-1" href="#" id="admin">Admin</a>
<a class="dropdown-item text-1" href="#" id="moderator">Moderator</a>
<a class="dropdown-item text-1" href="#" id="user">User</a>
</div>
<i id="loading" class="fa fa-spinner fa-spin fa-fw"></i>
<a href="#" class="card-action-toggle" data-card-toggle></a>
</div>
</header>
<div class="card-body pt-0" style="margin-top:-13px;">
<table class="table table-bordered table-striped" id="{{ $user->id }}" style="border: 1px solid #E3E4E7;" name="usersTable">
<thead>
<tr>
<th>#</th>
<th>{!! __('groups.user') !!}</th>
<th>{!! __('groups.rank') !!}</th>
<th>{!! __('groups.lastOn') !!}</th>
<th>{!! __('groups.activity') !!}</th>
<th>{!! __('groups.xyz') !!}</th>
<th></th>
</tr>
</thead>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('bottom_elements')
<script>
$(document).ready(function() {
var id = $(this).attr('id');
var usersTable = $('table[name=usersTable]#' + id).DataTable({
autoWidth: false,
"processing": true,
"serverSide": true,
"paging": true,
"fnInitComplete": function() {
$('#loading').hide();
},
"order": [ 2, 'desc' ],
dom: "<'row mt-0 mb-0 pt-4 pb-0'<'col-sm-12 col-md-5 pt-0 mb-0 pb-0 'B<'pt-3 mt-4 mb-0'l>><'col-sm-12 mt-4 mb-0 pt-0 col-md-7'p>>",
"buttons": [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV'
}
],
"ajax":{
"url": "/groups/populate",
"type": "POST",
"dataType": "json",
"headers": { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
"data": function ( d ) {
d.group = group;
return $.extend( {}, d, {
group: group,
type: 'members'
});
},
error: function (xhr, error, thrown) {
console.log(xhr);
}
},
"columns": [
{ "data": "user" },
{ "data": "rank" },
{ "data": "lastOn" },
{ "data": "activity" },
{ "data": "xyz" }
]
});
});
$('.dataTables_processing').addClass('dataTables_empty');
$('.dt-button').addClass('btn btn-default btn-sm');
$('.tab-content div:first').addClass('active');
});
</script>
@endsection
Основной файл выглядит так:
<!doctype html>
<html class="fixed">
@include('user.includes.head')
<section id="css">
@yield('extra_css')
</section>
<body>
<section class="body">
@include('user.layouts.navbar')
<div class="inner-wrapper">
@include('user.layouts.sidebar')
<section role="main" class="content-body">
<header class="page-header">
<h2 id="title">@yield('title')</h2>
</header>
@if (session('message_error'))
<div class="row message">
<div class="col-xl-12">
<div class="alert alert-danger">
<strong>Error:</strong> {{ session('message_error') }}
</div>
</div>
</div>
@endif
<div id="innerContent">
@yield('content')
</div>
</section>
</div>
</section>
@include('user.includes.footer')
<div id="bottom_elements">
@yield('bottom_elements')
</div>
</body>
</html>
Что я пробовал до сих пор?
Я пытался изменить последовательностьоднако из вызовов функции loadContent функциональность классов начальной загрузки все еще не работала (например, раскрывающиеся списки и т. д.).
Что я ищу?
Мне это нужнокогда вы щелкаете по меню для загрузки страницы (групп), она загружает страницу и сохраняет все ее содержимое, а также функциональность начальной загрузки, поскольку она не загружается после загрузки содержимого целевой страницы.
Спасибо.