Reusing Javascript Code Issues

[lilmofo812]

So my users enjoy buttons that will pre-fill date fields (such as last month, last year, etc.). I figured there was no need to change the javascript code that calculates out these dates for every component and therefore I have been using the same function names (i.e. setLastMonthDate) and JS code in multiple UX components (with the date field controls probably 90% of the time having the same name in multiple components, such as start_date).

However, it seems if I have two or more of these components opened at the same time in a tabbed ui then only one of the components date fields will get changed even if I go to another tab and click on the buttons in that component, has anyone else experienced this type of thing? I was under the impression that putting Javascript code in the javascript declarations of a UX somewhat "sandboxed" the code to that component (whole reason for the {dialog.object} precursor I thought), is this not the case? Or is this a potential bug of the tabbed UI?

I instantly know when the issue occurs because many of these components call one of my "set date" functions in the client side onRenderComplete to pre-fill the date fields and the code runs but the date fields won't be set (and there by the list that I want to pre-filter won't be rendered).

Clarification: So when I have a UX open in a tabbed ui and then open a second one that is going to call the JS "set date" function I wrote with the same name it actually calls the function in the first UX component (i.e. its not calling the function in the current UX opening and then setting the date fields in the other one but rather it is calling the function defined in the first component that was already open).

Example: Open up a ux called ux1 in a tabled ui and the "set date" JS function I wrote called setLastMonthDate runs and sets the dates correctly and the list if filtered. Now I leave ux1 open in the tabbed ui and go to open ux2. When ux2 opens the setLastMonthDate function is suppose to be called within ux2 but rather the one defined in ux1 gets run and the dates in ux1 get changed. The dates in ux2 stay blank and therefore the list is never filtered on the dates like its suppose to be. Now if I try to click a button to call the same setLastMonthDate in ux2 it will run the function of the same name in ux1 (and this goes for any other set date JS function I try to run in ux2). Even after closing ux1 the function in ux2 won't work, I have to refresh my browser then just open ux2 by itself to get the functions to work again.

[RichCPT]

Re: Reusing Javascript Code Issues

No, the "JavaScript" property of components does not isolate javascript functions automatically; they are by default declared in the global name space. You have to isolate the functions yourself by one of two methods:
1) Include the "{Grid.ComponentName}" in your function names. This methods put the functions in the global window name space, but makes them uniquely named. (I'm not exactly sure what happens if there are two instances of the same grid open in different tabs) Example:

function {Grid.ComponentName}_EnableDrRespFieldDropdownOnly( ele ) ....

2) Instead of putting the functions in the global name space (instead of using the JavaScript property), you can define and attach them to the grid or ux component object in the Grid or UX's Initialize client-side event. For example, in a Grid's Client-Side onObjectInitialize event you can put something like this:

{Grid.object}._functions.MyFunctionCopyControl = function (grd)
{
var data = $gvs('{Grid.ComponentName}.U_DR_AC_ALTC_GRP');
data = $u.s.tran(data, '\n', ',');
grd.setValue('D', 'DRALT_CHC_RESP', data);
}

If you use JavaScript functions to control conditional styling you might not be able to use either of the above techniques. It seems to me the property builder that allows conditions to call JavaScript functions does not know how to use one or both of the above methods. I think I had to go with Global functions in that case and make sure I passed in an object to what I wanted styled.

[lilmofo812]

Re: Reusing Javascript Code Issues

So if I use the {Dialog.ComponentName}_ to name my function then everywhere I call the function I'm assuming I'll need to use the same convention (which no doubt will get very annoying but if its what I need to do to fix the issue then so be it haha). Thanks for the heads up on the global name space, I thought as long as you wrapped the javascript in a function then the function was automatically tied to the dialog it was opened in, been driving me insane for quite some time now!

[RichCPT]

Re: Reusing Javascript Code Issues

... I thought as long as you wrapped the javascript in a function then the function was automatically tied to the dialog it was opened in...

The second method is how you attach the function to the component. All javascript functions are considered Objects. In the first method I listed, the function is an objective of the 'window' object. In the second method the function is an object of the "._functions" object inside of the object alpha sets up for the component.

