J'ai un tableau de bord d'administrateur et dans cet ensemble des onglets. Ce que je veux faire, c'est charger une vue différente pour afficher les données pour différents onglets cliqués ou chargez le même onglet lorsqu'un bouton Soumettre est cliqué dans l'onglet. Ceci est ma vue de tableau de bord administratif.
@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>
4 Réponses :
In You FORMULAIRE Vous pouvez ajouter du champ masqué avec Tab-ID et dans le contrôleur lorsque vous redirigez après la soumission, utilisez-la. Vous avez besoin d'ajouter un identifiant d'onglet dans la redirection URL
<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
Je suggère de soumettre avec un # code> et le nom de l'onglet. 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;
})
n'a pas travaillé la même chose arrive. Je suis redirigé vers la première onglet sur le bouton Cliquez sur le bouton. Mais après avoir redirigé si je vais sur la languette où j'ai cliqué sur le bouton où les données ont été chargées. Le bouton est destiné à filtrer les données en fonction de l'e-mail
J'ai résolu le problème via JavaScript. A pris l'identifiant de l'onglet et utilisé si autrement dans le contrôleur pour afficher la vue dans les onglets. Merci à tout le monde d'avoir aidé cependant.
<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>
Un meilleur moyen de soumettre les données serait d'utiliser AJAX, conserverait l'utilisateur sur le même onglet sans aucun rechargement.