I am using bootstrap and ASP.NET mvc to create a web app. I am using partial views on each tab however right now all the data is coming in at the same time. I would like to call my partial to query and return data only when the tab is active. How can I do that?
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active">Service</li>
<li>Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
#Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
#Html.Action("Index", "Controller2")
</div>
</div>
</div>
You would need to put a onClick event on your tabs, somthing like below should work for you
<ul class="nav nav-tabs nav-justified">
<li class="active" data-ref="1">Service</li>
<li data-ref="2">Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div id="tabone"></div>
</div>
$(".nav-tabs li").click(function(){
var pageId = $(this).data('ref');
$.ajax({
url: url,
data: {pageId:pageId },
success: function(response){
if(pageId == 1)
{
$('#tab1').replaceWith(response);
}
else....
}
});
});
Try this Code
<div>
<ul class="nav nav-tabs nav-justified">
<li class="active">Service</li>
<li>Instrument</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
#Html.Action("Index", "Controller1")
</div>
<div class="tab-pane fade" id="tab2">
#Html.Action("Index", "Controller2")
</div>
</div>
</div>
<script>
$("#openTab1").on("click", function() {
$("#tab1").load('/Controller1/Index');
});
$("#openTab2").on("click", function() {
$("#tab2").load('/Controller2/Index');
});
</script>
Javascript Magic
ASP.net doesn't inherently come with that feature available. The method I would use would be to setup a url in your controller returning a partial viewand then have make an ajax request to that url to load it's content in to your web page. The method I described can be seen as an example Here
tdlr;
Make a partial view in your controller, and load it using ajax.
Related
I have a tab like below and I am trying to display results through ajax inside this tab, in each tab content I have added ordered list and font icon as below code:
$(document).ready(function(){
$("ol li").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
$(".tabcontent p").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="exTab1">
<ul class="nav nav-pills">
<li class="active">
Inclusions
</li>
<li>Description
</li>
<li>Points To Note
</li>
<li>Terms
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
</div>
<div class="tab-pane" id="2a">
</div>
<div class="tab-pane" id="3a">
</div>
<div class="tab-pane" id="4a">
</div>
</div>
</div>
here the problem is only ordered list is coming and the font icon is not displaying.
Can anyone please tell me what wrong did I do here ?
Thanks in advance
I don't understand properly but I try, you write wrong class in jQuery is ="tabcontent" instead of "tab-content". and second is you use "ul" in tag and you use "ol" in jQuery
"Code Snippet" is not load js property that's why I use codepen.(I delete pen after you show it.)
https://codepen.io/Lucifer18/pen/abBJXRa
Jquery
$(document).ready(function(){
$("ul li").prepend("<i class='fa fa-check-square-o' style='margin-right:10px;'></i>");
$(".tab-content ").prepend("<i class='fa fa-check-square-o' style='margin-
right:10px;'></i>");});
Post bounty update:
With Bootstrap-4 tab, I want to load external page inside active tab. And, if page is refreshed it should return to last active tab.
With Bootstrap navs, I was trying to load external page inside active div. And, if page is refreshed it should return to the last active tab. So, I stored last active tab in localstorage and with that the active tab can be activated.
In the mean time, if load a eternal page take a while so i added bootstrap spinner and here is the code,
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
$("#tabsp").hide();
return false;
});
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('.nav-tabs a[href="' + activeTab + '"]').tab('show');
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
$("#tabsp").hide();
return false;
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
Info
</li>
<li class="nav-item">
Ads
</li>
<li class="nav-item">
Favorites
</li>
<li class="nav-item">
Sold
</li>
</ul>
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab">
</div>
<div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab">
</div>
<div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab">
</div>
<div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab">
</div>
<div class="text-center" id="tabsp">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
I was trying to add the following,
load eternal page inside div
return to last active on refresh with localstorage
and a bootstrap spinner while loading
While visiting index_file.php for the first time, I can view only the bootstrap spinner, which means IF there is no localstorage
How do I solve this problem?
This should solve your problems, but I can't fully test it.
var defaultTab = 'contacts_tab';
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var tabEl = $(e.target);
saveIntoLocalStorage(tabEl.attr('id'));
loadPage(tabEl);
});
var tabToActivate = loadFromLocalStorage();
loadPage(tabToActivate);
});
function loadFromLocalStorage() {
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
return $("#" + activeTab);
} else {
saveIntoLocalStorage(defaultTab);
return $("#" + defaultTab);
}
}
function saveIntoLocalStorage(id) {
localStorage.setItem('activeTab', id);
}
function loadPage(tabEl) {
debugger;
var $this = $(this),
loadurl = tabEl.attr('href'),
targ = tabEl.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
$("#tabsp").hide();
return false;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
Info
</li>
<li class="nav-item">
Ads
</li>
<li class="nav-item">
Favorites
</li>
<li class="nav-item">
Sold
</li>
</ul>
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab">
</div>
<div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab">
</div>
<div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab">
</div>
<div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab">
</div>
<div class="text-center" id="tabsp">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});
It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).
I am using Bootstrap pills for toggling on the same page. There are two nav-pills and two divs corresponding to each of them.I have constructed the first div correctly and is working fine. But when I am trying to construct the second div, the contents of the first div are hindering in the construction of the second div. For ex: the col-* classes not working properly. In short the data of the first div, although invisible, is still there when I am on the second page.
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active">Download Data</li>
<li>Metadata</li>
</ul>
<div class="container-fluid tab-content fade in active" id = "homeTab">
....
</div>
<div class="container-fluid tab-content fade" id = "metaTab">
....
</div>
You are misusing tab-content class. It should be wrapped around all tabs, and tabs should have tab-pane class instead, like this:
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li class="active">Download Data</li>
<li>Metadata</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="container-fluid tab-pane fade in active" id = "homeTab">
...tab 1 content...
</div>
<div role="tabpanel" class="container-fluid tab-pane fade" id = "metaTab">
...tab 2 content...
</div>
</div>
Here is more about tabs in bootstrap: http://getbootstrap.com/javascript/#tabs
You just need to include bootstrap.js
.tab-pane{
position:absolute;
top 200px;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills container-fluid" style = "margin-left:10px;">
<li>Download Data</li>
<li>Metadata</li>
</ul>
<div class="tab-pane fade in active" id = "homeTab">
.... FIRST
</div>
<div class="tab-pane fade" id = "metaTab">
.... SECOND
</div>
Good Day Guys,
I just want to ask if how will I be able to get the real address in my tabbed form in in HTML/CSS.
right now I can only redirect to tabbed which is pre-set as active.
My goal is to create a link that will direct me to other tabbed page. for example, from other page want to create a link that will direct me to tabbed page 2nd tab .
here's my code:
<div class="tabs">
<ul class="tab-links">
<li class="active">All</li>
<li>Pending</li>
<li>Approved</li>
<li>Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
in the address bar it only shows this even I clicked other tab. stay with this address:
/domain/beta/page_home_superadmin.php
but in the lower side of the browser, it shows this when I hover at tab2:
/domain/beta/page_home_superadmin.php#tab2
any suggestion on how will to get that address and a be able to create a link pointing to it.
Thanks.
You can try to use document.location.hash
<div class="tabs">
<ul class="tab-links">
<li class="active tab1" id="tab1">All</li>
<li class="tab2">Pending</li>
<li class="tab3">Approved</li>
<li class="tab4">Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
JavaScript:
$(document).ready(function() {
if ( document.location.hash ) {
$('.tab-links > li, div.tab').removeClass('active');
$('li' + document.location.hash.replace('#', '.')
+ ', div' + document.location.hash).addClass('active');
}
});