I've a nav bar and when I click any tab in the nav bar, it takes me to that tab.
<section id="tabs">
<div class="mob-nav">
<div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist">
<!-- N add new class nav-tabs-scroll -->
<a class="nav-item nav-link" style="padding-top: 10px;"
ng-class="{ active: $index == 0 }"
id="nav-{{menuTab.menuURL}}-tab"
data-toggle="{{menuTab.dataToggle}}"
data-target="#{{menuTab.menuURL}}"
href="#{{menuTab.menuURL}}" role="tab"
aria-controls="nav-{{menuTab.menuURL}}"
ng-repeat="menuTab in menuList">
</a>
</div>
</div>
</section>
<!-- Tab Details -->
<section id="tabs">
<div class="">
<div class="">
<div class="mb-d-150">
<div class="tab-content py-3 px-sm-0 pl-0 pr-0"
id="nav-tabContent">
<!-- N removed py-3 class -->
<div class="tab-pane fade show"
ng-class="{ active: $index == 0 }"
id="{{menuTab.menuURL}}" role="tabpanel"
data-target="#{{menuTab.menuURL}}"
aria-labelledby="nav-{{menuTab.menuURL}}-tab"
ng-include="menuTab.colDef"
ng-repeat="menuTab in menuList">
</div>
<div class="tab-pane fade" id="changepass" role="tabpanel"
aria-labelledby="nav-about-tab"
ng-include="changePasswordTemplate">
</div>
</div>
</div>
</div>
</div>
</section>
Here's an example of menuList.
[{
menuID: "USER LANDING PAGE"
caption: "Dashboard"
parent: "root"
menuURL: "exampleModal"
cssClass: "fas fa-cog fa-lg"
cssParent: "nav navbar-nav"
aClass: "customerLandingPageTemplate"
SlNum: 98
colDef: "/js/templates/user-landing-page.html"
menuList: []
dataToggle: "modal"
},{
menuID: "USER QUERIES"
caption: "USER QUERIES"
parent: "root"
menuURL: "user-queries"
cssClass: "fas fa-comment-alt fa-lg"
cssParent: "nav navbar-nav"
aClass: "userQueriesTemplate"
SlNum: 100
colDef: "/js/templates/user-queries.html"
menuList: []
dataToggle: "tab"
}]
Here's the angularjs part which gives me the menuList:
GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
$scope.menuList = data;
console.log($scope.menuList)
});
When I refresh browser, it always takes me back to the USER LANDING PAGE no matter where I refresh. But on browser refresh, I need to reload the page where I was before refreshing.
You could use the session storage for saving the last state.
Internal code snippet does not allow to use session storage.
A working example on JSBin.
angular.module('app', ['ui.router'])
.config(($stateProvider) => {
const helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
const aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
.run(($state, $transitions) => {
$transitions.onSuccess({}, transition => {
sessionStorage.setItem('lastState', transition.to().name);
});
const lastState = sessionStorage.getItem('lastState');
if (lastState) {
$state.go(lastState);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<body ng-app="app">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>
Related
I have the following code, I am trying to get an id in the SPAN and it is not accepting values in any type of tag that is located inside ....
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="text: nombre,style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
If I understand you correctly your problem is that any tag placed in <a> tag is to being rendered. The reason for that to happen is that your <a> tag is using text: nombre binding which is replacing anything you have put inside it.
I removed that binding and <span> started to appear in it with working attr binding.
var viewModel = function() {
this.loterias = ko.observableArray([
{
nombre: 'test',
color: 'red',
id: 'test-id',
nombreCorto: 1,
namerjarClickLoteria: function(){
}
},
{
nombre: 'test',
color: 'green',
id: 'test-id',
nombreCorto: 2,
namerjarClickLoteria: function(){
}
}
]);
return this;
}
ko.applyBindings(viewModel(), $('#contenedorListaTarea')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
Im working on a a web page that has to have tabs. The tabs have to be created using a for each because the content has to be loaded out of a list. I found a tutorial on w3schools (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). I tried to replicate on of the examples and added the foreach loop. But if i click one of the tabs, i get sent to the index.hmtl (probably because of the # in the href).I can neither change the model or the list.
<div class="container">
<ul class="nav nav-tabs">
#foreach (FooModel foo in fooModels)
{
<li class="nav-item">
<a class="nav-link active" href="#foo_#foo.Id">#foo.Title</a>
</li>
}
</ul>
</div>
<div class="card-body">
<h3>foo's</h3>
<div class="tab-content">
#foreach (FooModel fooModel in fooModels)
{
<div id="application_#fooModel.Id" class="tab-pane fade">
<h3>Foo:: #fooModel.Title</h3>
#if (IsInEditMode == true)
{
<InputDate #bind-Value="fooModel.DateFrom"></InputDate>
<InputDate #bind-Value="fooModel.DateTo"></InputDate>
}
else
{
<p>#fooModel.DateFrom.ToString()</p>
<p>#fooModel.DateTo.ToString()</p>
}
</div>
}
</div>
</div>
You forgot to include data-toggle="tab" inside <a class="nav-link active" href="#foo_#foo.Id">#foo.Title</a>. You then also need to remove the active inside it because it is inside a foreach loop. It should work if you add it.
I implemented a modal popup as a part of the header.cshtml file in MVC project. the issue is that it does not show the dialog box (not working)
The only way I was able to make work is when I put the both the button and the modal container in the header file.
The modal body is a long text and it should not be a part of the header file.
I tried several tutorials, read modal documentation, and applied fixes from stackoverflow nothing worked for me.
I must be missing something very simple and trivial I just can't see it.
Below is the code in the Roles.cshtml file where the modal container is created and the text is written
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div class="modal" id="modal-active" aria-hidden="true">
<div class="modal__overlay bg-modal" tabindex="-1"
data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true"
aria-labelledby="modal-title-1">
<header class="modal__header">
<h1 class="modal__title h2" id="modal-title-1">
<h2>Roles</h2>
<br />
</h1>
</header>
<main class="modal__content">
BLABLA......
</main>
<footer class="modal__footer">
<button class="button button-primary"
aria-label="submit">
close
</button><button class="button button-secondary" data-
micromodal-close
aria-label="closing">
close
</button>
</footer>
</div>
</div>
</div>
Then the Header.cshtml file look like this: where I added "btnTrigger" and AJAX script to call and show the modal
#model TR.Service.Web.ViewModels
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">Menu</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
blabla........
</div>
</header>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then in my Home controller I have the actionResult that should return the
partial view
public ActionResult Roles()
{
return PartialView("Roles");
}
I can't see why this is not working. Please help.
Pupop should appear when click on the button with id =btnTrigger
Here is a working code
First since the Header.cshtml is part of the SubLayout.cshtml, move the #section scripts to the Roles.cshtml like below, you cna also put it in your Layout but without the #section scripts tag. I did'nt use the modal you had in your question. But this is a working modal
#{
Layout = "~/Views/Shared/SubLayout.cshtml";
}
#{
ViewBag.Title = "Roles";
}
<div class="container">
<div class="styleguide-spacer-modals"></div>
</div>
<div id="exampleModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Roles</h4>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts
{
<script>
$(function () {
$('#btnTrigger').unbind();
$('#btnTrigger').on('click', function () {
$.ajax({
url: '#Url.Action("Betingelser", "Rolles")',
type: 'POST',
data: { },
success: function (arr) {
$('#divContainer').html(arr); //Load your HTML to DivContainer
$('#exampleModal').modal('show'); //Once loaded, show the modal
},
error: function (err) {
console.log(err);
}
});
});
});
</script>
}
Then your Header.cshtml now looks like this
<header class="header" role="banner">
<!--1A: Portal header -->
<div class="portal-header">
<div class="container portal-header-inner">
<button class="button button-tertiary button-menu-open js-menu-
open ml-auto" aria-haspopup="menu" title="mobil menu">
Menu
</button>
<a href="#" class="button button-secondary" role="button">
login
</a>
</div>
<button class="button button-primary" id="btnTrigger"
data-micromodal-trigger="modal-passive">
Read me
</button>
<div id="divContainer"></div>
</div>
<div class="solution-header">
</div>
</header>
Also change the Home controller method to
public ActionResult Roles()
{
return View();
}
I'm trying to create a Bootstrap multi-column dropdown menu for nav-tabs. With the code below, I can select each tab. When I switch to another tab, I can't go back to the prior tab. It looks like all tabs remain active. How can I fix this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
</style>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Summary Table</li>
<li class="dropdown"> States
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Alabama</li>
<li>Alaska</li>
</ul>
</div>
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Maine</li>
<li>Maryland</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent" style="color:black">
<div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab">
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr><th>State</th><th>Tax Rate</th></tr>
</thead>
<tbody>
<tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
<tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>
<tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
<tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>
</tbody>
</table><br/>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
<h5><span style="text-decoration: underline;">Alabama </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
<h5><span style="text-decoration: underline;">Alaska </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab">
<h5><span style="text-decoration: underline;">Maine </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab">
<h5><span style="text-decoration: underline;">Maryland </span></h5>
</div>
</div>
Add this to the bottom
<script type="text/javascript">
$(function() {
var active = $('a[data-toggle="tab"]').parents('.active').length;
var tabClicked = false;
// Closes current active tab (toggle and pane):
var close = function() {
$('a[data-toggle="tab"]').parent().removeClass('active');
$('.tab-pane.active').removeClass('active');
active = null;
}
// Closing active tab when clicking on toggle:
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
$($(this).attr("href")).toggleClass('active');
active = null;
} else {
tabClicked = true;
active = this;
}
});
// Closing active tab when clicking outside tab context (toggle and pane):
$(document).on('click.bs.tab.data-api', function(event) {
if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
close();
}
tabClicked = false;
});
// Closing active tab on ESC key release:
$(document).keyup(function(e){
if(active && e.keyCode === 27) { // ESC
close();
}
});
});
</script>
And a button before the last < / div >
Close active tab
I know that is not the best solution, but does the work and with a little bit of patience you can do it better.
The answer by #Filipe Amaral was 95% of what this problem needed. After a couple of modifications, it works like a charm.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.dropdown-menu li').click (function(){
$('.dropdown-menu li').removeClass('active')
});
$('#main-tab').click (function(){
$('.dropdown-menu li').removeClass('active')
});
});
$(function() {
var active = $('a[data-toggle="tab"]').parents('.active').length;
var tabClicked = false;
// Closes current active tab (toggle and pane):
var close = function() {
$('a[data-toggle="tab"]').parent().removeClass('active');
$('.tab-pane.active').removeClass('active');
active = null;
}
// Closing active tab when clicking on toggle:
$('[data-toggle=tab]').click(function(){
if ($(this).parent().hasClass('active')){
$($(this).attr("href")).toggleClass('active');
active = null;
} else {
tabClicked = true;
active = this;
}
});
// Closing active tab when clicking outside tab context (toggle and pane):
$(document).on('click.bs.tab.data-api', function(event) {
if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
close();
}
tabClicked = false;
});
// Closing active tab on ESC key release:
$(document).keyup(function(e){
if(active && e.keyCode === 27) { // ESC
close();
}
});
});
</script>
<style>
.dropdown-menu.multi-column {
width: 400px;
}
.dropdown-menu.multi-column .dropdown-menu {
display: block !important;
position: static !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
min-width:100px;
}
</style>
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active">Summary Table</li>
<li class="dropdown"> States
<div class="dropdown-menu multi-column">
<div class="row">
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Alabama</li>
<li>Alaska</li>
</ul>
</div>
<div class="col-md-6">
<ul class="dropdown-menu">
<li>Maine</li>
<li>Maryland</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent" style="color:black">
<div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab">
<table class="table table-striped table-hover table-bordered table-responsive" id="rates">
<thead>
<tr><th>State</th><th>Tax Rate</th></tr>
</thead>
<tbody>
<tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
<tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>
<tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
<tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>
</tbody>
</table><br/>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
<h5><span style="text-decoration: underline;">Alabama </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
<h5><span style="text-decoration: underline;">Alaska </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab">
<h5><span style="text-decoration: underline;">Maine </span></h5>
</div>
<div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab">
<h5><span style="text-decoration: underline;">Maryland </span></h5>
</div>
</div>
I can't see to get go back transition to work.
I have this abstract view called main that holds this child views.
<div class="bar bar-header bar-stable">
<button class="button button-clear button-positive">Log out</button>
</div>
<div class="clearfix"></div>
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content style="padding-top: 45px">
<ion-nav-view name="categories"></ion-nav-view>
<ion-nav-view name="products"></ion-nav-view>
<ion-nav-view name="payments"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu expose-aside-when="large" style="padding-top: 45px">
<ion-view>
<ion-content>
<ul class="list has-header" id="itemLists">
</ul>
</ion-content>
</ion-view>
<div class="bar bar-subfooter auto-height" style="padding:0">
<ul class="list">
<li class="item">Total <span class="pull-right" id="total"></span></li>
</ul>
</div>
<div class="bar bar-footer">
<div class="text-center">
<div class="bar bar-footer bar-positive">
<div class="title">Pay</div>
</div>
</div>
</div>
</ion-side-menu>
</ion-side-menus>
This is my app.js that holds all routes.
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngStorage'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){
$ionicConfigProvider.views.transition('none');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login',{
url: '/',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'mainController',
abstract: true
})
.state('main.categories', {
url: '/categories',
views: {
'categories': {
templateUrl: 'templates/categories.html',
controller: 'categoriesController'
}
}
})
.state('main.products', {
url: '/products/:productId',
views: {
'products': {
templateUrl: 'templates/products.html',
controller: 'productsController'
}
}
})
.state('main.payments', {
url: '/payments',
views: {
'payments': {
templateUrl: 'templates/payments.html',
controller: 'paymentsController'
}
}
})
})
I have this state main.products which a child of the main abstract view.
When I click the pay button on the left-down corner, it takes me to the main.payments view.
This is the code for the main.payments view
<ion-view view-title='Payments'>
<ion-content>
<div class="row">
<div class="col col-25">
Cash
</div>
<div class="col col-25">
Credit Card
</div>
<div class="col col-25">
Discount
</div>
<div class="col col-25">
<button ng-click="cancel()" class="button button-large button-block button-assertive">Cancel</button>
</div>
</div>
<div class="row">
<div class="col col-25">
<button ng-click="goBack()" class="button button-large button-block button-royal">Go Back</button>
</div>
</div>
</ion-content>
Now when I press the go back button the URL in the page changes to the previous page but the view doesn't transition there, until I refresh the page.
This is my payment controller that handles the go back button transition.
.controller('paymentsController', function($scope, $localStorage, $log, $state, $window, $ionicHistory){
$scope.cancel = function(){
$localStorage.total= '';
$state.go('main.categories');
$window.location.reload();
};
$scope.goBack = function(){
$ionicHistory.goBack();
}
})
Main.payments and main.products are adjacent views not child view, although main.payments.view is child of main.payments and main.payments is child of main
So you can't travel to adjacent state.
if you want to traverse you have to specifically mention the $state.go(STATE_NAME); or you can use ui-sref in button itself
Note: add "cache:false" to abstract view