How to implement pagination with nav tabs in bootstrap? - javascript

I try to use pagination for the nav tabs.i have 2 nav tabs first one is home and the second one is profile.intally the home tab will be active for that pagination works fine on click of the profile tab the pagination with table has to come.but here its not coming proper.
Here is my code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-md-11 col-sm-12 wf-tab">
<!-- 2nd tab -->
<div class="tabbable-panel" style="margin-top: 10px;">
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_default_1" data-toggle="tab" class="">
home </a>
</li>
<li>
profile
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<div>
<!-- 1st -->
<table>
<tbody id="myTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="myPager"></ul>
</div>
</div>
<div class="tab-pane" id="tab_default_3">
<div>
<!-- 2ndt -->
<table>
<tbody id="secondTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="secondPager"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script:
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li>«</li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li>'+(curr+1)+'</li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li>»</li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
if(target=="#tab_default_3"){
$('#secondTable').pageMe({pagerSelector:'#secondPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
}
else if(target==="#tab_default_1"){
alert("===");
}
});
$(document).ready(function(){
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
});
For the home tab its working fine but when i click on the profile tab the paginations display again if i click home tab and then on profile the pagination increases.how to solve this can anyone suggest me how to do.


Use Simple and easy concept by using below code
$(document).ready(function(){
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Tab- 1
</li>
<li>
Tab - 2
</li>
<li>
Tab - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>

Related

hide .card-body when childrens has "display:none"

I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>

You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.

div toggle with another divs

What I am trying to do here: Content 1 is in an active state when the page is open, and when "Open Map" is clicked, then Content 2 toggles with Content 1. It's the same for "Open Detail" too, and also when I close map or detail then Content 1 need to display again...
Additionally, for example after opening detail, and then opening map they need to toggle with each other. No need to display at the same time. And Content 1 needs to display again when 2 or 3 are closed...
$('#show-detail').on('click', function(event){
event.preventDefault();
$('.content3').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-detail').html('Close Detail');
} else {
$('#show-detail').html('Open Detail');
}
});
});
$('#show-map').on('click', function(event){
event.preventDefault();
$('.content2').slideToggle('slow', function(event){
if($(this).is(':visible')){
$('#show-map').html('Close map');
} else {
$('#show-map').html('Open map');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>

$('#show-detail').on('click', function(event){
event.preventDefault();
toggleViews('content3');
});
$('#show-map').on('click', function(event){
event.preventDefault();
toggleViews('content2');
});
function toggleViews(elmClass) {
var elm = $("." + elmClass);
var isVisible = elm.is(':visible');
$(".tabs-stage > div:visible").slideUp('slow', function() {
if(isVisible) {
$(".content1").slideDown();
} else {
elm.slideDown();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-wrapper">
<ul class="ul-wrap">
<li class="li-head"><i style="color:white;" class="far fa-building"></i>Summary</li>
<a id="show-detail" href="#"><li class="li-head-right">Open Detail</li></a>
<a id="show-map" href="#"><li class="li-head-right">Open Map</li></a>
</ul>
<div class="tabs-stage">
<div class="content1 d-flex">
<div class="d-image"><img src="https://dummyimage.com/120x120/000/fff"></div>
<div class="align-top">
Lorem Ipsum Text Text Text
</div>
</div>
<div class="content2" style="display:none;">
Map here
<div id="map"></div>
</div>
<div class="content3" style="display: none;">
Details Here
</div>
</div>
</div>

How to toggle vertical tabs with vertical text and content using jquery

This code is displaying vertical tabs with vertical text and content. Toggle is not working properly, when I click on second tab, first content is also displaying. Can anyone help me to get the content of individual tabs? Here I have mentioned html, css and javascript code. Is it possible in Jquery? Can anyone mention the details?
<main id="main">
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home
</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<div class="tab-content">
<div id="left" >
<div>
<ul id="tree1" >
<li id="li2">News
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li id="li2">Sites
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('#tree1').treed();
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.2/js/bootstrap.min.js"></script>

You forgot both import of jQuery (JSfiddle console raised that error) and Boostrap classes (tab-pane) and ids (the content of the href of the a tag) on tabs panels.
Here the right code:
jQuery Script from CDN:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Here the right panel code:
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<hr/>
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home-v">Home Tab.</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
I simplified the code inside the Home panel in order not to post a big piece of code, which was not relevant.
Hope this helps!
Working codepen link with full code.

Button click embedded in a page in a panel does not work using .load()

I have a menu page when I click on the menu options I want another page to open up in a panel . The page opens with my code but the search button when clicked does not show a table as it does when the search.html is run independently.
Here is the search.html. I am using $.load("search.html") jQuery function but i am not sure if it is the correct one to use.
<script type="text/javascript">
$(window).load(function() {
setTimeout(function() {
$('#loading').fadeOut( 400, "linear" );
}, 300);
});
$(document).ready(function () {
$(' li').click(function (e) {
e.preventDefault();
var $this = $(this);
$('.panel').hide();
$('#' + $this.find('a').attr('href')).show();
return false;
});
}); // end ready
</script>
</head>
<body>
<div id="sb-site">
<div class="sb-slidebar bg-black sb-left sb-style-overlay">
<div id="page-sidebar">
<div class="scroll-sidebar">
<ul id="sidebar-menu">
<li>
<a href="x_Information_System.html" title="Admin Dashboard">
<i class="glyph-icon icon-linecons-tv"></i>
<span>Home</span>
</a>
</li>
<li class="divider"></li>
<li class="active"><a href="panel1" title="x" ><span>x</span></a></li>
<li><span>A</span></li>
<li><span>L</span></li>
<li class="divider"></li>
</ul><!-- #sidebar-menu -->
</div>
</div>
<div id="page-content-wrapper">
<div id="page-content">
<div id ="panel1" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content xs </div>
<script>$( "#panel1" ).load( "search.html" );</script>
</div>
<div id ="panel2" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content a</div>
</div>
<div id ="panel3" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
<div class="panel-body">content l</div>
</div>
</div>
</div>
</div>
</div>
This is the search page that displays a table on button click:
<div id="page-content-wrapper">
<div id="page-content">
<div class="container">
<script type="text/javascript" src="assets/widgets/datatable/datatable.js"></script>
<script type="text/javascript" src="assets/widgets/datatable/datatable-bootstrap.js"></script>
<script type="text/javascript" src="assets/widgets/datatable/datatable-tabletools.js"></script>
<div id="page-title">
<h2> Details</h2>
</div>
</div>
<div class="panel-box col-lg-12">
<form class="form-horizontal" role="form" method="get">
<div class="form-group">
<label class="col-md-4 control-label">Please enter a Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="name" >
</div>
<button class="btn btn-blue-alt" id="search" >Search</button>
</div>
</form>
</div>
<div class="panel">
<div class="panel-body">
<table class="datatable" cellpadding="0" cellspacing="0" border="0" id="resultTable">
<thead>
<tr>
<th> Id</th>
<th> Number</th>
<th> Serial Number</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.btnSearch').click(function() {
makeAjaxRequest();
});
$('form').submit(function(e) {
e.preventDefault();
makeAjaxRequest();
return false;
});
function makeAjaxRequest() {
$.ajax({
url: 'php/_search.php',
data: {name: $('input#name').val()},
type: 'get',
success: function(response) {
$('table#resultTable tbody').html(response);
}
});
}
});
</script>
</div>
</div>

This had nothing to do with the javascript. The problem was I was setting all the other panels to hide for enabling menu navigation and the table in the child page was in a panel and the display was being set to none.So when I remove the panel surrounding the table it was displayed

Show/Hide section with navbar made with jquery

I'm creating a single page site. I have multiple "pages" organized in between <section> tags. I wrote some jQuery to hide all the sections except the first one. My issue is i'm trying to make a dynamic navigation that will show the section based on the data-index connection.
HTML:
<html>
<head>
<title>Title</title>
</head>
<meta name="viewport" content="width=device-width">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
<!-- Side Menu -->
<div class="container-fluid topheader">
<h1 class="text-center">Page 1</h1>
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<!-- /Side Menu -->
<section>
<p class="nextbutton">Next</p>
<p class="backbutton">Back</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Test</h1>
</div>
</div>
</div>
</section>
<section>
<p class="nextbutton">Next</p>
<p class="backbutton">Back</p>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Test 2</h1>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6" id="circlenav">
<p>Nav</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Title</h3>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script src="script.js"></script>
</body>
</html>
$('section').each(function(i){
$(this).attr('data-index', i+1);
});
$('section').each(function(i,v)
{
if(i < $('section').length) {
var nav = $('<li data-index="'+(i+1) + '">' + ($(this).children().attr('name'))+''+'</li>');
$('#circlenav').append(nav);
}
});
$('section').hide();
$('section[data-index="1"]').show();

Categories

Resources