how set default active tab in laravel javascript? - javascript

How i can i get my first tab active and selected, because because when i load my page none of my tabs selected and active.
this is the Tabs when the page loaded
and this is after clicking the tab
html
<div class="tabbable-line ">
<!-- Nav Nav-tabs Start -->
<ul class="nav nav-tabs tabs_content">
#foreach ($routes as $route)
<li >
<a href="#{{ $route->id }}" id="ad" data-toggle="tab">
{!! $route->name !!}
</a>
</li>
#endforeach
</ul>
<div class="tab-content blog_tabs">
<!-- tab-content is coming from javascript -->
</div>
</div>
nav-content are in javascript because there's data coming from controller when ever tab is selected, so here is...
Nav content Javascript
$("ul.nav-tabs > li > a").click(function() {
var id = $(this).attr("href").replace("#", "");
console.log(id);
if(id) {
$.ajax({
url: "{{ route('user.schedule.getId') }}",
type: "GET",
data:{'id':id},
dataType: "json",
success:function(data) {
$(".tab-content").empty();
$(".tab-content").html('<div class="tab-pane" name="schedule" id="'+ id +'">')
$.each( data, function( index, object ) {
$(".tab-content").append('<ul class="list-group"><li class="list-group-item">'+ object['schedule_number'] +'</li></ul></div>');
});
}
});
}
});

Inside your foreach loop, add a class active for the first item in your array:
<ul class="nav nav-tabs tabs_content">
#foreach ($routes as $index => $route)
<li {{ $index== 0 ? 'class="active"' : '' }}>
<a href="#{{ $route->id }}" id="ad{{ $route->id }}" data-toggle="tab">
{!! $route->name !!}
</a>
</li>
#endforeach
</ul>
Add please notice that id have to be unique in your document.

Related

How do I change icon with Jquery?

I have any AJAX call that allow to select an item, I'm displaying the selected item with a darker background and the icon marked selected.
I can change the background but when I attempt to change the icon doesn't work. Somebody can explain what I'm doing wrong?
Here it is the code
$("#accounts-list").on('click', '.nav-link', function () {
var object_id = $(this).data('object-id');
$.ajax({
url: "url_to_ajax_call.php",
data: {
'account_id': object_id
},
type: 'POST',
success: function (response) {
// remove class where previously selected
$(".nav-link").removeClass("bg-soft-primary"); // background
$(".nav-link>span.fa-check-circle").removeClass("fa-check-circle").addClass("fa-circle"); // remove checked icon
// apply selected class to the new item
let item = $('.nav-link[data-object-id=' + object_id + ']');
item.addClass('bg-soft-primary'); // apply background
$(item + ">span.fa-circle").removeClass("fa-circle").addClass("fa-circle"); // select checked icon
}
})
})
<div id="accounts-list">
<ul class="nav">
<li class="nav-item">
<div class="nav-link nav-link-card-details bg-soft-primary"
data-object-id="1">
<span class="far fa-check-circle"></span>
Item 1
</div>
</li>
<li class="nav-item">
<div class="nav-link nav-link-card-details"
data-object-id="2">
<span class="far fa-circle"></span>
Item 2
</div>
</li>
<li class="nav-item">
<div class="nav-link nav-link-card-details"
data-object-id="3">
<span class="far fa-circle"></span>
Item 3
</div>
</li><li class="nav-item">
<div class="nav-link nav-link-card-details"
data-object-id="4">
<span class="far fa-circle"></span>
Item 4
</div>
</li>
</li>
</ul>
</div>
Thank you
In $(item + ">span.fa-circle"), item is not a string to be used has a selector... It is a jQuery object.
So do it like this:
item.find("span.far")
Ho! To notice any effect, the should be two fontAwesome classes (one added and one different removed ;)
.removeClass("fa-check-circle").addClass("fa-circle")
Another way would be:
.toggleClass("fa-check-circle fa-circle")

Javascript function only works with input type radio, not with input type button

I have a function for AJAX pagination that only works with certain inputs (radio, checkbox, select) but I want it to use with input type button. This is my html:
{{ form_ajax('onFilterPieces', { update: { 'pieces/pieces': '#partialPieces' } }) }}
<div id ="PiecesFilter">
<nav aria-label="Page navigation example">
<ul class="pagination">
{% for i in 1..pages %}
<li class="page-item">
<input type="radio" name="Filter[page]" value="{{i}}">
</li>
{% endfor %}
</ul>
</nav>
</div>
{{ form_close() }}
This is my JS:
(function($) {
$('#PiecesFilter').on('click', 'input', function(){
var $form = $(this).closest('form');
$form.request();
});
})(jQuery);
I'm using OctoberCMS, that is why I have the twig syntax. Any help would be appreciated. Thank you!

