This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 5 years ago.
I don't want to run a big if, else, else, else type statement. I'm basically looking for an excel INDIRECT() equivalent, where I get the string of the id, and call that string as a function, based on which id I'm iterating over.
I have inputs with classes that jQuery makes spinners based off of.
$(document).ready(function(){
var primary = $(".spinnerPrimary");
var secondary = $(".spinnerSecondary");
primary.spinner({
min: 7,
max: 20,
});
primary.spinner("value", 10);
secondary.spinner({
min: -4,
max: 4
});
secondary.spinner("value", 0);
When doing max, min, etc. I want to do a spin event that calls a function to update various span containers. I could run one function that just updates every span, or run a big if/else/else case-type statement, so I do have options. What I really want is to pull the id with a this.attr("id"), so that each spinner has a spin set to it based off of the id of that input spinner, that is the same string that corresponds to the name of a defined function.
$(document).ready(function(){
var primary = $(".spinnerPrimary");
var secondary = $(".spinnerSecondary");
primary.spinner({
min: 7,
max: 20,
spin: //fancy code
});
primary.spinner("value", 10);
secondary.spinner({
min: -4,
max: 4,
spin: //same fancy code
});
secondary.spinner("value", 0);
function x() {
//fancy equation code
};
function y() {
//fancy equation code
};
In the above example, if the id is "x", then I want it to call function x(), id="y" calls y(), etc. I'm looking for how to do this specific scenario, not how to do it another way (running if/else based on known id's and corresponding function, for example). If the two alternatives I mentioned are the only way to do it, then so be it.
Duplicate of another question: very similar, but also needed help with mapping functions and applying them to spinner. Still new to jQuery, so was a multifaceted(?) question.
Try it this way:
// Setup your functions as a map, so they are easily
// accessible by name.
var fns = {
x: function(){
console.log('running x!');
},
y: function(){
console.log('runnning y!');
}
}
var primary = $(".spinnerPrimary");
primary.spinner = function(options){
// Tie your `spin` function to the spinner.
console.log('spinning');
options.spin();
}
primary.spinner({
min: 7,
max: 20,
// Assign `spin` to one of the `fns` from above
// using `id` as a key.
spin: fns[primary.attr('id')]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x" class="spinnerPrimary"></div>
Related
I have a Qualtrics survey containing a few questions with custom JavaScript (to enable a slider with two slider knobs). I can a) copy the survey as well as b) export the survey as a .qsf file and re-import it. In both cases, I get a new, working survey.
However, importing the survey questions to an existing survey using the "Import Questions From..." function does not work; the JavaScript fails to work in this case. Is there a way to import these questions to an existing survey while preserving the JavaScript?
The code used in the first (most relevant) question:
Qualtrics.SurveyEngine.addOnload(function()
{
document.getElementById("QR~QID7").setAttribute("readonly", "readonly");
document.getElementById("QR~QID8").setAttribute("readonly", "readonly");
var surface;
var cnst = 4;
// Sets the sliders parameters and starting values
$("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
// variable to store in surface area when user has stopped sliding
var surface, currentResponse;
$("#research-slider").on("slideStop", function(slideEvt) {
surface = slideEvt.value;
document.getElementById("minimum").innerHTML = surface[0];
document.getElementById("maximum").innerHTML = surface[1];
document.getElementById("newValue").innerHTML = (surface[1]- surface[0])/cnst ;
document.getElementById("QR~QID7").value = surface[0];
document.getElementById("QR~QID8").value = surface[1];
});
$('NextButton').onclick = function (event) {
// and now run the event that the normal next button is supposed to do
Qualtrics.SurveyEngine.navClick(event, 'NextButton')
}
})
Your JavaScript won't work when imported because you are using fixed QID codes (QID7 and QID8). The solution is to write your code to find the correct elements by walking the DOM. The easiest way is to use prototypejs instead of native JavaScript.
Assuming the min (QID7) and max (QID8) follow immediately after the question your code is attached to, then it would be something like:
var qid = this.questionId;
var min = $(qid).next('.QuestionOuter').down('.InputText');
var max = $(qid).next('.QuestionOuter',1).down('.InputText');
min.setAttribute("readonly", "readonly");
max.setAttribute("readonly", "readonly");
var surface;
var cnst = 4;
// Sets the sliders parameters and starting values
$("#research-slider").slider({ id: "research-slider", min: 0, max: 10, range: true, value: [0, 10]});
// variable to store in surface area when user has stopped sliding
var surface, currentResponse;
$("#research-slider").on("slideStop", function(slideEvt) {
surface = slideEvt.value;
$("minimum").innerHTML = surface[0];
$("maximum").innerHTML = surface[1];
$("newValue").innerHTML = (surface[1]- surface[0])/cnst ;
min.value = surface[0];
max.value = surface[1];
});
I am trying to incorporate chroma.js into my leaflet map so that i can toggle between quantiles, equal interval, and k-means, but the second and third argument for the domain function does not change anything
var colorScale = chroma.scale('YlGnBu').domain(voterList, 3, 'quantiles');
Here is the full code for the function
this.getRegionItemColor = function(item) {
var regionData = Mapbook.getRegionData();
var voterList = Mapbook.getColorScheme();
var colorScale = chroma.scale('YlGnBu').domain(voterList, 3, 'quantiles');
if (!_.isUndefined(item)) {
var voters = item.voters,
minVoters = regionData.min_voters,
maxVoters = regionData.max_voters;
var alpha = colorScale(voters);
return alpha;
}
else {
return 0;
}
}
Does anyone know why changing the number of buckets or classification method does not change anything?
Strange... I looked into it and I do think there is a problem with the library. Let's consider a very simple and documented example.
If you look at the documentation on github, here is what is written (https://github.com/gka/chroma.js/wiki/Color-Scales):
// Calling .domain() with no arguments will return the current domain.
chroma.scale(['white', 'red']).domain([0, 100], 4).domain() // [0, 25, 50, 75, 100]
When I do the same, however, this returns [0,100] (and not [0, 25, 50, 75, 100]); as you said, the second argument has not changed anything. You may want to flag that behavior as a bug on the plugin github page. Unless someone has a good explanation?
I was having the same problem, then I realized that at the time I defined 'ColorScale', my domain was not yet populated. are you certain that 'voterList' had your dataset in it at the time you defined ColorScale?
I am attempting to create a fiddle which can allow me to change the graph through and input text showing below the graph. I am using jsxgraph library for that.
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Change_Equation_of_a_Graph#JavaScript_Part
Above is the example which is working when you change the function in the text shown graph also changes.
Same example I am trying with the fiddle. But it is not working.
https://jsfiddle.net/me55dw4h/30/
initial code:
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);
How do I make it work?
This is a jsfiddle-specific problem. If the declaration of the function doIt is changed to
doIt = function (){
//redefine function f according to the current text field value
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
//change the Y attribute of the graph to the new function
graph.Y = function(x){ return f(x); };
//update the graph
graph.updateCurve();
//update the whole board
board.update();
};
instead of
function doIt() {
...
}
then the example runs.
But let me emphasize that meanwhile JSXGraph comes with it's own parser JessieCode (see https://github.com/jsxgraph/JessieCode), which allows the input of common math syntax instead of JavaScript syntax. That means, instead of Math.sin(x) the user may just input sin(x). Additionally, there is the power operator ^, i.e. instead of Math.pow(x,2) it is possible to type x^2.
A minimal example using JessieCode for function plotting looks like this, see https://jsfiddle.net/eLs83cs6/
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
doPlot = function() {
var txtraw = document.getElementById('input').value, // Read user input
f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode
curve;
board.removeObject('f'); // Remove element with name f
curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
};
doPlot();
Ann additional side effect is that the parsing of the math syntax with JessieCode prevents XSS attacks which would be easily possible if the users are allowed to supply arbitrary JavaScript code as input.
Suppose, I have the following piece of code:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);
How can I change second point of axis?
Something like ax2.setSecondPoint([2,0])?
In general, how can I set property of any element?
Thank you.
Axis has two properties which names are self-explanatory: point1 and point2.
You can use setPosition method on any of them, e.g.
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])
Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();
References:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")
Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:
// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});
// Now make this point visible and fixed:
p.setAttribute({
fixed: true,
visible: true
});
Source:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute
Last but not least a simple formula:
a + b = c
where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)
I want to add a series to a highchart scatterplot where I am naming each point in the series. I create a chart in the following way:
var chart; // globally available
makeCharts = function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'scatter'
},
series: [{
name: 'a',
data: [{
'id': 'point1',
'x': 1,
'y': 2
}, {
'id': 'point2',
'x': 2,
'y': 5
}]
}]
});
}
I would like to be able to update the points on the chart using something like:
chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])
but this is not correct. Is it possible to update a chart using this approach where each point has an ID?
EDIT:
Just to clarify, I would like to be able to pass the arrays directly, rather than adding the data point by point using addPoint(). I could loop through an array and use addPoint() doing something like this:
id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];
for (i=0; i<x.length; i++)
{
chart.series[0].addPoint({
x: x[[i],
y: y[i],
id: id[i]
});
}
However, this is very slow. It's much quicker to add data using the following approach:
chart.series[0].setData([[1,0],[2,1],[3,2]]);
I have found that I can add data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
but then the only way that I can access the id when the point is selected, is through this.point.config[2]. With the following approach I am unable to use chart.get('pointID') to identify a point as I did not set the ID. I want to be able to identify the point using just the ID.
Well broadly speaking there are two ways in which you can modify the chart data dynamically
Series.setData() Use this approach when you want to completely replace the existing data with some new data
Series.addPoint() Use this approach when you want to add a subset of the points dynamically. This method is not just for adding one point at a time, if you read the documentation carefully again you will find that this method takes a boolean redraw argument, and the argument detail is as following
redraw: Boolean
Defaults to true. Whether to redraw the chart after
the point is added. When adding more than one point, it is highly
recommended that the redraw option beset to false, and instead
chart.redraw() is explicitly called after the adding of points is
finished.
In your case, since you want to add a few points dynamically, but retaining the existing points, you should go with approach 2. But you need to use it inside a loop, with the redraw being set to false (hence solving the problem of being slow) and then after the loop, call the redraw method explicitly
Code
var id = ['point3', 'point4', 'point5'],
y = [0, 1, 2],
x = [1, 2, 3];
for (var i = 0; i < x.length; i++) {
chart.series[0].addPoint({
x: x[i],
y: y[i],
id: id[i]
},false);
}
chart.redraw();
Adding multiple points dynamically | Highcharts and Highstock # jsFiddle
Try using series.addPoint.
chart.series[0].addPoint({
x: 0,
y: 0,
id: 'anything'
});
But if you need to set data for series, use
chart.series[0].setData([{
x: 0,
y: 0,
id: 'anything'
},{
x: 2,
y: 2,
id: 'another'
}]);
As soon as you can pass your data like this:
chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);
(as you stated in question), I can suggest you to use a little hack.
We'll need to add another statement to method applyOptions of Highcharts.Point prototype.
if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];
Here you can see it in action.