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

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

Related

How to disable a tab until form elements are complete?

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>

How to move up/down a single accordion html elements

I've got multiple accordions from Bootstrap 4. I want a single accordion to move up/down when I click its corresponding arrow. How do I go about this in JS or jQuery?
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
Disco Full Overview
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
Disco Test
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
I've already set up the arrow keys but I don't know how to do this.
Edit.
I've found about insertafter and insertbefore but I don't know how parent and child works. Because the up/down button is child to the other elements and I don't know how to address the entire accordion.

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!

angularjs form wizard validation

So I depending the link to the next step using ng-form directive. But I found out that the other link to the next steps except the current one is enabled.
So I changed it to use flag for ng-disabled . here is my code:
index.html
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a ui-sref="step1" type="button" class="btn btn-primary btn-circle active-step-wizard">1</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step1Form.$invalid;" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step2Disabled;" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step3Disabled;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step4Disabled;" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="step5Disabled;" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
</div>
</div>
app.js
$scope.step2Disabled = true;
$scope.step3Disabled = true;
$scope.step4Disabled = true;
$scope.step5Disabled = true;
But using this approach will not enabled the next step whenever the current step's form validation is valid. How do I solve this? thanks
UPDATE
I try this solution:
test 1:
<div class="stepwizard-step">
<a ng-disabled="step3Disabled;step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
test 1 result:
it only works when Im in current step, the ng-disabled works when the form validation is valid
test 2:
<div class="stepwizard-step">
<a ng-disabled="step3Disabled || step3Form.$invalid;" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
test 2 result:
When Im at previous step, the link to this step is perfectly disabled. But the link to next step is still disabled when Im at this step and the form is valid.
you should have a $scope variable in your controller:
$scope.currentStep = 0;
$scope.enableCount = 0;
then you have a function
$scope.changeStep = function(index){
$scope.currentStep = index;
}
in your submit function you add this line of code:
if(form.$valid && $scope.enableCount <= $scope.currentStep) $scope.enableCount++;
then in your html you should do like this:
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a ui-sref="step1" type="button" ng-click="changeStep(0)" class="btn btn-primary btn-circle active-step-wizard">1</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 1" ng-click="changeStep(1)" ui-sref="step2" type="button" class="btn btn-primary btn-circle active-step-wizard">2</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 2" ng-click="changeStep(2)" ui-sref="step3" type="button" class="btn btn-primary btn-circle active-step-wizard">3</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 3" ng-click="changeStep(3)" ui-sref="step4" type="button" class="btn btn-primary btn-circle active-step-wizard">4</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 4" ng-click="changeStep(4)" ui-sref="step5" type="button" class="btn btn-primary btn-circle active-step-wizard">5</a>
</div>
<div class="stepwizard-step">
<a ng-disabled="enableCount < 5" ng-click="changeStep(5)" ui-sref="step6" type="button" class="btn btn-primary btn-circle active-step-wizard">6</a>
</div>
</div>

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