我当前正在网站中实现非刷新页面加载,并且当用户在侧边栏上选择页面时,我正在使用ajax将页面加载到网站的内容部分。
但是,当我尝试加载页面时,它失去了所有的Bootstrap功能(例如下拉菜单,可切换对象等),并且DataTable也无法加载。
示例:我有一个函数,可将类“ active”添加到初始选项卡中,如果我通过URL加载页面,该选项卡将起作用。
但是,似乎没有通过动态页面加载方法调用该方法,该方法是当用户单击菜单上的页面时触发的。另外,不会加载数据表。
这是尝试解决此问题之后的刷新页面:
$(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函数的调用顺序,但是,引导类的功能仍然不起作用(例如下拉菜单等)。
我需要单击菜单加载页面(组)时,它将加载页面并保留页面的所有内容以及引导功能,因为一旦加载了页面的内容就不会加载目标网页加载。
谢谢。
答案 0 :(得分:0)
我建议在页面文件中包含jQuery和bootstrap .js文件,该文件是动态加载的。也许有更好的方法可以做到这一点,但是效果很好。