我有一个管理控制台,并且在该视图选项卡中。我想要做的是加载不同的视图以显示单击的不同选项卡的数据,或者在选项卡中单击“提交”按钮时加载相同的选项卡。 这是我的管理信息中心视图。
@extends('layouts.app')
@section('content')
<br />
<br />
<div>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
You are logged in as ADMIN!
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="container">
<div class="row">
<div class="col-md-12"><br />
<form method="post" action="{{url('/admindash')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<h1>Attendance Data</h1>
<br />
Email:<br />
<input type="text" name="email">
<br />
<br />
{{-- Date:<br />
<input type="text" name="date" class="date-picker">
<br />
<br /> --}}
<button type="submit" class="btn btn-default" value="Open In Same Window" id="open_same_window">Submit</button>
</form>
<br />
<br />
<table class="table table-bordered">
<tr>
<td>User ID</td>
<td>Email</td>
<td>Status</td>
<td>Date</td>
<td>Time</td>
</tr>
@foreach($data as $value)
<tr>
<td>{{$value->User_id}}</td>
<td>{{$value->email}}</td>
<td>{{$value->status}}</td>
<td>{{$value->date}}</td>
<td>{{$value->time}}</td>
<td><a href=""><button>Delete</button></a></td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<br />
<form method="post" action="{{url('/admindash')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<h1>Summary Data</h1>
<br />
</form>
<br />
<br />
<table class="table table-bordered">
<tr>
<td>Total Working Hours</td>
<td>Average Working Hours</td>
</tr>
<tr>
<td>{{$response['wsum']}}</td>
<td>{{$response['wavg']}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="container">
<div class="row">
<div class="col-md-12">
<br />
<form method="post" action="{{url('/admindash')}}">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<h1>User List</h1>
<br />
Email:<br />
<input type="text" name="email">
<br />
<br />
<button type="submit" class="btn btn-default" value="Open In Same Window" id="open_same_window">Submit</button>
</form>
<br />
<br />
<table class="table table-bordered">
<tr>
<td>User ID</td>
<td>Name</td>
<td>Email</td>
<td>Username</td>
<td>Address</td>
<td>Phone</td>
<td>Designation</td>
</tr>
<tr>
<td>{{$getdata['id']}}</td>
<td>{{$getdata['name']}}</td>
<td>{{$getdata['email']}}</td>
<td>{{$getdata['username']}}</td>
<td>{{$getdata['address']}}</td>
<td>{{$getdata['phone']}}</td>
<td>{{$getdata['designation']}}</td>
<td><a href=""><button>Update</button></a></td>
<td><a href=""><button>Delete</button></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- <script>
$(".date-picker").nepaliDatePicker({
dateFormat: "%y %m, %d ",
closeOnDateSelect: true,
});
</script> --}}
<script>
$(document).ready(function() {
$('#tabMenu a[href="#{{ old('
tab ') }}"]').tab('show')
});
// Javascript to enable link to tab
$(function() {
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
</script>
在这里,如果我在选项卡中并执行提交按钮,请单击该选项卡,将其重新加载到第一个选项卡,但是我想做的是在单击提交按钮时重新加载相同的选项卡。我正在通过文本框和单击按钮过滤数据。
答案 0 :(得分:0)
在表单中,您可以使用tab-id添加隐藏字段,而在提交后使用重定向后,可以在控制器中添加隐藏字段。您需要在重定向网址中添加标签ID
答案 1 :(得分:0)
<form method="post" action="{{url('/admindash')}}">
{{ csrf_field() }}
<input type="hidden" name="_token" value="{{csrf_token()}}">
<h1>Attendance Data</h1>
<br />
copy and paste it
when you use form it is important to add {{ csrf_field() }} after form tag
答案 2 :(得分:0)
我建议使用#
和选项卡名称进行提交。
<form method="POST" action="<?= $_SERVER['REQUEST_URI'] ?>#tabname">
然后,添加一些这样的JS:
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
答案 3 :(得分:0)
我通过javascript解决了这个问题。接受标签页ID,并在控制器中使用其他标签显示标签页中的视图。谢谢大家的帮助。
<script>
var url = document.location.toString();
if (url.match('#')) {
// $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
$(document).ready(function () {
// $('#tabMenu a[href="#{{ old('tab') }}"]').tab('show');
var baseurl= "{{url('/')}}";
var token ="{{csrf_token()}}";
$(document).off('click','.navtab');
$(document).on('click','.navtab',function(response){
var tabid = $(this).attr('id');
var url =baseurl+'/gettabdata';
var infoData ={tabid:tabid,_token:token};
$.post(url,infoData,function(response){
console.log(response);
$('.tab-content').html(response);
})
alert(tabid);
});
$(document).off('click','.savedata');
$(document).on('click','.savedata',function(response){
$('#mainForm').ajaxSubmit({
// dataType:'json',
success:function(response){
console.log(response);
}
})
});
});
// Javascript to enable link to tab
$(function () {
var hash = window.location.hash;
// hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
</script>