ToddT ToddT - 1 month ago 9
Javascript Question

Buttons to navigate Bootstrap Pills

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..

Answer

Your HTML ID attributes are not unique

I fixed your second back button for exemple

$(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">
    &lt;%= image_tag("navbar_brand.png") %&gt;
  </div>
  
    <div class="col-md-12">
      &lt;%# if  %&gt;
      <ul id="mytabs" class="nav nav-pills nav-wizard pill-font" role="tablist" data-tabs="tabs">
          <li role="presentation" class="active"><a href="#start" data-toggle="tab">Before We Start</a></li>
          <li role="presentation"><a href="#setup" aria-controls="Shopify Setup" role="tab">Shopify Setup</a></li>      
          <li role="presentation"><a href="#signup" aria-controls="Signing Up" role="tab">Signing Up</a></li>      
          <li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a></li>
          <li role="presentation"><a href="#fulfill" role="tab">Fulfillment</a></li>
          <li role="presentation"><a href="#product" role="tab">Products</a></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-->

Comments