Buttons to navigate Bootstrap Pills - javascript

I've created a working example here: http://www.bootply.com/A8Tz3gOsiD#
The issue is that after the second pill/tab the back button stops working. Can't figure out why. What's odd is that the "Next Step" button works fine thru all the tabs/pills.
I use Ruby, and would also love to improve my javascript which is pretty bad, just not sure how..

Your HTML ID attributes are not unique
I fixed your second back button for example
$(function(){
$('#setup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#setup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#start-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#start"]').tab('show');
}),
$('#signup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#signup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#speed-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#speed"]').tab('show');
}),
$('#fulfill-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#fulfill"]').tab('show');
}),
$('#product-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#product"]').tab('show');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid col-md-offset-1">
<div class="row col-md-offset-4 logo-pad">
<%= image_tag("navbar_brand.png") %>
</div>
<div class="col-md-12">
<%# if %>
<ul id="mytabs" class="nav nav-pills nav-wizard pill-font" role="tablist" data-tabs="tabs">
<li role="presentation" class="active">Before We Start</li>
<li role="presentation">Shopify Setup</li>
<li role="presentation">Signing Up</li>
<li role="presentation">Shipping Speeds</li>
<li role="presentation">Fulfillment</li>
<li role="presentation">Products</li>
</ul>
<div class="tab-content well well-pad col-md-10">
<div role="tabpanel" class="tab-pane fade in active" id="start">
<p>Hi, welcome to FBA Shipping by ByteStand. We've tried to make all our apps super easy to use, and as painless as possible. With that in mind we've put together a step by step guide to setting up this app in your Shopify store. This shouldn't take more than 3 minutes, but please go get a hot coffee if it's in the morning, or a cold beverage any other time of day. Don't worry, we'll wait.</p>
<button type="button" id="setup-button" class="btn btn-primary pull-right">Next Step</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="setup">
<p>Perfect, now for our app to work you will need Real Time Carrier Calculated Shipping to be enabled on your Shopify account.
Real Time Carrier Calculated shipping is a setting on your Shopify account, but if that sounds a lot like gibberish, give Shopify a call and they can clarify. The phone numbers are below. It might be free if you paid for you Shopify subscription annually, or it might cost $20 or the equivalent. Don't let them tell you, that you have to upgrade your account to "advanced" or "unlimited", you don't.
</p><ul class="a">
<li>North America:: 1-888-746-7439</li>
<li>United Kingdom:: 0800-808-5233</li>
<li>Australia:: 03-8400-4750</li>
<li>New Zealand:: 07-788-6026</li>
<li>Singapore:: 800-181-1121</li>
</ul>
<p></p>
<button type="button" id="signup-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="start-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<p>
Setting up the app is super easy. You've already download the app, now enter your credentials within the app. And you are good to go, there are instructions right next to where you enter your credentials, but we've also included pictures and a how to video below.
</p>
<button type="button" id="speed-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="setup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="speed">
<p class="h4">Allow us access to your Amazon account</p>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="signup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="fulfill">
<p class="h4">Promise your first born to Amazon by accepting their terms</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="speed-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="product">
<p class="h4">
Capture all your important id's and register for ByteStand
</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Sign Up</button>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Back</button>
</div>
</div> <!-- closing of the tab content -->
</div> <!-- end of the columns for the whole page-->
</div><!-- end of the row for the whole page-->

Related

how to create nav-tabs next botton validation in jquery i have to validate specific field

