I have built a simple calculator here. The input can be any number, but the output needs to be a minimum of 500 when the input is less than 100. I am not an expert here, so this is about as far as I've got on my own. Would appreciate any help!
HTML:
<input type="number" name="drivercount" value="100">
<input type="number" name="pricing" value="500">
Script:
<script>
$(window).on('load', function () {
$(':input').bind('keypress keydown keyup change',function(){
var drivers = parseFloat($(':input[name="drivercount"]').val(),10);
var v = '';
if (!isNaN(drivers)){
v = (drivers * 5);}
$(':input[name="pricing"]').val(v.toString());
});
});
</script>
You can use a simple ternary on your multiplication before you set the variable to check if the value is less than or equal to 100.
$(window).on('load', function () {
$(':input').bind('keypress keydown keyup change',function(){
var drivers = parseFloat($(':input[name="drivercount"]').val(),10);
var v = '';
if (!isNaN(drivers)){
v = (drivers <= 100 ? 500 : drivers * 5);}
$(':input[name="pricing"]').val(v.toString());
});
});
Related
I have an angularjs file which connects to a server using signalR. This is my code:
<div ng-app="myapp" ng-controller="myctr">
//THE BELOW BUTTON SHOULD CHANGE THE VALUE OF {{testo}}
<button ng-click="AggiornaTesto()">Cliccami</button>
<input type="text" ng-model="input" />
//THe EXPRESSION BELOW ONLY UPDATES IF I PRESS THE BUTTON "CLICCAMI" TWICE
{{testo}}
<br />
Stato Connessione: {{statoconnessione}}
</div>
<script>
var app = angular.module("myapp", []);
app.controller("myctr", function ($scope) {
$scope.testo = "";
$scope.input = "";
$scope.btnenabled = "true";
$scope.statoconnessione = "";
$.connection.myHub1.client.JSMet1 = function (x) {
//THE FOLLOWING LINE IS EXECUTED CORRECTLY
//BECAUSE IN THE CONSOLE I CAN SEE IT IN THE CONSOLE,
//AND THE VALUE OF X IS CORRECT
console.log("JSMet1 " + Math.random()+" "+x);
//MAYBE ALSO THE FOLLOWING LINE IS EXECUTED BUT THE
//EXPRESSION {{testo}} IS UPDATED ONLY IF I PRESS THE BUTTON TWICE
$scope.testo = x;
};
$scope.AggiornaTesto = function () {
console.log("AggiornaTesto " + Math.random());
$.connection.myHub1.server.cSMet1($scope.input);
};
});
$.connection.hub.start().done(function () {
$.connection.hub.stateChanged = function (stato) { $scope.statoconnessione = stato };
});
</script>
The problem is that the expression {{testo}} is updated one time yes and one time no. meanwhile it should be updated every time i press the "cliccami" button. The function linked to the button, namely:
$.connection.myHub1.client.JSMet1 = function (x) {....}
is executed every time I press the button because I have checked the console and the console.log function is executed. But the next line, that is
$scope.testo = x;
doesn't seem to be executed becuse the {{testo}} doesn't change.
There is something called a digest cycle in angularJS that does the two way data-binding for you automatically on all the known angular's directives. In your case, you got to trigger the digest cycle yourself, so that {{testo}} will be changed to the new value. For that you got to call $scope.$apply()
More info about digest cycle here http://www.sitepoint.com/understanding-angulars-apply-digest/
This is a common issue when you mix angular code with libraries that are not aware of angular. When you pass a callback function to something outside angular you have to manually trigger an angular digest loop.
The cleanest way is to ensure that all callback code happens inside a call to $scope.$apply():
$.connection.myHub1.client.JSMet1 = function (x) {
$scope.$apply(function() {
console.log("JSMet1 " + Math.random()+" "+x);
$scope.testo = x;
})
});
In my autoform the value of a field is the difference of two other input fields. It is not allowed to be updated by the user. Unfortuantly at the moment it is not possible to set a single field to readonly in a form. So my approach is to create an autoValue and a custom Validation to prevent an update
My code so far:
'SiteA.Settings.RXSignalODU1difference': {
type: Number,
label: "RX Signal [dBm] ODU1 difference (without ATPC +/- 3dbm)",
decimal: true,
autoform: {
type: "number"
},
autoValue: function() {
var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
if (ODU1gemessen.isSet || ODU1planned.isSet) {
return ODU1gemessen.value - ODU1planned.value;
}
},
custom: function() {
var ODU1gemessen = this.field("SiteA.Settings.RXSignalODU1");
var ODU1planned = this.field("SiteA.Settings.RXSignalODU1planned");
var dif = ODU1gemessen.value - ODU1planned.value;
if (this.value !== dif) {
return "noUpdateAllowed";
}
}
},
My Simple.Schema message:
SimpleSchema.messages({noUpdateAllowed: "Can't be updated"});
Unfortunatly no message pops up.
EDIT
This method will create a disabled input box within your form that will automatically show the difference between two other input fields as the user types.
First, we define session variables for the values used in the calculation and initialize them to undefined.
Template.xyz.onRendered({
Session.set("ODU1gemessen", undefined);
Session.set("ODU1planned", undefined);
});
Then we define two events, that will automatically update these session variables as the user types.
Template.xyz.events({
'keyup #RXSignalODU1' : function (event) {
var value = $(event.target).val();
Session.set("ODU1gemessen", value);
},
'keyup #RXSignalODU1planned' : function (event) {
var value = $(event.target).val();
Session.set("ODU1planned", value);
}
});
Then we define a helper to calculate the difference.
Template.xyz.helpers({
RXSignalODU1difference : function () {
var ODU1gemessen = Session.get("ODU1gemessen");
var ODU1planned = Session.get("ODU1planned");
if (!!ODU1gemessen || !!ODU1planned) {
return ODU1gemessen - ODU1planned;
}
}
});
My HTML markup looks like this. Note, to still control the order of the form, I use a {{#autoform}} with a series of {{> afQuickfields }} rather than using {{> quickForm}}.
To display the calculated difference, I just create a custom div with a disabled text box.
<template name="xyz">
{{#autoForm collection="yourCollection" id="yourId" type="insert"}}
<fieldset>
<legend>Enter legend text</legend>
{{> afQuickField name="SiteA.Settings.RXSignalODU1" id="RXSignalODU1"}}
{{> afQuickField name="SiteA.Settings.RXSignalODU1planned" id="RXSignalODU1planned"}}
<div class="form-group">
<label class="control-label">RXSignalODU1difference</label>
<input class="form-control" type="text" name="RXSignalODU1difference" disabled value="{{RXSignalODU1difference}}">
<span class="help-block"></span>
</div>
</fieldset>
<button class="btn btn-primary" type="submit">Insert</button>
{{/autoForm}}
</template>
Original Answer - not recommended
If you are generating your form as a quickForm, you could do something like
{{>quickForm collection='yourCollection' omitFields='SiteA.Settings.RXSignalODU1difference'}}
This will leave this field off the form, so the user won't be able to update it.
If you still want to display the value somewhere along with the form as the user types in the other two values, you could define a helper in your client side js
something like
Template.yourFormPage.helpers({
diff: function () {
var ODU1gemessen = $('[name=SiteA.Settings.RXSignalODU1]').val();
var ODU1planned = $('[name=SiteA.Settings.RXSignalODU1planned]').val();
if (!!ODU1gemessen || !!ODU1planned) {
return ODU1gemessen - ODU1planned;
}
}
});
You'll want to double check how the field names are being rendered in your DOM. Autoform assigns the name attribute using the field names in your schema, but I don't know how it handles nested keys... (i.e. whether it names the element 'SiteA.Settings.RXSignalODU1' or just 'RXSignalODU1' )
And then just display the value somewhere in your html as :
{{diff}}
When I try to use this.findAll on a template where the selector is in a sub-template, findAll returns nothing.
Here's the HTML:
<template name="products">
{{#each productList}}
{{> product }}
{{/each}}
</template>
<template name="product">
<div class="box">{{name}}</div>
</template>
Here's the JS:
Template.products.helpers({
productList: function() {
var all = Products.find({}).fetch();
return all;
}
});
Template.products.rendered = function(){
var boxes = this.findAll('.box');
console.log(boxes.length);
}
Output of boxes.length is 0. Any ideas how I could get the "box" elements?
According to the docs for findAll:
Only elements inside the template and its sub-templates can match parts of the selector.
So it should work for sub-templates. I tried this with a fixed array of products and it worked, which implies that you are just seeing a delay between the call to rendered and the products being fetched. For example if you do:
Template.products.events({
'click .box': function (e, t) {
var boxes = t.findAll('.box');
console.log(boxes.length);
}
});
Then if you click on one of the boxes, you should see the correct number logged to the console. In short, I think the test may just be invalid. If you are using iron-router, you could try adding a waitOn for the products - that may ensure they arrive before the rendered call.
Here's what I did to run a script after all products have been loaded.
I've added last_product property in all the products.
Template.products.helpers({
productList: function() {
var all = Products.find({}).fetch();
var total = all.length;
var ctr = 0;
all.forEach(function(doc){
doc.last_product = false;
ctr++;
if(ctr == total)
{
doc.last_product = true;
}
return doc;
});
return all;
}
});
Then instead of "Template.products", I used "Template.product" to detect if the last product is rendered. When the last product is rendered, run the script.
Template.product.rendered = function(){
if(this.data.last_product){
var boxes = $('.pbox');
console.log(boxes.length);
}
}
boxes.length now has the correct length.
Thanks to David for the idea!
Here's the correct answer. I've added this to my iron-router route:
action : function () {
if (this.ready()) {
this.render();
}
}
Found the answer from https://stackoverflow.com/a/23576039/130237 while I was trying to solve a different problem.
I'm having a bit of a problem with this code.
The program gives me a list of checkboxes but a user ID. then u user can change his selection and push the save button (id="btnSaveUserIntersts") and i am trying to save in the hidden textbox all the values of the checkboxes that was choosen.
The problem is that i am getting all the time the same selections that came form the database and not getting the new selection that the user made.
Can any one tell me what am i doing wrong here?
$(document).ready(
function()
{
$('#btnSaveUserIntersts').bind(
'click',
function()
{
var strCheckBoxChecked = new String();
$('input[type=checkbox][checked]').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
$('#hidUserInterests').val(strCheckBoxChecked);
}
);
}
);
10x
Try using:
$('input:checkbox:checked').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
As the selector instead of what you're currently using.
$('input[type="checkbox"]:checked')
Use .map, it's far prettier:
var strCheckBoxChecked = $('input:checkbox:checked').map(function()
return this.value;
}).get().join(",");
And the selector you are using is close, $('input[type=checkbox][checked=checked]')
This is a follow-up question to ASP.NET How to pass container value as javascript argument
Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.
Here is the jQuery used to select row.
$(function() {
$('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
Here is the actual output HTML markup.
<input
id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox"
type="text" value="198327493"
name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>
I have just started using jQuery tonight and been going through the official jQuery Selectors documentation but have been unsuccessful.
Am I missing something here?
What I did to save the full id of the control I used in my .aspx page:
<input type="hidden"
id="SubcontractorDropDownID"
value="<%= SubcontractorDropDown.ClientID %>" />
You can then just get the value of the id and then use that in your query to know which row to use.
At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?
$(function() {
$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
I do not know why selecting through #_TrustGrid would not work.
I was able to get around the problem by specifying :input as shown below.
$(function() {
//$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(':input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});