I have a page with several bootstrap-sliders. Here's a representative example:
<label>My Label 1</label>
<input id="mySlider1" data-slider-id='mySlider1' type="text"/>
<label>My Label 2</label>
<input id="mySlider2" data-slider-id='mySlider2' type="text"/>
Here's the javascript definition for the sliders:
$("#mySlider1").slider({
min: 0,
max: 5000,
value: [0, 5000]
});
$("#mySlider2").slider({
min: 0,
max: 5000,
value: [0, 5000]
});
At some point I want to iterate through all the sliders and get their range values from within the 'each' loop:
$('.slider').each(function(){
var key = $(this).attr("id");
var value = $(this).val(); /* <- this is the problem line */
console.log("key = " + key + ", value = " + value);
});
The console prints out:
key = mySlider1, value =
key = mySlider2, value =
I would like to see 'value' as a 2-element array for the range [0,5000].
The issue here is that you are attempting to iterate over .slider, which is a class reserved for bootstrap-slider's way of making a slider. You should add a slider to your input elements instead, such as in this jsfiddle: https://jsfiddle.net/a3wdzyck/
Related
I am using Highcharts - Line - Ajax.
Let's say I have two series of data - 'Headcount 1' and 'Headcount 2'. I want to draw a line graph of 'Headcount', which is the sum of the 2 series. However, when someone hovers on one data point, I want to show the individual values in the callout. Is this possible? How can I do this?
e.g.
H1 = (1, 2, 3)
H2 = (5, 6, 7)
Ht = (6, 8, 10)
I will draw a line graph with Ht. If I hover on '6' on the chart, the callout should show the values of H1 = 1 and H2 = 5
You can set the visibility for series H1 and H2 to false,
series: [{
name: 'H1',
data: [1, 2, 3],
visible: false,
showInLegend: false
}, {
name: 'H2',
data: [5, 6, 7],
visible: false,
showInLegend: false
}, {
name: 'H',
data: [6, 8, 10]
}]
and edit tooltip formatter to display what you want
tooltip: {
formatter: function() {
var s = '<b>' + this.x + '</b>';
var chart = this.points[0].series.chart; //get the chart object
var categories = chart.xAxis[0].categories; //get the categories array
var index = 0;
while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays
$.each(chart.series, function(i, series) { //loop through series array
if (series.name !== 'H') {
s += '<br/>'+ series.name +': ' +
series.data[index].y +'m'; //use index to get the y value
}
});
return s;
},
shared: true
}
Have a look at jsfiddle.net/s190ebby/27/
Yes
Points can have custom property, taking care that the names do not shadow highcharts variable names.
var data = [{
y: 6,
h1Value: 1,
h2Value: 5
},{
y: 8,
h1Value: 2,
h2Value: 6
}];
Set your series to this data in your config object, by series: data
Customise the tooltip as:
tooltip: {
pointFormat: '<b>H Value</b>: {point.y}<br/>
<b>H1 Value</b>: {point.h1Value}<br/>
<b>H2 Value</b>: {point.h2Value}'
}
I have a KendoUI Grid where I need to display a sum of several of the columns in the footer.
As the Items column is bound this seems to be working perfectly.
I also have a Total Net £s for Items column which is calculated but I cannot get the aggregate function to work. Is it possible to sum a calculated column?
columns.Bound(m => m.Items).Format("{0:n2}")
.HtmlAttributes(new { #class = "items" }).Title("Units")
.ClientFooterTemplate("#= kendo.format('{0:n2}', sum) #");
columns.Template(p => { })
.ClientTemplate("#= kendo.toString((Items * 12) * NetPoundsPerItem, 'n2') #")
.Title("Total Net £s for Items")
.FooterTemplate("#= kendo.tostring(sum, \"n2\") #");
because this is a unbound column you will need to keep track of your numbers manually and then put your sum in your aggregate column. Use a footer template
columns: [
{ field: "Cost", width: 120 }, footertemplate: "<div id='total'> Total : $0.00 </div> },
{ field: "Quanity", title: "Quanity", width: 40}]
Use javascript to calculate the sum and then use jquery to set it.
//get the correct grid Kendo Grid
var grid = $("#grid").data("kendoGrid");
//get the data
var data = grid.dataSource.view();
var FinalTotal = 0;
// now iterate through each cell
data.forEach(function (entry) {
FinalTotal += entry["Quanitiy"] * entry["Price"];
}
// set the aggregate template div
$('#total').text("Total: " + kendo.toString(FinalTotal, 'C'));
Here's a solution for modifying the tooltip of the kendo-ui slider depending on the value:
var text = [];
text.push("Text 1");
text.push("Text 2");
text.push("Text 3");
text.push("Text 4");
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {
enabled: true,
format: text[0], // min-value text
},
slide: function (e) {
e.sender.options.tooltip.format = text[e.value];
}
});
It' a pitty you can't configure the tooltip as with the tooltip-widget.
You're half way there. Lets say you needed to represent minutes and seconds as if you were editing a video. This example is for using a range slider.
Fiddle: http://jsfiddle.net/KjABb/
var text = [];
var templateString = "#= formatToMinutesSeconds(selectionStart) # - #= formatToMinutesSeconds(selectionEnd) #";
var mediaLength = 229; //03:49
function formatToMinutesSeconds(value) {
return text[value];
}
var i = 0;
while (i <= mediaLength) {
var date = new Date(null);
date.setSeconds(i);
var minutesSeconds = kendo.toString(date, "mm:ss");
text.push(minutesSeconds);
i++;
}
$("#clip-editor-slider").kendoRangeSlider({
min: 0,
max: mediaLength,
smallStep: 1,
largeStep: 60,
tickPlacement: "both",
tooltip: {
template: kendo.template(templateString)
}
});
Keep a local variable called _sliderValue. This is an arbitrary name. Call it what you want. In the slider "slide" event handler, set _sliderValue to e.value. Your tooltip template can then access the value stored in the local variable.
var _sliderValue = 0;
var template = kendo.template($("#sliderTemplate").html());
//$("#slider").load(function() {
$("#slider").kendoSlider({
min: 0,
max: 3,
smallStep: 1,
largeStep: 1,
value: 0,
tooltip: {template: template},
slide: function (e) {
_sliderValue = e.value;
}
});
//});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<script id="sliderTemplate" type="text/x-kendo-tmpl">
<div>Text #= _sliderValue #</div>
</script>
<div id="slider"></div>
On our utility billing, a person can only play what they owe (or less) to a maximum of a certain amount. I have created a method to check this, however, I need to be able to pass in the total that they owe to finish the comparison. How would I output the total amount due so that jQuery can collect that amount?
Here is my method:
$.validator.addMethod('MaxDue', function(value, element, params) {
var maxPay = parseFloat($(params.totalDue).val());
var maxTotal = 750.00;
var payAmount = parseFloat($(params.payment).val());
return (payAmount <= maxPay || (maxPay > maxTotal && payAmount <= maxTotal));
}, 'Amount greater than dollar amount allowed.');
Here is the section of the validate rules that are relevant:
"Payment.PayAmount": {
required: true,
min: 0.01,
MaxDue: {
totalDue: 88.84,
payment: "#Payment_PayAmount"
}
}
Here is the area of affected output from my code:
<fieldset>
<legend>Account Information</legend>
<p>Current Balance: 88.84</p>
<p>Amount to Pay: <input id="Payment_PayAmount" name="Payment.PayAmount" type="text" value="88.84" /></p>
</fieldset>
Got it.
// Validate the expiration date
$.validator.addMethod('MaxDue', function(value, element, params) {
var maxPay = parseFloat(params.totalDue);
var maxTotal = 750.00;
var payAmount = parseFloat($(params.payment).val());
return (payAmount <= maxPay || (maxPay > maxTotal && payAmount <= maxTotal));
}, 'Amount greater than dollar amount allowed.');
jQuery.Validate
"Payment.PayAmount": {
required: true,
min: 0.01,
MaxDue: {
totalDue: $("#payment").text(),
payment: "#Payment_PayAmount"
}
}
And value gets wrapped in a <span> tag.
<p>Current Balance: <span id="payment">88.84</span></p>
How do I set value dynamically to the integerpicker?
First insert a interpicker to your html scene:
<div x-mojo-element="IntegerPicker" id="integerpickerId" class="integerpickerClass" name="integerpickerName"></div>
Then instantiate the picker in the Scene-assistant.js file in the setup function:
MainSceneAssistant.prototype.setup = function() {
this.controller.setupWidget("integerpickerId",
this.attributes = {
label: 'Number',
modelProperty: 'value',
min: 0,
max: 20
},
this.integerPickerModel = {
value: 5
});}
You can than change the picker dynamically by setting the model:
this.integerPickerModel.value = 10;
this.controller.modelChanged(this.integerPickerModel, this);
This works for the most widgets in webos, like pickers and textfields.