How to give the spinner for tabs while data is loading

function happening(){
$(".spinner").show();
$.ajax({
type: "POST",
url: "<?=base_url()?>timeline/timeline_v2_ajax",
async:false,
cache:false,
error: function() {
console.log('Something is wrong');
},
success: function(msg){
$(".spinner").hide();
$('#default-tab-1').html(msg);
App.init();
FormPlugins.init();
}
});
}
var LandingPage = function() {
"use strict";
return {
init: function() {
$('#default-tab-1').html('<span class="spinner"></span>');
happening();
}
}
}()
$(document).ready(function() {
LandingPage.init();
WhattodoPage.init();
});
<div class="content">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="#default-tab-1" data-toggle="tab" aria-expanded="true">
<span class="semi-bold">What is happening ?</span>
</a>
</li>
<li class="" id="what-to-do">
<a href="#default-tab-2" data-toggle="tab" aria-expanded="false">
<span class="semi-bold">What to do ?</span>
</a>
</li>
</ul>
<span class="spinner"></span>
<div class="tab-content">
<div class="tab-pane fade active in" id="default-tab-1"></div>
<div class="tab-pane fade" id="default-tab-2"></div>
</div>
</div>
</div>
I have two tabs, here i want to display the spinner for the body of the tab while data is loading in both tabs. above is my code, in that i have included the spinner in script but it's not working. can anyone please help me. any help could be appreciated.
I think you should check the ".spinner" class first. i.e. is this class has proper attributes to display anything or not.

Bootstrap nav-tabs check for selected tab using jquery

I have the following Bootstrap nav tabs:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
I need to be able to check which tab is selected and then display an alert. I have the following javascript in my view:
<script>
$(function () {
FormGet('dashboard/delayedspiff', 'delayedspiff');
});
</script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
var id = $('.tab-content .active').attr('id');
if (id == "delayedspiff") {
alert("delayedspiff");
} else {
alert("instantspiff");
}
});
</script>
When I click the tabs it works, but the alert always displays delayedspiff. I need to dislay instantspiff when they click on the instantspiff tab. Can anyone see what I'm doing wrong?
You just need to remove class active from all tabs and add it to the tab which was clicked.
EDIT: In order to get the id of clicked tab, try using an attribute data-id on the tab selections.
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var wrongid = $('.tab-content .active').attr('id');
$('a[data-toggle="tab"]').removeClass("active"); // remove class active from all tabs
$(this).addClass("active"); // add class active to the current tab
var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab
alert($('.tab-content .active')[0].outerHTML); // shows why you are getting the incorrect id
if (correctid == "delayedspiff")
alert("delayedspiff");
else
alert("instantspiff");
});
</script>
Updated fiddle : https://jsfiddle.net/DTcHh/14313/

Menu behaves differently in IE

I'm working on a site that works as expected in Chrome but opening it in Internet Explorer a see that the navigation menu is out of place.
Investigating the problem a saw that not all the list items are wrapped inside the main ul and 2 list items do not have the correct class.
The one with the problem:
The correct one:
My project is made using ASP.NET MVC 4 and Umbraco CMS. The menu View looks like this:
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
<li>
#foreach (var sub in subMenuItems)
{
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<li><a class="parent" href="#sub.Url">#sub.Name</a></li>}
}
</li>
</ul>
}
</li>
}
</ul>
This works fine in Chrome, and cant seem to find the problem for IE.
You should have a new list item for each submenu rather than wrapping all the submenus in one list item (or otherwise nesting list items without separating them into proper nested lists with a ul wrapper).
<ul class="nav">
<li class="#(CurrentPage.Url == "/" ? "current_page_item" : null)"><a class="Lvl1 home" href="/">Home</a></li>
#foreach (var item in menuItems)
{
<li class="#(CurrentPage.Id == item.Id ? "current_page_item" : null) Col1">
<a class="lvl1 parent" href="#item.Url">#item.Name</a>
#{ var subMenuItems = item.Children.Where("Visible"); }
#if (subMenuItems.Count() > 0)
{
<ul>
#foreach (var sub in subMenuItems)
{
<li>
if (sub.HasValue("menuItemImage"))
{
<div class="NavItemHolder">
<div class="NavItemImage">
<img src="#Umbraco.Field(sub, "menuItemImage", recursive: true)">
</div>
<div class="NavItemDesc">
<a href="#sub.Url">
<span>#sub.Name</span><br>
<span>#sub.menuItemInfo</span>
</a>
</div>
</div>
}
else
{<a class="parent" href="#sub.Url">#sub.Name</a>}
</li>
}
</ul>
}
</li>
}
</ul>

Categories

Resources