It is far too inconvenient to have to go around coding using method 1 or 2, so many times I come up with a 4 letter character code which is unique to each component and use that in the JavaScript function names. Another, strategy is to use Action JavaScript which Alpha does automatically attach to the component. Although, I don't know how to pass parameters to those things. Another thing I do is put some of my common JavaScript functions into the TabbedUI "JavaScript" property, but that makes Working Preview more difficult to use because you have start the preview at the tabbedUI level.

[lilmofo812]

Re: Reusing Javascript Code Issues

I can understand this failing at the TabbedUI level (since the components are opened in the same window), but it seems that if you had a component open in a new window (i.e. pop-up modal window) would that not take care of the javascript global issue? As an example:

1) I click a button to open a new modal window and there is javascript in there that does something.

2) I close that window and then change a dropdown box and click the same button I did before but now it opens a different component in a new modal popup window.

3) The javascript code I had running in the first component is in the second component (as far as function names) but what is in the functions is different (not a ton different but slightly) and these javascript functions seem to be running the code in the window that has already been closed rather than the code in the current window. As an example:

First Component

function sumTotals(){

var total = 0;
var get_num = {dialog.object}.getValue("number");

total = total + get_num;

return total;

}

Second Component

function sumTotals(){

var total = 0;
var get_num = {dialog.object}.getValue("number");
var other_num = {dialog.object}.getValue("other_number");

total = total + get_num + other_num;

return total;

}

However, when I click the button in the second component it runs the code that was in the first component (i.e. only adds get_num and not both get_num and other_num) but that first window is now closed. I'm not going to claim I know all the ways javascript functions get set up in a component in the background code as objects and what not, whether its global, local, or even universal (yes that last one is a joke haha). Unfortunately this function naming convention is a technique I have used in many places (especially when I duplicate a component and just change some of the ways the lists in the component act). I don't know what the best way is to go into these components and change the function names along with all the places the functions get called (I'm hoping its not going into a single component at a time), but even if it is one at a time is there an easy way to change the function names everywhere in the component or do I have to find each one and change them (I was thinking maybe a way to click the xBasic tab down at the bottom and copy all that code into word and then using the replace feature to change the function names and then loading that xBasic back in)?

[RichCPT]

Re: Reusing Javascript Code Issues

Josh, from the Web Projects Control Panel, you can select "Edit / Search in All Project Files..." to search for things, but I do not believe there is anyway to edit components outside of the component designers. I believe a future version of Alpha is going to change the binary nature / format of components into a JSON text format. When, and if this happens, a lot more interesting things will be possible with version control systems and manipulating components outside of the designers.

In terms of the other things you wrote in your post:
1) The "modal popup windows" in Alpha are not really popups from the brower's perspective - they are just free floating "DIV's"

2) Unless you use the 2nd function example from my post # 2 above, any JS functions you declare are going to be in the global names space (not sure if that is even the proper terminology) and they are going to collide with each other unless you give them unique names (like the first function in post #2) using the component alias. Although, in a tabbed-UI I do not know if the first method is truly "safe" enough. The safest thing to do is not use any placeholders inside your functions at all. Pass {grid.object} or {dialog.object} and the control names or pointers to the actual controls that you want to work with as parameters to your functions and make sure you are calling those functions from inline embed points like a control's "onClick" event.

[lilmofo812]

Re: Reusing Javascript Code Issues

So rather than go into other examples to make sure I've narrowed down my options, it looks like the only way for me to overcome this issue is to either come up with a unique identifier for each component (like you spoke about using a 4 character code) or using the "{Dialog.ComponentName}_" inside the function names and going through components where the issue exists and fixing the function name as well as where the function is called. I greatly appreciate your knowledge on this subject, I get why it works this way but one thing that is annoying is I use the same xBasic function names and code over and over without this issue so kind of wish the javascript worked the same way. Look forward to seeing if that JSON feature comes to fruition to hopefully make it so I can fix things that way in the future and for now I can just focus on the few components where the issue causes the most problems!