如何在不刷新页面的情况下保留jQuery和Bootstrap功能?

时间:2019-05-04 09:31:48

标签: javascript jquery ajax twitter-bootstrap datatables

问题

我当前正在网站中实现非刷新页面加载,并且当用户在侧边栏上选择页面时,我正在使用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函数的调用顺序,但是,引导类的功能仍然不起作用(例如下拉菜单等)。

我在找什么?

我需要单击菜单加载页面(组)时,它将加载页面并保留页面的所有内容以及引导功能,因为一旦加载了页面的内容就不会加载目标网页加载。

谢谢。

1 个答案:

答案 0 :(得分:0)

我建议在页面文件中包含jQuery和bootstrap .js文件,该文件是动态加载的。也许有更好的方法可以做到这一点,但是效果很好。