I am quite new to JS and doing web apps and I am facing this problem:
I have JS code which creates me 6 gauges and function which updates gauge 1 value:
<!-- Include the Gauge.js library -->
<!-- Raphael must be included before justgage -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
<!-- Initialize the gauge on page load -->
<script>
var gauge1;
var gauge2;
var gauge3;
var gauge4;
var gauge5;
var gauge6;
function updateGaugeValue(newValue, event) {
event.preventDefault();
gauge1.refresh(newValue);
}
window.onload = function () {
gauge1 = new JustGage({
id: "gauge1",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
gauge2 = new JustGage({
id: "gauge2",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
gauge3 = new JustGage({
id: "gauge3",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
gauge4 = new JustGage({
id: "gauge4",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
gauge5 = new JustGage({
id: "gauge5",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
gauge6 = new JustGage({
id: "gauge6",
value: 0,
min: 0,
max: 10,
title: "My Gauge",
label: "Value"
});
};
</script>
When I call update from button like this
<button onclick="updateGaugeValue(5, event)">Click me</button>
function normally works and change value of gauge 1 to 5.
But when I try to call this function from C# (using ASP.NET) via ClientScript like:
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "updateGaugeValue(5, event)", true);
nothing happens. But if I try to test it and alert hello world like
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "alert('Hello World')", true);
it normally works and alert. Any suggestions?
I expect that I am able to call this JS function from C# code.
2
Answers
Apart from moving your scripts to the HEAD tag instead of having them at the end of BODY, you might want to delay the execution of the code coming from C# after the loading is done.
Something like:
Put that in the
Page.ClientScript.RegisterStartupScript(...
call.What it does:
Ok, so the issue is much that we use a page onload/onready to setup, create and render the gauge.
But, we want a plane jane asp.net button, say maybe a text box, and then some plain jane code behind to set the value.
The issue is the on window load. If we "inject" a call to that routine, we can’t (very well) control when our registery start up script runs as opposed to the existing code to setup + create the gauges.
So, what we need to do is "force" our startup script to wait. One great way is to use setTimeout, and that will in effect "push" our code to a routine on the javascript engine "execution stack" to wait, render page, run that gauge setup code, AND THEN run our desired code.
Worse yet? Testing this a bit, the event.prevent seems to mess this up.
so, here is a working proof of concept:
markup:
we put the script library code at top:
eg:
but, for OUR code, we want that stuff to be placed at bottom – after the dom been created, setup and rendered.
So, now this code:
So, we wrapped our startup script in a timeout function. Even with a dealy of "1", it works, since timeout pushed our code to the javaengine program stack, and thus it runs after everything else on that page.
code behind:
and result:
However, there really not much need to "call" that existing js routine you have, since the js object exists (or we assume it will).
So, then this code :
So, now we don’t even call that js routine, but use the refresh method of the graph object.
So, now, we can put back (un-comment) out the event.preventDefault();, and thus both client side, and server side buttons in above example will now "both" work.
I should also point out that I used a delay of 1 (1 millisecond). This delay (amount) is not really required, but the FORCE of the routine to be pushed onto the java engine execution stack is the important part here.