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

时间:2019-06-04 09:12:06

标签: javascript php laravel view tabs

我有一个管理控制台,并且在该视图选项卡中。我想要做的是加载不同的视图以显示单击的不同选项卡的数据,或者在选项卡中单击“提交”按钮时加载相同的选项卡。 这是我的管理信息中心视图。

@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 个答案:

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