We Keep Coding

Trying to choose two different start points on a multicarousel page with jquery

I am trying to pick two different start points for the slide content. The setSlideContent indicator is set to 17 for the main gallery. But for the modal that will popup if there is alternate variations of that image will start at 0. Is there a way to start the slide content at 17 for main gallery carousel, but if it is a modal carousel, have it start at 0? I'm guessing I need an if/else here.
Would (using the original script) changing the setSlideContent to check if $carouselSelector contains .modal return setSlideSelector(0) else if $carouselSelector does not contain .modal return setSlideSelector(17) or whatever number I need work? Still extremely new to this.
NOTE in the example below the setSlideContent is set to 0 but but it is never set to 0 in practice (unless the carousel is in a modal) to take into account new slides being added. The number will always be the last slide added in my case it is 17.
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel');
var $carouselText = $carouselContainer.find('.carousel-text');
var $carouselSelector = $carouselContainer.find('.carousel-selector');
$carousel.carousel({
interval: false
});
function setSlideContent(id) {
var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
id +
'"]').html();
$carouselText.html(targetContent);
}
setSlideContent(0);
$carouselSelector.on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
$carousel.on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
setSlideContent(targetSlide);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-0">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<h5>Slide 1</h5>
<button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Slide 2</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-1">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<!-- change this id and match with that in JS -->
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<!-- change this id and match with that in the JS -->
<h5>Dreams of Avarice1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Avarice Zero1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>...</h3>
</div>
<div class="modal-body">
<div class="container-fluid carousel-container">
<div class="container">
<div class="row mx-auto">
<div class="col">
<div class="carousel slide carousel-fade" id="carousel-...">
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
<div class="carousel-item" data-slide-number="1">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-auto">
<div class="col carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h5>0ne</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<h5>two</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row mx-auto">
<div class="col">
<a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

If I understand correctly, you want :
to initialize the modal carousel at its first slide, with corresponding caption.
to initialize all other carousels at their last slide, with corresponding caption.
At least, that would makes sense.
If I'm right, then the javascript will be something like this :
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
$carouselContainer.find('.carousel-text').html(targetContent);
}).carousel({
interval: false
});
$carouselContainer.find('.carousel-selector').on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
// The carousel is already at first slide (slide 0).
var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container
// Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
$carousel.trigger('slid.bs.carousel');
} else { // ... else, there are 2 or more slides and this is a non-modal carousel:
// send to last slide
$carousel.carousel(n - 1);
$carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
}
});
});
Demo

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

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

Auth0 + AngularJS

I am trying to follow the steps provided at https://auth0.com/docs/quickstart/spa/angularjs for getting Auth0 integrated into an Angular App.
Code I have is as follows,
<div class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="#/login">
<span class="fa fa-twitter"></span> Tweet
<strong>Cloud</strong>
</a>
</div>
<div class="pull-right" style="margin-right : 20px;">
<a href="#/">
<button type="button" class="btn btn-primary navbar-btn">Fetch Tweets</button>
</a>
<a href="#/login">
<button type="button" class="btn btn-social btn-twitter navbar-btn" ng-click="authService.login()"><span class="fa fa-twitter"></span> Sign in with Twitter</button>
</a>
</div>
</div>
Despite my best efforts can't get the "authService.login()" to fire. Any possible suggestions based on common mistakes that newbies might be making?
Thanks in Advance.

How to create a link that actives a Bootstrap Tab

I have some tabs set up in accordance with the examples here. So show/hiding divs:
http://getbootstrap.com/javascript/#tabs
But I want a <button> inside all the the DIVs which acts as a NEXT button to the following tab. I tried the following which half works, but it does not deal with the updating of the active classes on the tabs at the top:
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" href="#tab-second">Next</button>
Can it be done?

Using Zakaria's answer I actually figured out a better solution.
Set an ID on each tab link like so:
<li><a data-toggle="tab" href="#tab-second" id="tab-second-link">Second Tab</a></li>
Then add an onclick event to any link:
<a class="btn btn-lg btn-primary" href="#" onclick="javascript: $('#tab-second-link').tab('show');";>Next</a>

Working fiddle
Check this basic example using data-* attributes :
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
Hope this helps.
$("button[data-tab-destination]").on('click', function() {
var tab = $(this).data('tab-destination');
$("#"+tab).click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">TAB #1</li>
<li>TAB #2</li>
<li>TAB #3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one">
<button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-2">Next</button>
</div>
<div class="tab-pane" id="two"><button type="button" class="btn btn-lg btn-primary" data-toggle="tab" data-tab-destination="tab-3">Next</button>
</div>
<div class="tab-pane" id="three">
</div>
</div>
</div>
</div>
</div>

try this code (add bootstrap.js and jquery.js)
<div class="row">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
//CONTENT OF TAB1
<div style="float: left;">
<a style="margin-left:5px;" class="btn btn-set btn-default" href="#tab2" data-toggle="tab"> MOVE TO TAB2</a>
</div>
</div>
<div class="tab-pane" id="tab2">
//CONTENT OF TAB2
<div style="float: left;">
<a class="btn btn-set btn-primary" href="#tab1" data-toggle="tab">MOVE TO TAB1</a></div>
</div>
</div>
example of using it to move between login and (s'inscrire) :

Buttons end up inside eachother

I have a toolbar with 3 buttons. and one of them has a dropdown.
the html is the following:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
<button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled">Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>
Now for some reason the html that results out of this is the following.
The create button ends up inside of the connect button. and i can't for the life of me figure out what the hell is going on. it looks like i closed all tags and quotes.
parsed HTML:
<div id="primary-section" class="wrapper wrapper-content">
<div class="row" id="create-container">
<div class="col-lg-12">
<div class="ibox float-e-margins animated fadeInRight">
<div class="ibox-title" style="height: 60px;">
<div class="btn-group">
</div>
<div class="btn-group">
<button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"><button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"><i class="fa fa-plus"></i> New Container</button>Connect</button>
</div>
<div class="btn-group" id="actions" style="margin-right:16px;">
<button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a>Start</a></li>
<li><a>Stop</a></li>
<li><a>Pause</a></li>
<li><a>Resume</a></li>
<li><a>Delete</a></li>
<li class="divider"></li>
<li><a id="inspect">Inspect</a></li>
<li><a id="console">Console</a></li>
<li><a>Clone</a></li>
</ul>
</div>
</div>
<div class="ibox-content">
<div id="loading-grid">
<img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/>
<h3>Loading containers...</h3>
</div>
<div id="grid" class="hidden"></div>
</div>
</div>
</div>
</div>
</div>

Ok so kids, next time you post to SO remember, first check the javascript.
I was prepending the button on the element id of the connect button.
Thanks folks!