Javascript Variables

[njguy]

I have set a few variables in the client-side events onInitalizeComplete and onRenderComplete such as

var s1 = "something"
var s2 = "something else"

When I try and use those variables in some additional code in the UX....such as a button, those variables do not exist.

Question is why does this happen and where is the best place to initialize variables (client-side) to be used throughout a UX compoent

Thanks

[Davidk]

Re: Javascript Variables

When using "var" you are setting those variables local to those events... they are only available inside those events.

If you'd like a variable to be available through the UX then you could assign it to the {dialog.Object} namespace variable. This keeps it local(ish) and doesn't pollute the DOM. You could set your variable without the word "var" which would assign it to the DOM and therefore make it global, but that's called polluting the DOM and if considered bad form.

When using {dialog.Object}, I use a naming convention of 2 underbars and then my var name.

{dialog.Object}.__s1 = "something";
{dialog.Object}.__s2 = "something else";

Where ever you want to use that variable...

var myNewVar = {dialog.Object}.__s1;

If you have a lot of variable and would like to be tidy about it... you could establish a {dialog.Object} namespace variable object... and then assign properties of that object to your variable values.

{dialog.Object}.__appVars = {};
{dialog.Object}.__appVars.s1 = "something";
{dialog.Object}.__appVars.s2 = "something else";

Now you know that all your variables are inside {dialog.Object}.__appVars.

As well, you could use State variables.

[njguy]

Re: Javascript Variables

Thanks David

[RichCPT]

Re: Javascript Variables

Tom, the AlphaAnywhere "state" variables that David has mentioned in at least two posts now to you, can be a nice way to go.

But take caution: They do not always exist when they should - Alpha has problems re-establish the state variables for you. Besides your code that initializes state variables, any other subsequent code that tries to use your state variables should check for their existence and do nothing if they do not exist yet. When I have seen this happen on the client-side, alpha ends up calling your code a second time with the state variables properly initialized.

The nice thing about state variables is that they are typically available to both your Xbasic code and your JavaScript code.

Look for server-side state variable documentation in following pages:
Grid - server side
UX - server side

For client-side info, lookup up
.setStateInfo
.getStateInfo

If you only need the variables on the client-side then I would go with attaching your variables to the UX or Grid component like David mentioned. I usually do this in *RenderComplete or *InitializeComplete. If you allow AA to use a "cached" grid or UX, there might be another client-side event you will have to use, like: "onSynchronizeDialog" for a UX (I don't know the equivalent for a Grid).

[jgrannis]

Re: Javascript Variables

Setting variables, even with the word "var", in the "global" Javascript functions section makes them global also, right? (I am of course not taking about setting them within a custom function that one may have added there).

[RichCPT]

Re: Javascript Variables

Jeff,
Not necessarily. variables declared like "var somevar = 'something';" outside of any function definitions, but inside the "global" JavaScript functions section of a component might not be readily accessible to other components. The variable ('somevar' in this case) will become a property of the 'window' object. The problem is the 'window' object is similar (IMHO) to how the 'this' object works, but on a grander scale -- the 'window' object represents a current context for running code. If you are running in an i-frame the 'window' object has a different context then when not running in an i-frame.

For example: Take the "home" page tab in a TabbedUI: make a UX that initializes a variable in its "global" section, make an a5w page for the UX and place the a5w page into the "home" page properties of the tabbed UI. AA will run this a5w page in an i-frame. Put a button in the tabbedUI to display an alert with the variable initialized in the UX.

If you declared your variable like, "var myvar = 'something';" then you will not be able to see it from tabbedUI button (unless you figure-out the window object (i-frame) that the "home" page is running in look for the 'myvar' property in it.

If you instead initialize the variable like this:
window.parent.myvar = 'break out of the i-frame';

then you could access the variable from the tabbedUI. You can use either of these in the tabbedUI button to access it:
alert(window.parent.myvar);
alert(window.myvar);
alert(myvar);

Keep in mind that if you navigate to a different a5w page that the browser is going to give you a fresh 'window' object and you will not be able to see your variable anymore.

Also, if you run something in an i-frame (like opening an a5w page in a tab) from the tabbedUI then code in that i-frame can get to your variable in the same way the homepage tab did: window.parent.myvar.

Note that the top most 'window' object will always have its '.parent' property point to itself. That is why alert(window.parent.myvar) would work in my example above with a button on the TabbedUI with the alert statement.

[jgrannis]

Re: Javascript Variables

Right. I was being very narrow focused and addressing what I understood to be a question about using variables throughout "a" (single) UX component. My understanding of what that means is that it is a single page application.
I assumed that if using one of the {dialog.object} approaches presented above would work for his context that my suggestion could also. That being said, I am in no way trying to say that declaring variables as I suggested is a good idea. I know that many consider allowing variables to be available (for reading and updating) to large portions of an application to be very bad practice. I should not have suggested it without the warnings.
A better suggestion might have been to stick the values in LocalStorage.
Another option perhaps is using the Custom Settings in Properties of the UX. However, I have never tried using it and only imagine that they would not fit the case of a multi-page a5w website either.

Related topic:
I am wondering about the pros and cons of using, in that global Javascript functions section of configuring a UX, "var bar = function() {....}" versus "function bar() {....}"
Would "var bar = function() {....}" be as bad as declaring "var somevar = 'something'"? Should this section only be used for Function Declarations and not Function Expressions? I've used both in configuring a UX without really understanding the difference and I do not believe that I've seen problems with using one rather than the other.