reload the same tab on click of a submit button and load data or open a view when a tab is clicked

Question

I have an admin dashboard and within that view tabs. what I want to do is load different view to show data for different tabs clicked or load the same tab when a submit button is clicked in the tab. this is my admin dashboard view.

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

here if I am in a tab and do a submit button click the tab is reloaded to the first tab but what I wanna do is reload the same tab on the click of the submit button. I am filtering data through a textbox and the click of the button.

Answer 1

In you form you can add hidden field with tab-id and in controller when you do redirect after submit use it. You need add tab id in redirect url

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

I suggest submitting with a # and the tab name.

<form method="POST" action="<?= $_SERVER['REQUEST_URI'] ?>#tabname">

Then, add some JS like this:

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

i solved the problem through javascript. took the tab id and used if else in controller to show view in the tabs. thanks everyone for helping though.

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