Develop Reference

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.

How to select 2nd bootstrap tab on load of page?

EDIT: So i ditched the whole thing and resorted to javascript with these new codes #Udara Kasun's code worked and it was close but not what I was trying to achieve. tried these codes for a while and i think i almost got it.
<script>
function myFunction1()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(1) a').tab('show')
});
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
}
function myFunction3()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(3) a').tab('show')
});
}
</script>
<li role="presentation" class="active" id="tabMenu1" onclick="myFunction1()">
<a href="#tabZone" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" id="tabMenu2" onclick="myFunction2()">
<a href="#tabChapels" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
<li role="presentation" id="tabMenu3" onclick="myFunction3()">
<a href="#tabUnits" data-toggle="tab" role="tab" aria-controls="tab3">
Units
</a>
</li>

Did you try to do like this?
$(document).ready(function(){
$('.nav-tabs a:last').tab('show') ;
var lastselectedtab = localStorage.getItem("ActiveTab");
$('.nav-tabs a[href="'+(lastselectedtab==''?"#tabChapels":lastselectedtab)+'"]').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
localStorage.setItem("ActiveTab", target);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
Zones
</li>
<li role="presentation">
Chapels
</li>
</ul>
<div id="tabContent1" class="tab-content" style="font-family:Arial Unicode MS;">
<div role="tabpanel" class="tab-pane fade" id="tabZone">
Content 1
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tabChapels">
Content 2
</div>
</div>
</div>
Code pen Link
https://codepen.io/udarakasun/pen/YdyRRy

Nobody seemed to care anymore haha anyways for those of you who are wanting to achieve the same thing that I wanted to, I've created a stupid and ingenious way but it works.
<script language="javascript">
<?php
if(isset($_GET['tabName']))
{
if($_GET['tabName']=="TAB1")
{
echo "var tabNo=1;";
$_SESSION['tabNo']=1;
}
elseif($_GET['tabName']=="TAB2")
{
echo "var tabNo=2;";
$_SESSION['tabNo']=2;
}
}
?>
function loadscript()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child('+<?php echo $_SESSION['tabNo'];?>+') a').tab('show')
});
}
function myFunction1()
{
var tabName="TAB1";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
var tabName="TAB2";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction3()
{
var tabName="TAB3";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
and for the body, you have to declare onload="loadscript()"
After that you'll need to add bootstrap components to your page. This can be done easier through ADOBE DREAMWEAVER.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" onClick="myFunction1()">
<a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" onClick="myFunction2()">
<a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>

Problem with adding click listener to list element in vue

I am fiddling around with vue, and for some reason am not able to add a click event listener to a <li>
HTML:
<div id="example">
<vue-navbar></vue-navbar>
<nav-drawer v-bind:open="open">
<div slot="drawer-content">
<ul class="nav flex-column" id="DrawerItems">
<li class="nav-item" v-on:click="DoShowHome">
<a class="nav-link" >
<i class="ion-ios-home"></i> Home
</a>
</li>
<li class="nav-item" v-on:click="DoShowStatistics">
<a class="nav-link" >
<i class="ion-stats-bars"></i> Statistics
</a>
</li>
<li class="nav-item" v-on:click="DoShowActivity">
<a class="nav-link" >
<i class="ion-flash"></i> Activity
</a>
</li>
<li class="nav-item" v-on:click="DoShowSettings">
<a class="nav-link" >
<i class="ion-gear-b"></i> Settings
</a>
</li>
</ul>
</div>
<div slot="main-content">
<div class="container-fluid">
<div class="row">
<div id="app-content">
<div v-if="ShowHome">ShowHome</div>
<div v-if="ShowStatistics">ShowStatistics</div>
<div v-if="ShowActivity">ShowActivity</div>
<div v-if="ShowSettings">ShowSettings</div>
</div>
</div>
</div>
</div>
</nav-drawer>
</div>
with the script.js containing the following vue component:
var example = new Vue({
el: '#example',
data: function(){
return {
open: true,
ShowHome: true,
ShowStatistics: false,
ShowActivity:false,
ShowSettings:false
}
},
created: function(){
messageBroker.$on('toggle-nav-drawer', this.toggleDrawer)
},
beforeDestroy: function() {
messageBroker.$off('toggle-nav-drawer', this.toggleDrawer)
},
methods: {
toggleDrawer: function() {
this.open = !this.open;
},
DoShowHome: function(event){
this.ShowHome = true;
this.ShowStatistics = false;
this.ShowActivity = false;
this.ShowSettings = false;
},
DoShowStatistics: function(event){
this.ShowHome = false;
this.ShowStatistics = true;
this.ShowActivity = false;
this.ShowSettings = false;
},
DoShowActivity: function(event){
this.ShowHome = false;
this.ShowStatistics = false;
this.ShowActivity = true;
this.ShowSettings = false;
},
DoShowSettings: function(event){
this.ShowHome = false;
this.ShowStatistics = false;
this.ShowActivity = false;
this.ShowSettings = true;
}
}
});
I am probably doing this wrong, but for the life of me after finding dozens of tutorials I am not able to reproduce a working onclick method. Console isn't telling me anything either.
The idea is that I will later create the content of the fields that are dependant on those "Show*" variables, and when i call the function from console by calling
example.DoShowActivity()
It does display the other div. What am i missing?

how to make the tab is active in jquery based upon URL

here i am using tab it is fine,i want to make some extra changes , in my footer page i have 4 link , if i am click that link means URL should be like this ouroffice.php?cityname=chennai, now what i want to do means bassed upon the cityname i want to make the tab is active i tried but i am not able to make the tab is active,how can do this?
//var cityname = '<?php echo $_GET['cityname']?>';
var cityname = "hydrabad";
if (cityname == "chennai") {
$("#nv_li").tabs({
active: 1
});
} else if (cityname == "hydrabad") {
$("#nv_li").tabs({
active: 2
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-top: 30px;">
<ul class="nav nav-tabs" id="nv_li">
<li class="active" id="link"><a data-toggle="tab" href="#beng">BENGALURU</a>
</li>
<li id="link"><a data-toggle="tab" href="#chennai">CHENNAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#hydrabad">HYDERABAD</a>
</li>
<li id="link"><a data-toggle="tab" href="#dubai">DUBAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#london">LONDON</a>
</li>
<li><a data-toggle="tab" href="#kochi" style="border-right: 0px;">HONG KONG</a>
</li>
</ul>
<div class="tab-content">
<div id="beng" class="tab-pane fade in active">
<?php include 'bangalore.php';?>
</div>
<div id="chennai" class="tab-pane fade">
<?php include 'chhenai.php';?>
</div>
<div id="hydrabad" class="tab-pane fade">
<?php include 'hyd.php';?>
</div>
<div id="kochi" class="tab-pane fade">
<?php include 'kochi.php';?>
</div>
<div id="mumbai" class="tab-pane fade">
<?php include 'mumbai.php';?>
</div>
<div id="pune" class="tab-pane fade">
<?php include 'pune.php';?>
</div>
<div id="abu" class="tab-pane fade">
<?php include 'abu_dhabi.php';?>
</div>
<div id="dubai" class="tab-pane fade">
<?php include 'dubai.php';?>
</div>
<div id="london" class="tab-pane fade">
<?php include 'london.php';?>
</div>
</div>
</div>

Just use window.location.search and run function(on document ready) to set active class to appropriate li element, like so:
// Search parameter extractor
function getSearchParam(searchKey) {
var params = window.location.search.replace('?', '').split('&');
var searchParam = null;
var keyValue;
for (var i = 0, len = params.length; i < len; i++) {
keyValue = params[i].split('=');
if (keyValue[0] === searchKey) {
searchParam = keyValue[1];
break;
}
}
return searchParam;
}
// Function to set active city class
function setActiveCity(cityName) {
var link = document.querySelector('a[data-toggle="tab"][href="#' + cityName + '"]');
var content = document.getElementById(cityName);
if (link) {
link.parentNode.classList.add('active');
}
if (content) {
content.classList.add('in', 'active');
}
}
var city = getSearchParam('cityname');
if (city) {
setActiveCity(city);
}

<ul id="navi">
<li><a class="menu" href="#">Pune</a></li>
<li><a class="menu" href="#">Baramati</a></li>
<li><a class="menu" href="#">chennai T</a></li>
<li><a class="menu" href="#">London</li>
<li><a class="menu" href="#">UK</a></li>
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
I Hope. it will help you!

ng-click doesn't work on anchor element

Q1: I tried to use nav in bootstrap to make a navigation bar and bound ng-click to the anchors.
However after I click the anchor link,there is nothing happened.
Q2: I've noticed that the anchor link clicked won't be active by setting bg-color to it? How can this be implemented?
Here is the JSfiddle...
<div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
<li class="active">All Suites
</li>
<li><a ng-click="handleClick">Suite1</a>
</li>
<li>Suite2
</li>
<li>Suite3
</li>
</ul>

The brackets for function invocation are missing. You should have:
ng-click="handleClick()"

Answering Q2:
Maybe there are smarter solutions, but this one works as well:
angular.module('myApp').controller('MenuCtrl', ['$scope', '$location', '$rootScope',
function ($scope, $location, $rootScope) {
$rootScope.$on('$locationChangeSuccess', function () {
var path = $location.path();
// you may apply logic on the path (group together in case of dropdown-menu e.g.)
$scope.topMenu = path;
});
}
]);
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"
ng-controller="MenuCtrl">
<div class="container-fluid">
<div class="navbar-header">
<!-- ... -->
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active: topMenu == '/'}">
Home</li>
<li ng-class="{active: topMenu == '/about'}">
About</li>
<!-- more... -->
</ul>
</div>
</div>
</div>

I have Updated your code. Add ng-app directive to your body tag. And In your html change ng-click="handleClick" to ng-click="handleClick()"
<body ng-app="app"><div ng-controller="SuiteSectionCtrl">
<ul class="nav nav-pills nav-stacked">
<li class="active">All Suites
</li>
<li><a ng-click="handleClick()">Suite1</a>
</li>
<li>Suite2
</li>
<li>Suite3
</li>
</ul>
</div></body>
and our JS code is
var executionAPP = angular.module('app',[])//register your app
executionAPP.controller('SuiteSectionCtrl',['$scope',function($scope){
$scope.oneAtATime = true;
$scope.testSuites = [{title:"TestSuite1",content:"TestContent1"},
{title:"TestSuite2",content:"TestContent2"},
{title:"TestSuite3",content:"TestContent3"},
{title:"TestSuite4",content:"TestContent4"},
{title:"TestSuite5",content:"TestContent5"}];
$scope.handleClick = function(){
alert('Accordion clicked');
};
}]);
Updated Fiddle...