单击提交按钮重新加载相同的选项卡并加载数据或单击选项卡时打开视图

Question

我有一个管理仪表板，在该视图选项卡中。 我想要做的是加载不同的视图来显示单击的不同选项卡的数据，或者在选项卡中单击提交按钮时加载相同的选项卡。 这是我的管理仪表板视图。

@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>

在这里，如果我在选项卡中并执行提交按钮，则单击该选项卡将重新加载到第一个选项卡，但我想要做的是在单击提交按钮时重新加载相同的选项卡。 我正在通过文本框过滤数据并单击按钮。

Answer 1

在表单中，您可以在提交使用后重定向时添加带tab-id的隐藏字段和控制器。 您需要在重定向网址中添加标签ID

Answer 2

         <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

Answer 3

我建议使用#和标签名称提交。

<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;
})

Answer 4

我通过javascript解决了这个问题。 获取选项卡ID并在控制器中使用if else以在选项卡中显示视图。 谢谢大家的帮助。

<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>