I am new to js I have simplest code specific field validation in nav-tabs next button for implement.
<ul class="nav nav-tabs"><li class="active">Shipping</li>`<li>Quantities</li> <li>Summary</li></ul>
<div class="tab-content"><div class="tab-pane active" id="tab1"> <a class="btn btn-primary" id="btnNext">Next</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnNext">Next</a><a class="btn btn-primary" id="btnPrevious">Previous</a></div><div class="tab-pane" id="tab2"><a class="btn btn-primary" id="btnPrevious">Previous</a></div></div>
<script>
$('#btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('#btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>
There are a few mistakes here. Div tab-pane 3 should have id='tab3' instead of tab2. Also elements must have unique ids. So the previous and next buttons cannot have same ids. Instead of id, use class to navigate via buttons using jquery like this -
<ul class="nav nav-tabs">
<li class="active">Shipping</li>
<li>Quantities</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><a class="btn btn-primary btnNext">Next</a></div>
<div class="tab-pane" id="tab2"><a class="btn btn-primary btnNext">Next</a><a class="btn btn-primary btnPrevious">Previous</a></div>
<div class="tab-pane" id="tab3"><a class="btn btn-primary btnPrevious">Previous</a></div>
</div>
<script>
$('.btnNext').click(function(){$('.nav-tabs > .active').next('li').find('a').trigger('click');
});$('.btnPrevious').click(function(){$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
</script>

How to open a particular tab inside a modal

I have 2 buttons and each is responsible for opening a modal, however, this modal has 2 tabs for signup and sign in. I want that if a user clicks on signup button then after the modal opens the signup tab should be active and if a user clicks on sign in button then after the modal opens the sign in tab should be active
The code of the button is
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button>
The code of modal is
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs" >
<li class="nav-item col ">
<a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a>
</li>
<li class="nav-item col ">
<a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a>
</li>
</ul>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="tab-content">
<div class="tab-pane active" id="signup">
signup box
</div>
<div class="tab-pane" id="signin">
signin box
</div>
</div>
</div>
<div class="col" id="social" >
Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can anyone please tell me how to do this
You'll have to do it with Javascript. Here's one way. Working JSFiddle.
First, get rid of the data-toggle="modal" data-target=".bd-example-modal-lg" on both buttons. You'll need to run your tab-targeting Javascript when you open the modal, and you can easily do that if you manually open the modal using the modal show method, rather than via the data attributes.
Next, in their place, add something to each button to identify which tab it targets - for eg a data attribute, with the id of your tabs:
<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button>
Last, add some Javascript to do the work:
// Add an event handler to fire when our buttons are clicked
$('button').on('click', function() {
// Find which button was clicked, so we know which tab to target
var tabTarget = $(this).data('tab');
// Manually show the modal, since we are not doing it via data-toggle now
$('.bd-example-modal-lg').modal('show');
// Now show the selected tab
$('.nav-tabs a[href="#' + tabTarget + '"]').tab('show');
});
Note that as the docs describe, you target the tab with the a link which opens it, not the div of the tab itself.

split button does not toggle Angular, JS

I have seen some questions similar to this one but I haven't come across an answer that would help. Can anyone please have a look at my code?
I have {{$ctrl.init}} and {{$ctrl.people}} assigned in the component. I know this assignment works because if I take away the "split-button" and just print them on the template directly, I can click on them and they redirect normally, with no problem.
This is the code in my template:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>
When I add the button, I get the proper styling but it doesn't drop down or show me the options. There is no reaction.
Any thoughts?
Try this.
you should add ui.bootstrap module to main app .
in controller define $scope.isCollapsed = true;
and also add uib-collapse="isCollapsed" directive to ul tag
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" ng-click="isCollapsed = !isCollapsed" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" uib-collapse="isCollapsed" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>

How to pass data to two bootstrap modal?

Hi i am performing crud operations on a table. So i have to perform two operations like reset password and to delete the entry. I have added a bootstrap modal to confirm the action. I am able to pass the value and use the first modal but when i click on second modal it does not fire up.
My code is as follow:-
<td>
<a href='#' data-href='modules/reset.php?id={$row['id']}' data-toggle='modal' data-target='#resetpassword' data-popup='tooltip' title='Reset Password'><i class='icon-lock2'></i></a>
<a href='#' data-href='modules/delete.php?id={$row['id']}' data-toggle='modal' data-target='#modal_delete' data-popup='tooltip' title='Delete'><i class='icon-trash'></i></a></li>
</td>
Modals:-
Delete password modal:
<div id="modal_delete" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to delete?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-ok">Yes, delete it!</a>
</div>
</div>
</div>
</div>
Reset password modal:
<div id="resetpassword" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to reset password?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-oks">Yes, reset it!</a>
</div>
</div>
</div>
</div>
Javascript:-
<script>
$('#modal_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
<script>
$('#resetpassword').on('show.bs.modal', function(e) {
$(this).find('.btn-oks').attr('href', $(e.relatedTarget).data('href'));
});
</script>
By this method only the delete modal works but the reset modal does not fire up. The modal whose javascript function is before only works. How to make both of them work. Any help would be highly appreciated.
Maybe you should enclose your script inside jquery on ready
$( document ).ready(function() {
//your javascript code
});
Some of your <div>s should be </div>. If you look carefully you will see that the reset password modal is actually within the delete password modal code.
EDIT: Slightly off topic, and I understand if you would prefer to roll your own, but have you tried SweetAlert? They have some nice looking alert boxes and it's pretty easy to use.

Load jQuery modal based on which div was clicked

So what I'm trying to do is, load a payment modal (which will have a payment/credit card form), and dynamically load the "selected plan" into the modal.
Below is the "Choose a Plan" HTML - what I'm trying to do/need help with is a jQuery function that opens the modal and loads "You selected this plan".
PS. Here is a fiddle if it's easier http://jsfiddle.net/9xyJn/
This is what I have on the JS side so far:
$(".planSelector").click(function() {
console.log("got that clcik.");
var selectedPlan = //Get the selected plan
$("#paymentModal").modal("show");
});
HTML:
<div class="container">
<div class="row">
<hr>
<div class="span12 pick-plan-intro">
<h2>Great sales teams come in all sizes</h2>
<h6>All plans are including all features</h6>
</div>
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="freePlan">Free</h4>
<p>Free</p>
<p>Up to 5 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="smallPlan">Small</h4>
<p>$99</p>
<p>Up to 15 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="mediumPlan">Medium</h4>
<p>$199</p>
<p>Up to 30 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
</div>
</div>
I have modified your code a little and added id to your <a> attributes.
Here's the jsfiddle update: http://jsfiddle.net/saurabhsharma/9xyJn/1/

Categories