如何在不刷新页面加载的情况下保留 jQuery 和 Bootstrap 功能？
Posted
技术标签:
【中文标题】如何在不刷新页面加载的情况下保留 jQuery 和 Bootstrap 功能？【英文标题】：How to retain jQuery & Bootstrap functionality with no-refresh page loading? 【发布时间】：2019-09-22 16:09:18 【问题描述】：问题
我目前正在我的网站中实现非刷新页面加载，并且当用户在侧边栏上选择页面时，我正在使用 ajax 将页面相应地加载到我网站的内容部分。
但是，当我尝试加载页面时，它会丢失其所有引导功能（例如下拉菜单、可切换等），并且 DataTables 也不会加载。
示例：我有一个函数可以将“活动”类添加到初始选项卡，如果我通过 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 函数调用的顺序，但是引导类的功能仍然不起作用（例如下拉菜单等）。
我在寻找什么？
我需要当您单击菜单加载页面（组）时，它会加载页面并保留它的所有内容以及引导功能，因为它不会在目标页面加载。
谢谢。
【问题讨论】：
【参考方案1】：我建议在您的页面文件中包含 jQuery 和 bootstrap .js 文件，该文件正在动态加载。可能有更好的方法来执行此操作，但效果很好。
【讨论】：
以上是关于如何在不刷新页面加载的情况下保留 jQuery 和 Bootstrap 功能？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不刷新的情况下执行 jquery ajax 来重新加载我的数据
如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？