Laravel: Click event on tab pane - javascript

I have tables called: 1) purchase_requisitions; 2) liquidations. Assuming that I have 100 data for both purchase requisitions and liquidations.
In our application, we have all the lists of users and when the client clicked a certain user, there will be a modal that will pop-up.
In this modal you can see all the records for that user and also there's 2 tab. 1) Purchase Requisition tab; 2) Liquidations tab.
Purchase Requisition is the active tab once the client clicked the certain user and this is where I'm fetching the data of purchase requisitions.
Now what I want is, I dont want to load the 100 data of purchase requisitions and liquidations at the same time.
I want to load the liquidations, for example when I clicked the liquidations tab.
Question: Why does my click event is not working?
Tab pane
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
Javascript
<script type="text/javascript">
function getPurchasesPayments(vendor_id,start_date,end_date){
// .... code
}
$(document).ready(function(){
var vendor_id = "<?= $vendor->id; ?>";
var start_date = "<?= $start_date;?>";
var end_date = "<?= $end_date;?>";
if ($('.purchases-payments').length > 0) {
$('div').click('.purchases-payments',function(e){
// $('.purchases-payments').click(function(e){
$('.purchases-payments-details').html('');
getPurchasesPayments(vendor_id,start_date,end_date);
e.preventDefault();
return false;
})
}
if ($('.liquidations').length > 0) {
$('div').click('.liquidations',function(e){
// $('.liquidations').click(function(e){
alert('test');
e.preventDefault();
return false;
})
}
// if ($('.liquidations').hasClass('active')) {
// alert('liquidations active');
// }
})

You're targeting "div" in your jQuery click code, but you want to target your a elements, you should also add classes or ids to this elements which you will be targeting.
Add ids to your a elements
<ul class="nav nav-pills">
<li class="nav-item" style="width: 10%">
<a id="purchases" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
</li>
<li id="liquidations" class="nav-item" style="width: 10%">
<a class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
</li>
</ul>
and in your javascript:
$(document).ready(function(){
$('#purchases').click(function(e){
// your code
});
$('#liquidations').click(function(e){
// your code
});
})

Related

How to let current bootstrap tab to remain active?

May I know how to maintain currect bootstrap tab (id="liProcessin") active after reload?
I am unable to do it via:
$('.btn-save-all').click(function () {
$("input[name*='txtid']").each(function () {
let id = $(this).attr('name');
id = id.replace('txtid', '');
let dat = $(this).val();
SaveExpectedBookDate(id, dat);
});
alert("Success");
window.location.reload();
/* $('#profile-tab').attr('class', 'active in');*/
$('#liProcess-in').addClass('active in');
});
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active in">All My Requests
</li>
<li role="presentation" class="" id="liProcessin">In-Process
</li>
</ul>
$(document).ready(function(){
$('#liProcess-in').addClass('active in');
});
maybe you can add in your js like that

Return to same tab after form submit laravel 8

I have a view with multiple tabs. Each having different forms. When I submit a form from one tab, it returns to same page but primary tab. How could I get to return to same tab from which I was working.
controller
public function updateProfile(Request $request)
{
$user = User::where('id', Auth::user()->id)->first();
$user->update([
'full_name' => $request->full_name,
'phone' => $request->phone,
]);
}
return redirect()->back();
}
html form
<form action="{{route('management.update')}}" method="POST" enctype="multipart/form-
data">
This is how my tabs are :
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-
tabs-2" role="tab"
aria-controls="ex1-tabs-2" aria-selected="false"><i class='bx bxs-user-
rectangle'></i> User</a>
</li>
#endif
<li class="nav-item" role="presentation">
<a class="nav-link " id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1"
role="tab"
aria-controls="ex1-tabs-1" aria-selected="true"><i class='bx bx-
buildings'></i> Profile</a>
</li>
</ul>
On the controller send the data on which tab should be set active after redirect. You can do it by sending flash session.
Session::flash('active-tab', '#ex1-tab-1');
Then on the view end, check if the session exists and make the tab active with the data on session.
#if(Session::has('active-tab'))
#php
$active_tab= Session::get('active-tab');
#endphp
$(document).ready(function(){
$(".active").removeClass("active");
$('{{$active_tab}}').addClass("active");
})
#endif
Inside your html form add hidden input element.
<input type="hidden" name="tab" value="<the tab id>">
And in your Controller, return your route with data, and put the request tab on it.
$data =['tab' => $request->tab];
return redirect()->back()->with($data);
Lastly, in your nav link and tab pane, put a condition to check the tab value
<a class="nav-link #if (request('tab') == 'ex1-tab-2') active #endif" ..>

How to active the 'nav-link disabled' using jquery?

