I am using jQuery Spinner and dont know how to get value from spinner to use in javascript code.
JS - in separate library i need to call value
function calculate (){
var result = 15 * HERE I NEED VALUE! ;
}
<div class="input-group spinner" data-trigger="spinner">
<input type="text" class="form-control text-center" value="0" data-rule="quantity">
<div class="input-group-addon">
<i class="fa fa-caret-up"></i>
<i class="fa fa-caret-down"></i>
</div>
</div>
Something like this
$("#spinner")
.spinner('delay', 200) //delay in ms
.spinner('changed', function(e, newVal, oldVal) {
// trigger lazed, depend on delay option.
})
.spinner('changing', function(e, newVal, oldVal) {
// trigger immediately
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vsn4ik/jquery.spinner/master/dist/js/jquery.spinner.min.js"></script>
<div data-trigger="spinner" id="spinner">
-
<input type="text" value="1" data-rule="quantity">
+
</div>
Related
I have a date range picker on my page and it works all right except that once I pick the range the value doesn't update.
I'd say that this might be because once the date range is picked up it automatically does the search for the records, so I tried to update the value based on the
request.args.get("start_date") and request.args.get("last_date")
using js
document.getElementById('').value = '';
but it doesn't work.
Does anybody have any idea why I am not able to update the value?
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
autoUpdateInput: true
}, function(start, end) {
window.location.search = 'start_date=' + start.format("DD/MM/YYYY") + "&last_date=" + end.format("DD/MM/YYYY");
document.getElementById('daterange').value = start.format("DD/MM/YYYY") + " - " + end.format("DD/MM/YYYY");
});
});
</script>
<div class="col-md-12 center-block" style="padding-bottom: 2rem">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="daterange" name="daterange" value=""/>
</div>
</div>
I wanted to write a generic method to set different models passed as a variable to the function on ng-click, googled a lot but found nothing which is useful, here is my code
<span class="fa fa-star " ng-click="setClassJsn(1, 'present')" id='present'></span>
<span class="fa fa-star " ng-click="setClassJsn(1, 'clarity')" id='present'></span>
<input type="text" ng-model="present" />
<input type="text" ng-model="clarity" />
I wanted to translate the "e" to the model name and set it accordingly.
$scope.setClassJsn = function(value, e) {
alert("hai this is setting class");
console.log(e);
$scope."e" = value;
};
Please note that i know $scope."e" = value; this statement is wrong just to understand i have given the quotes.
You can try $scope[e] = value.
angular.module("app", []).controller("ctrl", function($scope) {
$scope.setClassJsn = function(value, e) {
console.log(e);
$scope[e] = value;
}
$scope.displayClassJsn = function(e) {
console.log($scope[e]);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span class="fa fa-star " ng-click="setClassJsn(1,'present')" id='present'>Span 1</span>
<span class="fa fa-star " ng-click="setClassJsn(1,'clarity')" id='present'>Span 2</span>
<input type="text" ng-model="present" />
<input type="text" ng-model="clarity" />
<br/>
<button ng-click="displayClassJsn('present')">Show 'present'</button>
<button ng-click="displayClassJsn('clarity')">Show 'clarity'</button>
</div>
I am using a bootstrap template I found online to create a simple multi-step form. The template has some icons across the top that identify where the user is in the form completion process. Once they complete the form step and select the next button, the icon map at the top advances to the next step and the previous step is now activated (color changed).
I want to be able to make these icons an active link once the user has completed the step so they can quickly navigate back to a previous step by clicking on the icon. How can I make the icons an active link to their associated steps once they have been activated. Below is my html and js and jsfiddle link.
HTML:
<body>
<!-- Top content -->
<div class="top-content">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<form role="form" action="" method="post" class="f1">
<h3>Register To Our App</h3>
<p>Fill in the form to get instant access</p>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>about</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>account</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>social</p>
</div>
</div>
<fieldset>
<h4>Tell us who you are:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">First name</label>
<input type="text" name="f1-first-name" placeholder="First name..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">Last name</label>
<input type="text" name="f1-last-name" placeholder="Last name..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-about-yourself">About yourself</label>
<textarea name="f1-about-yourself" placeholder="About yourself..." class="f1-about-yourself form-control" id="f1-about-yourself"></textarea>
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<h4>Set up your account:</h4>
<div class="form-group">
<label class="sr-only" for="f1-email">Email</label>
<input type="text" name="f1-email" placeholder="Email..." class="f1-email form-control" id="f1-email">
</div>
<div class="form-group">
<label class="sr-only" for="f1-password">Password</label>
<input type="password" name="f1-password" placeholder="Password..." class="f1-password form-control" id="f1-password">
</div>
<div class="form-group">
<label class="sr-only" for="f1-repeat-password">Repeat password</label>
<input type="password" name="f1-repeat-password" placeholder="Repeat password..." class="f1-repeat-password form-control" id="f1-repeat-password">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<h4>Social media profiles:</h4>
<div class="form-group">
<label class="sr-only" for="f1-facebook">Facebook</label>
<input type="text" name="f1-facebook" placeholder="Facebook..." class="f1-facebook form-control" id="f1-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="f1-twitter">Twitter</label>
<input type="text" name="f1-twitter" placeholder="Twitter..." class="f1-twitter form-control" id="f1-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="f1-google-plus">Google plus</label>
<input type="text" name="f1-google-plus" placeholder="Google plus..." class="f1-google-plus form-control" id="f1-google-plus">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-submit">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
JavaScript:
function scroll_to_class(element_class, removed_height) {
var scroll_to = $(element_class).offset().top - removed_height;
if ($(window).scrollTop() != scroll_to) {
$('html, body').stop().animate({
scrollTop: scroll_to
}, 0);
}
}
function bar_progress(progress_line_object, direction) {
var number_of_steps = progress_line_object.data('number-of-steps');
var now_value = progress_line_object.data('now-value');
var new_value = 0;
if (direction == 'right') {
new_value = now_value + (100 / number_of_steps);
} else if (direction == 'left') {
new_value = now_value - (100 / number_of_steps);
}
progress_line_object.attr('style', 'width: ' + new_value + '%;').data('now-value', new_value);
}
jQuery(document).ready(function() {
/*
Form
*/
$('.f1 fieldset:first').fadeIn('slow');
$('.f1 input[type="text"], .f1 input[type="password"], .f1 textarea').on('focus', function() {
$(this).removeClass('input-error');
});
// next step
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
// fields validation
if (next_step) {
parent_fieldset.fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').addClass('activated').next().addClass('active');
// progress bar
bar_progress(progress_line, 'right');
// show next step
$(this).next().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
}
});
// previous step
$('.f1 .btn-previous').on('click', function() {
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
$(this).parents('fieldset').fadeOut(400, function() {
// change icons
current_active_step.removeClass('active').prev().removeClass('activated').addClass('active');
// progress bar
bar_progress(progress_line, 'left');
// show previous step
$(this).prev().fadeIn();
// scroll window to beginning of the form
scroll_to_class($('.f1'), 20);
});
});
// submit
$('.f1').on('submit', function(e) {
// fields validation
$(this).find('input[type="text"], input[type="password"], textarea').each(function() {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
// fields validation
});
});
JSFiddle link: https://jsfiddle.net/93r5y1g3/2/
I personally wouldn't make the icons links, because based on your current workflow, you don't want to actually navigate to a different page. You just want to execute some javascript.
Instead, add cursor: pointer; to the css for items that are clickable, and add an event listener for click events on eligible icons.
Here I've added the cursor change when hovering over a clickable icon.
https://jsfiddle.net/93r5y1g3/4/
It just sets the following in css:
.f1-step.activated > .f1-step-icon {
cursor: pointer;
}
Regarding the actual change between fieldsets, it looks like you're doing relative moves only. Your code fades out the parent fieldset of the button that was clicked and fades in the next(). If you are going to permit jumping between steps, you'll need to make two significant changes:
You need each fieldset to have an identifier that is referenced from the icon (so that when you click an icon you can find the related fieldset).
You need to add an event listener for "click" events on each icon that you want to allow users to click. It may be easiest to add the listener to all icons onload, and then have your function just return false if the user isn't allowed to click the icon.
Hope this helps.
edit:
I've updated the jsfiddle (https://jsfiddle.net/93r5y1g3/8/) with a working example of jumping between fieldsets. You can only jump to active fieldsets.
Here's what I changed:
Added id tags to each fieldset.
Added data-fieldset to the icons so that each icon can be linked to a fieldset.
Added a simple event listener to change the active icons and fieldsets when an icon is clicked. Note that if an icon is clicked that hasn't been activated, nothing happens.
Here's the listener:
// Go to step
$('.f1-step-icon').on('click', function(e){
var current_step = {
fieldset: $($(".f1-step.active").children('.f1-step-icon').data('fieldset')),
circle: $(".f1-step.active")
}
var jump_to_step = {
fieldset: $($(this).data('fieldset')),
circle: $(this).parent()
}
if (! jump_to_step.circle.hasClass("activated")) {
// Right now, this prevents users jumping forward.
// If you want jumping forward to be allowed, you need to add
// some logic to leave a step unfinished and force a return to it.
return;
}
current_step.fieldset.fadeOut(400, function() {
current_step.circle.removeClass('active').addClass('activated')
jump_to_step.circle.addClass('active');
jump_to_step.fieldset.fadeIn();
scroll_to_class($('.f1'), 20);
});
});
I have a web page with JQuery which reads a json file and display tags on the webpage and also provide user a possibility to add the tags manually.
Below is the java script:
$(document).ready(function() {
setInterval(function, 2000);
$.getJSON('https://api.myjson.com/bins/1058x', function(res){
$.each(res.data, function(key, val){
$("<span class='tag label label-info'><span>"+val.tag+"</span><span class='glyphicon glyphicon-remove-sign'></span></span>").appendTo('.list')
});
});
$('#addButton').click(function() {
var toAdd=$('input[name=checkbox]').val();
var tag = "<span class='tag label label-info'><span>"+toAdd+"</span><span class='glyphicon glyphicon-remove-sign'></span></span>"
$(tag).appendTo('.list');
});
$('.list').on('click','span',function() {
$(this).parent().remove();
});
});
And below is the HTML Code:
<div class="jumbotron" style="border: 1px solid">
<h2 class="text-center">Tag suggestions:</h2>
<div class="row">
<p><br></p>
<div class="col-md-3 col-lg-3 text-center">
Refresh Rate:
</div>
<div class="col-md-7 col-lg-7 pull-left">
<input type="range" min="0" max="60" step="1" value="30" style="width:85%" onchange="updateTextInput(this.value);" />
</div>
<div class="col-md-2 col-lg-2 pull-left">
<input class="text-center" id="rangeValue" type="text" value="30" style="width:25%;border:2px solid #456879; border-radius:4px;" /> Minutes
</div>
</div>
<br><br>
<div class="text-center">
<div class="list">
</div>
</div>
<br><br>
<div class="text-center">
<form id="tagInput">
<input type='text' name='checkbox' style="border:2px solid #456879; border-radius:10px; height: 26px; width: 230px;"/>
</form>
<br><br>
<button id="addButton" class="btn btn-primary">Add New</button>
</div>
</div>
</div> <!-- /container -->
I have also created a jsFiddle here.
What I want now to refresh the javascript every two minutes. so that it can read the file every two minutes and display tags again without reloading the page again and again but just the tags. I would highly appriciate the help.
Thank you.
This should work.
window.setInterval(function(){
/// call your function here
}, 120000);
I updated your script:
var load = function () {
$.getJSON('https://api.myjson.com/bins/4skih', function (res) {
$.each(res.data, function (key, val) {
addTag(val.tag, key);
});
});
};
var init = function () {
load();
$('#addButton').on('click', function () {
var $input = $('input[name=checkbox]');
var toAdd = $.trim($input.val());
if (toAdd !== '') { // check value.
addTag(toAdd);
$input.val(''); //clear input after add.
}
});
$('.list').on('click', 'button', function () {
$(this).parent().remove();
});
setInterval(load, 2000 * 60); // Loading data each 2 min.
};
$(document).ready(init);
// Add tag to html.
var addTag = function (tag) {
$("<div><button class='tag'>" + tag + "</button></div>").appendTo('.list');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<div class="list">
</div>
</div>
<br><br>
<div class="text-center">
<input type='text' name='checkbox' />
<br><br>
<button id="addButton" class="btn btn-primary">Add New</button>
</div>
If you would like to fetch data periodically, I guess you wanted to do this:
$(document).ready(function () {
setInterval(function () {
$.getJSON('https://api.myjson.com/bins/1058x', function (res) {
$.each(res.data, function (key, val) {
$("<span class='tag label label-info'><span>" + val.tag + "</span><span class='glyphicon glyphicon-remove-sign'></span></span>").appendTo('.list')
});
}, 1000 * 120);
});
});
As soon as document is ready, you invoke function every 2 minutes.
I am working in angular js application, where i need to create textbox with buttons dynamically that means
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<input type="text" name="ndc9" class="form-control txtBoxEdit" ng-model="ndc9">
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
<div style="padding-top:20px; display:block">
<span class="red" id="delete" ng-class="{'disabled' : 'true'}">Delete</span> <span>Cancel </span> <span id="addRow" style="cursor:pointer" ng-click="ndcCheck(0)">Add </span>
</div>
</div>
this will create below one
i will enter some value in above textbox and click add ,it needs to be created in next line with same set of controls that means (textbox with above 3 buttons need to be created again with the entered value).
Entering 123 in first textbox and click add will create new textbox with delete,cancel,add button with entered value.
Again am adding new value 243 then again it needs to create new textbox down to next line with the entered value (and also the same controls).
finally i want to get all the entered values. how can i achieve this in angular js
You could use ng-repeat with an associative array. Add Would basically push the model value to an array and and also an empty object in the array.
<div ng-repeat ="ndc in NDCarray">
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<input type="text" name="ndc9" class="form-control txtBoxEdit" ng-model="ndc.val">
</div>
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
<div style="padding-top:20px; display:block">
<span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span>
<span>Cancel </span>
<span id="addRow" style="cursor:pointer" ng-click="NDCadd ()">Add </span>
</div>
</div>
</div>
In the controller:
$scope.NDCarray = [{val: ''}];
$scope.NDCadd = function() {
$scope.NDCarray.unshift(
{val: ''}
);
};
$scope.NDCdelete = function(index) {
$scope.NDCarray.splice(index, 1);
};
Plunker: https://plnkr.co/edit/3lklQ6ADn9gArCDYw2Op?p=preview
Hope this helps!!
<html ng-app="exampleApp">
<head>
<title>Directives</title>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script type="text/javascript">
angular.module('exampleApp', [])
.controller('defaultCtrl', function () {
vm = this;
vm.numbers = [1, 2, 3];
vm.add = function (number) {
vm.numbers.push(number);
}
vm.remove = function (number) {
var index = vm.numbers.indexOf(number);
if(index>-1){
vm.numbers.splice(index, 1);
}
}
});
</script>
</head>
<body ng-controller="defaultCtrl as vm">
<div ng-repeat="num in vm.numbers">
<span>Number : {{num}}</span>
</div>
<div>
<input type="number" ng-model="vm.newNumber">
<button ng-click="vm.add(vm.newNumber)">Add</button>
<button ng-click="vm.remove(vm.newNumber)">Remove</button>
</div>
</body>
</html>