I have a bunch of tabs, in each tab I have an iframe which I want to load only when I press the tab. I don't want all the apps to be loaded once the page is loaded. How can this be accomplished?
I'm new to JSP and Javascript..
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">First Menu</a></li>
<li><a data-toggle="tab" href="#menu2">Second Menu</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<iframe id="iframe1" src=""></iframe>
</div>
<div id="menu1" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
<div id="menu2" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
</div>
Ajax is better!
As suggested from #PDKnight you should use ajax and at the end of this solution you'll see why.
Here is a working fiddle for you (jQuery code).
jQuery(document).ready(function($) {
$('.nav-tabs > li > a').on('click', function(event) {
//avoid <a> tag to load his href
event.preventDefault();
//getting the main subjects
var id_of_selected = $(this).attr('load-in');
var link_to_load = $(this).attr('href');
var iframe_to_load = $(document).find('#' + id_of_selected);
console.log(iframe_to_load);
//make the magic
if (iframe_to_load.length) {
iframe_to_load.attr('src', link_to_load); //this fires the link to destinated iframe
iframe_to_load.parent().addClass('active'); //this make the parent div container of iframe visible
}
});
});
.tab-pane {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11173.933562701173!2d12.2363393!3d45.560717000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sit!4v1452004351715" load-in="iframe1">WORKING!</a>
</li>
<li><a data-toggle="tab" href="http://www.youtube.com" load-in="iframe2">First Menu</a>
</li>
<li><a data-toggle="tab" href="http://www.facebook.com" load-in="iframe3">Second Menu</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in">
<iframe width="200" height="200" style="width:200px;height:200px;" id="iframe1" src=""></iframe>
</div>
<div id="menu1" class="tab-pane fade">
<iframe id="iframe2" src=""></iframe>
</div>
<div id="menu2" class="tab-pane fade">
<iframe id="iframe3" src=""></iframe>
</div>
</div>
You'll see (in console while pressing "First Menu" or "Secon Menu") that you cannot load links that doesn't allow X-ORIGIN read more here).
But you can load in the iframes just the first tab (the working one) because google maps allow X-ORIGIN embeding.
Please thumbs up if worked for u ;)
Related
I'm using Three iframe inside index files with 3 Tabs. I want to load or refresh the files inside the iframe when each tab is selected.
Here is my index files
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#home" data-toggle="tab">Enter</a></li>
<li><a data-target="#profile" data-toggle="tab" >Display</a></li>
<li><a data-target="#messages" data-toggle="tab">Search</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="EnterBook.php" ></iframe>
</div>
<div class="tab-pane" id="profile" >
<iframe src="DisplayBooks.php" ></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="SearchBooks.php" ></iframe>
</div>
</div>
I did look over other solution but nothing helped.. Please anyone can have a look over it.
You need to add click event handler to every tab and in callback function get relevant iframe of clicked tab and change reset src attribute of it or use Location.reload()
document.querySelectorAll('#myTab a').forEach(function(ele){
ele.onclick = function(){
var iframe = document.querySelector(this.dataset.target+'>iframe');
iframe.src = iframe.src;
}
});
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-target="#home" data-toggle="tab">Enter</a>
</li>
<li>
<a data-target="#profile" data-toggle="tab" >Display</a>
</li>
<li>
<a data-target="#messages" data-toggle="tab">Search</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="profile">
<iframe src="https://stacksnippets.net/"></iframe>
</div>
<div class="tab-pane" id="messages">
<iframe src="https://stacksnippets.net"></iframe>
</div>
</div>
I have created nav-tabs using bootstrap. Now I want to load html files into tab content on tab click. Can someone help me with java script.
This is my html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" id="Home" href="#home">Home</a></li>
<li><a data-toggle="pill" id="Menu1" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" id="Menu2" href="#menu2">Menu 2</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
</div>
<div id="menu1" class="tab-pane fade"> <h3>Menu 1</h3>
</div>
<div id="menu2" class="tab-pane fade"> <h3>Menu 2</h3>
</div>
</div>
</div>
</div>
</div>
</body>
In the above code, when i click on the home tab i want to load an external html(x.html) file into home div under tab-content div. I want the same functionality when i click on the menu1 tab(y.html). When I load (y.html) i need to hide (x.html). Someone please help me...!!!
I used the below javascript. But it is not working.:
$('a#Home').click(function(){
$("#home").load("x.html");
});
$('a#Menu1').click(function(){
$("#menu1").load("y.html");
});
You can use .hide(), .show()
$('a#Home').click(function(e) {
e.preventDefault();
$("#home").load("x.html", function() {
$("#menu1").hide();
$(this).show();
});
});
$('a#Menu1').click(function(e) {
e.preventDefault();
$("#menu1").load("y.html", function() {
$("#home").hide();
$(this).show();
})
});
I have the following script:
$(".btn.btn-default").click(function () {
$(this).siblings().removeClass('active').end().addClass('active').val($(this).text());
if (this.id.contains('fear')) {
$('#fear').val($(this).text());
} else if (this.id.contains('control')) {
$('#control').val($(this).text());
} else if (this.id.contains('danger')) {
$('#danger').val($(this).text());
$('#tab2').tab('show');
}
});
Focusing specifically on when #danger is clicked, I'm trying to change the bootstrap tab with:
$('#tab2').tab('show');
however it does not seem to work. Any ideas?
//Updated with tab html
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Step 1</a></li>
<li><a data-toggle="tab" href="#tab2">Step 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div id="obj" class="draggable drag-drop"> Grass </div>
<div id="obj" class="draggable drag-drop"> Tree </div>
</div>
<div id="tab2" class="tab-pane fade in active">
<div id="act" class="draggable drag-drop"> Fire </div>
<div id="act" class="draggable drag-drop"> Collapsed </div>
</div>
I'm just using a button now to try and get it to work. It is supposed to make another selection in the dropdown box which it does, then show the content page. However it isn't changing the display to the page that was created and instead I have to manually click the new selection in the dropdown.
HTML:
<ul class="nav nav-tabs" id="srTabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#upload">Upload</a></li>
<li><a data-toggle="tab" href="#notes">Notes</a></li>
<li class="dropdown">
Submissions <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" id="submissionContainer">
<li>Grid</li>
</ul>
</li>
<li><a data-toggle="tab" href="#history">History</a></li>
</ul>
<div class="tab-content" id="srContent">
<div id="home" class="tab-pane fade in active">
<div id="navigationBar" class="text-center">
<button onclick="makeSub(150)">Test</button>
</div>
</div>
<div id="search" class="tab-pane fade"></div>
<div id="upload" class="tab-pane fade"></div>
<div id="notes" class="tab-pane fade"></div>
<div id="grid" class="tab-pane fade">
<h1 align="center">Submissions</h1>
</div>
<div id="history" class="tab-pane fade">
</div>
</div>
JavaScript
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
You either have to bind click event to the button like in this fiddle I made, or move your makeSub function outside of the $.ready function where button's onclick event can find the function.
$.ready(function(){
//everything else
});
function makeSub(id) {
$('<li>'+id+'</li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');
}
Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>
The bad thing is just have some copy of the nav-tab codes