- List item
<ul class="nav nav-tabs-outline">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#shot-Title">Title</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Description" id="disco">Description</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Skills">Exprtise and Skills</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#shot-Budget">Budget</a>
</li>
</ul>
JavaScript
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').prop('disabled', true);
} else {
//If there is text in the input, then enable the button
$('#disco').prop('disabled', false);
}
});
});
</script>
There is a input element in title tag , what i want to do is when i type something in title input the description link should get activated ,
is there a way to active the 'nav-link disabled' using jquery?
Hi Aksingh welcome to Stackoverflow's community.
In your code disabled and active are classes not attributes or properties.
So you can use jQuery's addClass and removeClass methods to solve your problem
try this code..
$(document).ready(function(){
$('#jobpostname').keyup(function () {
if ($(this).val() == '') {
//Check to see if there is any text entered
// If there is no text within the input then disable the button
$('#disco').addClass('disabled');
$('#disco').removeClass('active');
} else {
//If there is text in the input, then enable the button
$('#disco').addClass('active');
$('#disco').removeClass('disabled');
}
});
});

How to manage more effectively html button click events?

It looks ridiculous to do so many tasks on a button click while every button should have its own events:
function allStories() {
$('#zero-md').hide();
$('.container-aboutme').hide();
$('.container-allstories').show();
$('.container-allstories').load("pages/allstories.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link").addClass("nav-link active");
}
function aboutMe() {
$('#zero-md').hide();
$('.container-allstories').hide();
$('.container-aboutme').show();
$('.container-aboutme').load("pages/about.html");
$("#home").removeClass("nav-link active").addClass("nav-link");
$("#allposts").removeClass("nav-link active").addClass("nav-link");
$("#aboutme").removeClass("nav-link").addClass("nav-link active");
}
<li class="nav-item">
<a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
</li>
Is there is a better, more effective way to organize such events with less code?
You mean this
$("#nav").on("click",".nav-link",function(e) {
e.preventDefault(); // stop the link
const id = this.id;
const $thisContainer = $('.container'+id);
$('#zero-md').hide();
$('.container').hide(); // hide all containers
$thisContainer.load("pages/"+id+".html",function() { // perhaps not load if already loaded
$thisContainer.fadeIn("slow");
}) ;
$(".nav-link").removeClass("active")
$(this).addClass("active")
})
<ul id="nav">
<li class="nav-item">
<a class="nav-link" id="allposts" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="about" href="#">About me</a>
</li>
</ul>
Yes. Try to keep your code DRY (don't repeat yourself.)
Add an event listener in your JS.
Use e.target to determine what was clicked.
Chain your commands together when they're operating on the same elements.
Don't remove a class and then add the same class back. Just remove the one you want to get rid of.
I've added some stand in elements since not everything was present in your HTML.
$('.nav-link').click( (e)=>{
let theLink = $(e.target).attr('id');
const container = '.container-'+$(theLink).attr('id');
$('#zero-md').hide();
$('.container').hide();
$(container).show().load("pages/"+theLink+".html");
alert('loading: pages/'+theLink+'.html');
$("#home").removeClass("nav-link active").addClass("nav-link");
$(".nav-link").removeClass("active");
$("#"+theLink).addClass("active");
});
.active {
font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
<a class="nav-link" id="allstories" href="#">All posts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="aboutme" href="#">About me</a>
</li>
<div class="container container-allstories">All Stories</div>
<div class="container container-aboutme">About Me</div>
<div id="zero-md">Zero MD</div>

Automatically scroll through tabs using jQuery

I have a tab list code posted below.
//TabList
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a id="t1" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t2" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t3" href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a id="t4" href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab"></a>
</li>
</ul>
Each tab has a pic and some info. I want to automatically scroll through each tab every 5 seconds and then start at the first when the end is reached.
Using a setInterval function (Posted Below) i can get it to work but the infomation does not change. That is because it doesn't add an active class to the hyperlink.
//setInterval Function
setInterval(function () {
//get currently-on tab
var onTab = tabs.filter('.active');
//click either next tab, if exists, else first one
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
nextTab.click();
}, 1000);
var tabs = $('#tabs li');
//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function () {
$(this).addClass('active').siblings('.active').removeClass('active');
}
});
To get it working with the information showing when tab changes i use this code.
tabs.click(function () {
var curr = $('li.active');
curr.removeClass('active');
curr.next().find("a").click();
curr.next().addClass('active');
});
The Problem is when it reaches the end of the it does not go back to the start i have looked at answers on stack-overflow like this but can't get it to work. I feel like i cant see the forest for the trees and that it is a simple answer. Any Help will be greatly appreciated.
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
hi yo:) Here when u get last element, u should add 'active' class to your first element of list:) Smth like:
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first().addClass('active');

Categories

Resources