Trouble with calling javascript function within another using D3 - javascript

I'm learning to use D3.js for some visualization ideas I have and I'm running into something that is probably quite easy and perhaps solely a javascript thing.
I want to call a function from within another function. I have created a basic scatter plot and want to reload it with new data points. Here is the JSFiddle. I'm really quite stumped!
I think in it's simplest form it looks like this:
function firstFunction() {
var something;
}
function secondFunction() {
firstFunction();
}
But it seems to sometimes works sometimes not and can't figure out why.

What's happening is that, in jsfiddle, the default is to encapsulate everything in a function that runs on window load. The code looks like this: window.onload=function(){your stuff}
When you try to set the onload, the code structure is then structured like this:
function firstFunction(){
function secondFunction(){
do stuff
}
}
onload = secondFunction;
The issue is that secondFunction is not accessible outside the scope of firstFunction. This is called variable scoping, and coding would suck without it.
The way to solve this issue is to move your onload assignment to the javascript block. I'd recommend the built in d3 way of doing this: d3.select('button').on('click',newScatter); here I'm selecting the button and adding a click event handler. This works because there is only one button, but it would be better to give the button a class or id and use that in d3.select().
If you do that, your code will still not work, but that's because you delete the SVG element that's supposed to contain the scatter plot in newScatter() (this line: elem.parentNode.removeChild(elem);). The button, however, will successfully do what you told it to do and delete your scatter plot.
I've created a working version of your fiddle here.

Related

Javascript / jQuery basic function issue

I am trying to display a div on click. The function that is supposed to make the magic happen is:
$(document).ready(function showGogoasa() {
$('.gogoasa-newsletter').show();
});
Unfortunately, it does nothing. Which makes me scratch my head for hours as I have done small things like this in the past and they worked. I am trying to make this modification on the website of a client.
When I check the firebug console it says the following: ReferenceError: showGogoasa is not defined
I tried looking on Google for this kind of error but the similar cases had this kind of issue for not declaring a variable. Well, I do not have any variables.
I am trying to display a div on click.
Your code is running the function on a ready event and doesn't give the error you describe.
Presumably (it would have helped if you had provided a complete test case) you are also trying to bind the function as a click handler, but you can't do that because you have defined it using a function expression and not a function declaration (so it doesn't create a variable called showGogoasa outside of its own scope).
Define the function separately, then assign call it and bind it as a click event handler on the ready event.
$(document).ready(function ready_handler() {
function showGogoasa() { // Define it as a variable in the current scope
$('.gogoasa-newsletter').show();
}
showGogoasa(); // call it now
$("button").on("click", showGogoasa); // call it then
});
Well, I do not have any variables.
That's the problem :)
Functions are first class objects and when you say showGogoasa() that means "Get the value of showGogoasa and call it as a function".
Using jsfiddle or providing more code would have been helpful.
One issue is that you are missing the click event handler. For example when the user clicks on X then Y should happen/show. The following simple example may help you to see how it works:
http://jsfiddle.net/fionaredmond/1vbagj12/
$(document).ready(function(){
$("#showGogoasa").click(function(){
$(".gogoasa-newsletter").show();
});
});
$(document).ready(function() {
$('#idOfYourClickerElement').on('click', function(){
$('.gogoasa-newsletter').show();
});
});

Any Way to Change JS on the Fly using web console?

Actually i wanted to debug one of the JS Function, but i dont have access to that file. is there any way to put alert inside the function through Web Console. i cannot use break point here is because those function are mosueover and mouse out. so when i even move my mouse pointer a lil, it breaks.
Without direct access to that function, there isn't much you can do.
If you have global access to it you can create a hook.
var original = myFunction;
myFunction = function() {
alert("something");
return original();
}
Or, you could clear the bound event handlers and bind your own.
element.removeEventListener("mouseover", myFunction);
element.addEventListener("mouseover", myDebugFunction);
Find the source code, add a debug point on corresponding line. Then, bring the mouse on the element.
But since, production js files are generally minified and uglified, it may not be possible.
There is a debugger is inbuilt in a browser. Practice using it.
Also, you could try switching off the mouse events from the element and then attach a new function in console. Play with it, by commenting out lines. This way you could change the code on the fly.
Something like this :
$("<myElement>").off().on(function() {
// Line 1 of original function
// Line 2 of original function
// Line 3 of original function
// ...
});

Running multiple AJAX functions through onclick event

I feel as if this issue is pretty simple, so I may be overlooking something pretty straightforward, but I can't seem to find the solution on Facebook. Basically I have two AJAX functions that interface with PHP scripts through the onClick event. Here is how I am laying out the HTML:
onClick = "previousMonth(this.id); monthDisplay_previous(this.id)"
Currently, it is displaying the output from previousMonth(this.id). But if I reverse the function calls and set it up as:
onClick = "monthDisplay_previous(this.id); previousMonth(this.id)"
then it only displays the output from monthDisplay_previous(this.id) -- it just won't run them both. In addition, they both interface with different PHP scripts. I feel like this is enough information to go off of, but if you want me to post more code I will, reluctantly. Any ideas?
If they can run in parallel, you might try somethign like this
var someFunction = function(that_id) {
previousMonth(that_id);
monthDisplay_previous(that_id);
}
onClick = "someFunction(this.id);"
Try wrapping both of your functions into another one.
onClick = function(){ previousMonth(this.id); monthDisplay_previous(this.id); }

