How to disable a tab until form elements are complete? - javascript

In my example below, I've managed to disable the next button until the form field (Case Title) has content in it. I don't quite understand how to disable the next tab until that form field is complete.
How can I disable the other tabs until the form field in the first tab is completed?
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
caseTitle.addEventListener("keyup", () => {
caseTitleNext.removeAttribute("disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li>
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li>
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li>
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li>
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

Base on the Bootstrap docs, you can disable tabs by setting <li class="disabled"> and removing the tab from data-toggle. I wrote a setTabDisabled(tabElement) method for quick toggling
Here is a working example
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
const setTabDisabled = (tabEl, isDisabled = true) => {
tabEl.setAttribute("class", isDisabled ? "disabled" : "");
const tabLink = tabEl.querySelector('a');
tabLink.setAttribute("data-toggle", isDisabled ? "" : "tab");
};
const setNonActiveTabsDisabled = (isDisabled = true) => {
document.querySelectorAll('.nav.nav-tabs li:not(.active)').forEach(element => {
setTabDisabled(element, isDisabled);
});
};
caseTitle.addEventListener("keyup", () => {
if(caseTitle.value.trim().length){
caseTitleNext.removeAttribute("disabled");
setNonActiveTabsDisabled(false);
}
else{
caseTitleNext.setAttribute("disabled","");
setNonActiveTabsDisabled(true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li class="disabled">
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li class="disabled">
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li class="disabled">
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li class="disabled">
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

Related

Order HTML divs to their corresponding div with JavaScript

In this image
,
you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.
This is a basic Jsfiddle of the menu above:
https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH
FYI: I'm creating a webapplication, using MVC5, ASP.net.
Basic snippet of HTML:
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Isfanbul</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">Monolith</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">New Haven</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group">
<div class="col-lg-6 item-title">JejuIsland</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
This works as specified if the item-group gets one of the 3 classes matching the ID of the panel
const reorderDivs = () => {
[...document.querySelectorAll(".panel")].forEach(panel => {
const id = panel.id;
[...document.querySelectorAll("." + id)].forEach(item => {
const parentContainer = panel.querySelector(".panel-body");
// console.log(item.querySelector(".item-title").textContent,"moved to",id);
parentContainer.appendChild(item);
})
})
};
// example toggle code
const classes = ['offline', 'construction', 'online'];
window.addEventListener("load", () => {
reorderDivs(); // initialise
document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
const item = tgt.closest(".item-group");
const classList = item.classList;
for (let cl of classList) {
const idx = classes.indexOf(cl);
if (idx !== -1) { // found
classList.remove(cl);
newClass = classes[(idx + 1) % classes.length];
}
}
classList.add(newClass)
reorderDivs();
}
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div id="rightMenu" class="right-area">
<div class="menu-background"></div>
<div class="col-lg-12 right-area-top-buttons">
<div class="btn btn-dark-themed btn-close-sidemenu" onclick="navigateToPage('CloseRightMenu')"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></div>
</div>
<div class="col-lg-12 search-bar">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-dark-themed" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</div>
<div class="col-lg-12 status-bars">
<div class="panel panel-danger" id="offline">
<div class="panel-heading">
<h3 class="panel-title">Offline</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">Isfanbul <button class="toggle" type="button">Switch state</button></div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToIsfanbul"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
<div class="row col-lg-12 item-group construction">
<div class="col-lg-6 item-title">Monolith CONSTRUCTION</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToMonolith"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="construction">
<div class="panel-heading">
<h3 class="panel-title">Under Construction</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group online">
<div class="col-lg-6 item-title">New Haven ONLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToNewHaven"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
<div class="panel panel-success" id="online">
<div class="panel-heading">
<h3 class="panel-title">Online</h3>
</div>
<div class="panel-body">
<div class="row col-lg-12 item-group offline">
<div class="col-lg-6 item-title">JejuIsland OFFLINE</div>
<div class="item-button-group pull-right">
<button class="item-button"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></button>
<button class="item-button" id="JumpToJejuIsland"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>

appended div coming out of the form

Here div is coming out of the form, i want to show the appended div inside the update_new_1 but the div is coming out of the form.Here is my code
var maxAppend = 0;
$(document).on('click', '.update_more', function() {
var u_id = $(this).attr("u_id");
var add_new = $('<div class="form-group" style="margin-bottom: 0px">\n\
<label for="field-1" class="col-sm-4 control-label">Document</label>\n\
<div class="col-sm-5">\n\
<div class="fileinput fileinput-new" data-provides="fileinput">\n\
<span class="btn btn-default btn-file"><span class="fileinput-new" >Select file</span><span class="fileinput-exists" >Change</span><input type="file" name="files[]" ></span> <span class="fileinput-filename"></span>×</div></div>\n\<div class="col-sm-2">\n\<strong>\n\
<i class="fa fa-times"></i> Remove</strong></div>');
maxAppend++;
var resil = $(this).closest("#update_new_" + u_id).append(add_new);
});
<form method="post" class="form_1" action="" enctype="multipart/form-data">
<div id="update_new_1" class="update_new_1 item-row">
<div class="form-group mb0" style="margin-bottom: 0px">
<label for="field-1" class="col-sm-4 control-label">Other Document</label>
<div class="col-sm-5">
<div class="fileinput fileinput-new" data-provides="fileinput">
</div>
<div id="msg_pdf" style="color: #e11221"></div>
</div>
<div class="col-sm-3">
<strong>
<a href="javascript:void(0);" id="update_more" u_id="1" class="addCF item-row-click update_more">
<i class="fa fa-plus">
</i>
Add More</a>
</strong>
</div>
</div>
</div>
<div class="modal-footer">
<img src="<?php echo base_url();?>assets/resources/ajax-loader.gif" id="ajaxIndicator" style="display: none; margin-right: 10px" />
<input type="submit" id="btnSubmit" class="btn btn-primary" style="font-weight: bold" value="Edit Details" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

tab is not loading when I click

Here is my code I pulled out from the internet which works fine in Online Snippets but when I copy and run it on my local computer , the tab stays same. Please help me
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
I would be very greatful, If anyone could help me what I am doing wrong. For reference, here is the original link to above bootstrap theme.
https://bootsnipp.com/snippets/featured/people-card-with-tabs
The reason is that you didn't include the bootstrap.min.js file, you only included the jQuery and the bootstrap.min.css file.
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
My 2 cents:
You should try and be more careful.
You should try and debug the problem, starting always from the most obvious reasons first.
You just need to load your js at the end of the body.
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>

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!

How to create a directive for building a part of DOM?

How can I create a directive to create such elements:
<div class="col-xs-6 todo">
<h2>Do</h2>
<div class="item" task-name="task1457">
<div class="close"><a class="btn btn-danger" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>A</h3>
<p>B</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p></div>
<div class="item" task-name="task57323">
<div class="close"><a class="btn btn-danger btn-delete" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>C</h3>
<p>D</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p></div>
<div class="item" task-name="task278">
<div class="close"><a class="btn btn-danger btn-delete" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>E</h3>
<p>F</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p>
</div>
</div>
It should be a collection of items inside of <div class="todo">.

Categories