In my jSP page, I have some tabs. A tab has a button. What I want is when I click on the button, it should display the next tab or the tab I am providing with index.
My index.jsp is,
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li id="datacollect" class="active"><a href="#datacollector"
target="main" data-toggle="tab">Data Collector</a></li>
<li id="fromDB" class="selectDataloadType"><a
href="#fromDatabase" target="main" data-toggle="tab">Data Load
Database</a></li>
<li id="fromFile" class="selectDataloadType"><a
href="#fromFiles" target="main" data-toggle="tab">Data Load
File</a></li>
<li id="email" class="selectDataloadType"><a href="#fromEmail"
target="main" data-toggle="tab">Data Load Email</a></li>
<li id="webServices" class="selectDataloadType"><a
href="#fromWebServices" target="main" data-toggle="tab">Data
Load Web</a></li>
<li><a href="#datamap" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
<br> <br> <br> <br> <br>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="datacollector">
<div class="container">
<div class="row">
<div class="span8">
<form>
<fieldset>
<label class="control-label" for="dataloadType">Data
load Type:</label> <select id="dataloadType" name="dataloadType">
<option>Choose Data load Type</option>
<option value="fromDB">From Database</option>
<option value="fromFile">From File</option>
<option value="email">E-mail</option>
<option value="webServices">Web Services</option>
</select>
<p>
<button id="dataloadNext" class="btn btn-success"
type="button">Submit</button>
</p>
</fieldset>
</form>
</div>
</div>
</div>
</div>
And the script is
<script>
$(function() {
$("#dataloadNext").click(function() {
$( "#tabs" ).tabs("active", 2 );
});
});
</script>
I am using jquery-1.9.0 What is the error here?
UPDATE 1
Browser showing error like this
Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call `method 'active' jquery-1.9.0.js:490`
This is a jQuery-UI error and the JSP is just fine, what I think the problem is that jquery-ui and almost every other javascript framework (bootstrap as you are using for example), must have their elements initialized as of the type I want before doing any work with them.
e.g you must say that they are tabs before you switch between them.
Sample Code Would be
<script>
$(function() {
$( "#tabs" ).tabs();
});
//then use them
$("#dataloadNext").click(function() {
$( "#tabs" ).tabs("active", 2 );
});
</script>
Hope this helps
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>");});
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 have some html like this (I won't even bother to post the JS since it's an overcomplicated mess):
<html>
<body>
<div class="container">
<h3 class="text-center">Administration</h3>
</div>
<div class="form-inline text-center">
<div class="form-group">
<label>Managing Business</label>
<select ng-options="business.name for business in businesses" ng-model="managingBusiness" class="form-control restaurant-select"></select>
<label>Program</label>
<select ng-options="program.description for program in selectablePrograms" ng-model="managingProgram" class="form-control restaurant-select"></select>
</div>
</div>
<hr/>
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{ active: isActive('/admin/overview')}">Overview</li>
<li ng-class="{ active: isActive('/admin/generators')}">Generators</li>
</ul>
</div>
<div class="col-md-10">
<div ng-include="'views/partials/admin/overview.html'" ng-show="isActive('/admin/overview')"></div>
<div ng-include="'views/partials/admin/generators.html'" ng-show="isActive('/admin/generators')"></div>
</div>
</body>
</html>
And the only js that matters is this:
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
And the issue is that when the user selects a tab to change (overview/generators) than the entire page is reloaded. This is bad because I am trying to keep the state of the selected business at the top.
What am I doing wrong? Why is the page reloading without me running a reload command?
I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?
Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form
I found this here http://www.codeply.com/go/bp/wj9gWh8ulj
and I was trying to know more about javascript and jquery by applying these codes, but I faced an error with implementing this which is the progress bar and the continue buttons are not functional for some reason that I don't know.
<html>
<head>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script>
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
return false;
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//update progress
var step = $(e.target).data('step');
var percent = (parseInt(step) / 5) * 100;
$('.progress-bar').css({width: percent + '%'});
$('.progress-bar').text("Step " + step + " of 5");
//e.relatedTarget // previous tab
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})
</script>
</head>
<body>
<div class="container" id="myWizard">
<h3>Bootstrap Wizard</h3>
<hr>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 20%;">
Step 1 of 5
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="step1">
<div class="well">
<label>Security Question 1</label>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<label>Enter Response</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default btn-lg next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step2">
<div class="well">
<label>Security Question 2</label>
<select class="form-control input-lg">
<option value="What was the name of your first pet?">What was the name of your first pet?</option>
<option selected="" value="Where did you first attend school?">Where did you first attend school?</option>
<option value="What is your mother's maiden name?">What is your mother's maiden name?</option>
<option value="What is your favorite car model?">What is your favorite car model?</option>
</select>
<br>
<label>Enter Response</label>
<input class="form-control input-lg">
</div>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step3">
<div class="well"> <h2>Step 3</h2> Add another step here..</div>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step4">
<div class="well"> <h2>Step 4</h2> Add another almost done step here..</div>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane fade" id="step5">
<div class="well"> <h2>Step 5</h2> You're Done!</div>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
<hr>
Edit on Bootply
<hr>
</div>
<!-- Bootstrap Core JavaScript -->
<!-- js of the slider blugin-->
</body>
</html>
It works for me: http://codepen.io/wvankuipers/pen/qdxVpw
I guess the problem you are facing is that you try to use jQuery/Bootstrap before it is loaded. To fix this place the Javascript code inside this block:
$(function(){
/* Your code here */
});
Read more about this here: http://api.jquery.com/jquery/#jQuery3
Short version: this will make sure the DOM is fully loaded (and the required JS is loaded) before your code gets executed.