Raphael and "global" variables

I'm trying to work with Raphael for some SVG stuff and tried, well, with my limited knowledge, to build something beautiful ;)
I have 3 files:
1x html file and 2xjs files
html file: with an onload function ( + header,body and stuff)
window.onload=function()
{
init();
}
js File1: has the init function and a function to load js files (e.g. Raphael) and a callback to proceed after the file is loaded
function init()
{
getScripts(initTool)
}
function getScripts(callback)
{
$.when($.getScript(scripts[raphael]).then(callback)
}
function initTool()
{
$('body').append("<div id='tool'></div>");
tool=Raphael("tool",5000,5000);
$('body').append("<a href='javascript:void(0)' onclick='newElement'>New element</a>")
}
js File2: Here I have the function newElement which should add (for this example) a single path to the svg element created by Rapahel
function newElement()
{
tool.path("M10,20L30,40");
}
Unfortunately the path does not show up and I have no idea why. I tried referencing the "tool" variable before the onload in case it it related to global/local variables (wild guessing) but this also does not work. changing id's to "tool" to "tool2" for the svg element also does not work.
What else could it be? Where is my (possibly obvious) blind spot?
SHould callback not be declared as a parameter here?
function getScripts(callback)
{
$.when($.getScript(scripts[raphael]).then(callback)
}
To be honest with you I've written quite a bit of javascript and I don't quite grok variables scopes fully yet. However, when calling functions you should use parenthesis to indicate that it should be executed (there are a couple of times when you reference them without parenthesis, but that is beyond the scope of this answer).
So...
$('body').append("<a href='javascript:void(0)' onclick='newElement()'>New element</a>")
But this isn't enough to make it work, you should also declare your function like this:
var newElement = function() {
tool.path("M10,20L30,40");
}
Here is a working solution: http://jsfiddle.net/vAjG2/
(perhaps somebody can expand on why these changes are needed, I don't grasp them myself).
The problem has nothing to do with variable scope. You just need parentheses following the function name in your inline event handler. Rewrite the last line as:
$('body').append("New element")
and you'll be up and running.
However, inline event handlers are frowned upon for a whole variety of reasons. As quirksmode says: "Although the inline event registration model is ancient and reliable, it has one serious drawback. It requires you to write JavaScript behavior code in your XHTML structure layer, where it doesn't belong."
A much cleaner way to do this would separate out the markup and the script, e.g.:
<div id='tool'></div>
<a id="mylink" href='#'>New element</a>
<script>
var tool = Raphael("tool",500,500);
$('#mylink').on("click", function() {
tool.path("M10,20L30,40");
});
</script>
See this jsfiddle for this code in action.
Lastly, as a helpful hint, I would advise running your code on document ready, instead of window load, especially you're using jquery,. Document ready happens when the DOM is first constructed. Window load waits for all assets to be fully loaded, which can take awhile, and typically isn't necessary. It's long considered a best practice.

Can i pass a javascript object back to an atk4 page?

From an ATK4 page, i can call jqplot using a javascript helper file like this
on the page
$chart = $p->add('jqplot', null, 'chart1');
$chart->setSeries(array(10,20,15));
define a jqplot.php like this
class jqplot extends View {
function render()
{
$plot=$this->js(true)->univ()->jqplot($this->series, $this->opts);
parent::render();
return $this;
}
}
and in a js helper file, link the php call to the javascript
$.each({
jqplot: function(series, opts){
console.log('jqplot series',series);
console.log('jqplot options',opts);
$plot=$.jqplot(this.jquery.attr("id"), series, opts);
return $plot;
}
}
If i have one chart on a page and reload it with an ajaxec call, it works fine but if i have several charts next to each other, only the first one is ok and the one next to it completely disappears if i call reload.
What i really want to do is call the jqplot replot function on the chart and pass it new data from the page but how can i do this ? The $plot object in the jshelper holds a javascript object and i need this object to call replot on it.
I am thinking maybe i can store the object when first created in a javascript associative array and then when i call replot, lookup the id and if found, call replot on the object but not sure what this code looks like or whether i have the right approach so any help appreciated.
Thanks in advance for you assistance.
It probably would be quite difficult to achieve this. First you need to properly handle destruction of jqPlot. You'll need a proper jQuery UI widget capable of restoring everything through a de-constructor. Then you might get it to work.
As far as Agile Toolkit is concern, it destroys the element containing your jqPlot using JavaScript, re-loads HTML and re-executes JavaScript.

Categories