Page 1 of 2

Help changeing button attribute

Posted: Fri Sep 30, 2016 1:07 pm
by ppbedz
I have a button in a sfl grid. I want to alternately change the background color from gainsboro (not clicked on), to green (clicked on). I have the following coded on the "OnClick" property, but it is not working. My alert message displays "button off". The id of the button widget is "BtnC".

Can someone help correct my javascript code? Thank you, Patti

var btnc = getObj("BtnC." + row);

if (btnc.style.backgroundColor == 'gainsboro')
{alert("button on");

applyProperty("BtnC." + row, "background color", "green") ;
applyProperty("BtnC." + row, "field type", "button"); }
else
{
alert("button off");
applyProperty("BtnC." + row, "background color", "gainsboro") ;
applyProperty("BtnC." + row, "field type", "button"); }

Re: Help changeing button attribute

Posted: Fri Sep 30, 2016 4:31 pm
by Scott Klement
I tried your code, as far as I can tell exactly the way you wrote it, and it seems to work fine?

Code: Select all

var btnc = getObj("BtnC." + row);

if ( btnc.style.backgroundColor == "gainsboro" ) {
  applyProperty("BtnC." + row, "background color", "green") ;
  applyProperty("BtnC." + row, "field type", "button"); 
}
else {
  applyProperty("BtnC." + row, "background color", "gainsboro") ;
  applyProperty("BtnC." + row, "field type", "button"); 
}
The code could be simplified somewhat, but... as written, it does work fine... can you explain how to make it fail?

Re: Help changeing button attribute

Posted: Fri Sep 30, 2016 5:22 pm
by Scott Klement
FYI, if you wanted to simplify the code a little bit... here are some ideas:

1) Since the "onclick" is part of the same button that you're changing, there's no need to hard-code the widget id. You can just use "this" to refer to the widget. Doing "this" is equivalent to getObj("BtnC." + row) if you call it within the same widget's events.

2) You can pass the object to applyProperty() instead of re-calculating the id. Since you already had done a getObj() and stored the result in "var btnc", you could've done applyProperty(btnc, property, value) instead of applyProperty("BtnC." + row", property, value). Likewise, you can pass 'this' instead of calculating the widget id.

3) you can use a variable for the color, this way you don't have to repeat the applyProperty() code, once for green, once for gainsboro.

As a result, your code (which, again, worked fine for me) could've been simplified to this:

Code: Select all

var newColor = "gainsboro";
if ( this.style.backgroundColor == "gainsboro" ) newColor = "green";

applyProperty(this, "background color", newColor) ;
applyProperty(this, "field type", "button"); 
This also works fine.

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 7:19 am
by ppbedz
Scott,

My button does not change color when I click.

I also get the message "Unable to get property "style" of undefined or null reference" .

I will try replacing my code with your simplified version and see what happens.

Thank you,
Patti

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 7:51 am
by ppbedz
Scott,

The new code works fine. Part of my issue was that I thought the default background color of the button was "gainsboro" so it took 2 clicks to get the color to change to green. Thank you for the lesson on "this"... it will come in handy!

Have a nice day!

Re: Help changing button attribute- addl issue

Posted: Mon Oct 03, 2016 10:09 am
by ppbedz
Scott,

I added a hidden check box to my grid so my rpg would know if the line was selected (green). If the button is clicked, the appropriate action check/uncheck is applied to the check box value. However, even though the alert shows me the line is NOT clicked when I de-select, the rpg returns the value for clicked. The rpg does a chain to the sfl and checks the value of the check box. I don't understand why the rpg is not picking up the change the javascript is making to the grid values? Patti

var newColor = "gainsboro";

if ( this.style.backgroundColor == "gainsboro" )

{newColor = "lime";
pui.set("CID." + row, "1");
}

else {pui.set,"CID." + row, "0";}

applyProperty(this, "background color", newColor) ;
applyProperty(this, "field type", "button");

vr = get("CID." + row);
alert(vr);


RPG:
for s4rrn = 1 to totsfl4recs;

chain s4rrn engfms4;
if %found;
if s4checked = *on;
tcuserid = s4mid;
exec sql
insert into engtestcnd values :testcndrec;
endif;
endif;

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 1:51 pm
by Scott Klement
The following line of code is wrong

Code: Select all

else {pui.set,"CID." + row, "0";}
It should be

Code: Select all

else { pui.set("CID." + row, "0"); }
You have added a comma, and are missing the parenthesis.

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 1:57 pm
by ppbedz
Sorry Scott, I found that error already. My rpg is still not seeing the updated value when I chain to the sfl. I need to loop/chain through the sfl because I want to look at every record. I tried changing my check box to a hidden "text box" because some of the other posts indicated the rpg would not work unless it was a text box. My rpg is still not seeing the value (check or unchecked). My js code is on the onclick event for the button. Do I also need something on the onrowclick (some of the other posts talked about that too)?

Basically I am trying to do this:

User clicks the button --> causes hidden variable to be updated with "1" or "0".
When the user exits the window, the rpg clears a DB file, then loops through all the records in the sfl and reloads the DB file based on the checked values.

Patti

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 2:01 pm
by Scott Klement
Have you tried using setDataValue() instead of pui.set()?
http://www.profoundlogic.com/docs/pages ... d=26214527

Re: Help changeing button attribute

Posted: Mon Oct 03, 2016 2:10 pm
by ppbedz
I just tried it and it still does not work. I coded as follows:

var newColor = "gainsboro";

if ( this.style.backgroundColor == "gainsboro" )

{newColor = "lime";
getObj("GridC").grid.setDataValue(row, "CID", "1");

//pui.set("CID." + row, "1");
}

//else {pui.set("CID." + row, "0");}
else {getObj("GridC").grid.setDataValue(row, "CID", "0");}

applyProperty(this, "background color", newColor) ;
applyProperty(this, "field type", "button");

//vr = get("CID." + row);
//alert(vr);