Change Button text and/or background color with javascript?

Scriptcase 8 Discussion
#1

Hi,

i have a button “MyButton” and would like change the text and/or background color:


echo "<script>document.getElementById('sc_btnMyButton_top').bgcolor='red';</script>";    
echo "<script>document.getElementById('sc_btnMyButton_top').textElement.innerText = 'my new text';</script>";

(SC add “sc_btn” and “_top” to the button name)

But that does not work … why?

#2

Well, as you might know already, straight javascript in SC doesn’t always work as expected. :smiley:

You might give this one a try.

onScriptInit:


?>
<script>
function changeBackgroundText()
{
	document.getElementById('sc_mybutton_top').style = 'background-image: none; background-color: #CCCCCC;';
	document.getElementById('sc_mybotton_top').innerHTML = 'New Text';
}
</script>
<?php

change_Button(); // you can of course call the function wherever you want

PHP Method (change_Button):
sc_ajax_javascript(‘changeBackgroundText’);

This will work in Control and Form applications.
Keep in mind, since you are overriding the button’s css default class(es), all the other styles like onmouseover, onmousedown, etc. will have different or no effects.

jsb

#3

Hi jsb,

i have tested in a grid application and here comes an error: “Fatal error: Call to undefined function sc_ajax_javascript() …”

#4

Hi,
as I said it’s working in control and form applications because sc_ajax_javascript() doesn’t work in grids (see Events x Applications)
and javascript and grid application is a beep.
However, if you need it so badly that you can’t sleep :smiley: you might try this one.

onScriptInit:


?>
<script>
function changeBackgroundText(bcolor, ntext) //pass the colour and text as a variables, not bad eh?
{
	document.getElementById('sc_mybutton_top').style = 'background-image: none; background-color: '+bcolor+';';
	document.getElementById('sc_mybutton_top').innerHTML = ntext;
}
</script>
<?php
[bcolor] = 'yellow';
[ntext] = 'New Text';

onRecord:


if([bcolor]) //it's just to have the change done only once
{
    echo "<script>changeBackgroundText('[bcolor]','[ntext]');</script>";
    [bcolor] = false;
}

jsb

1 Like
#5

Hi jsb,

thank you, but the “badly” script :wink: don’t run … (in SC8). No reaction, no errors …

#6

Sorry to hear.
Please check again for any typos. It’s working on 7 and 8. Just tested it.
And your button is still in the top toolbar? Otherwise it would be sc_yourbutton_bot. Just saying.

jsb

#7

Hhm … yes, the button is in the top toolbar. I’am use a php button, but no change. If i use a javascript button, the text is changed, but not the background color.

For a better unterstanding: you generate a simple grid, place a new (php) button in the toolbar, copying your code (in onScriptInit and in the button code)?

#8

Not quite, the first block is in onScriptinit, the second block in onRecord.
You can’t put the code in a php button (javascript button works) because when you hit the button you are leaving the grid and when you exit the button code
and return to the grid, it is loaded again and everything is reinitialized and set to the defaults.
In order to change the color/text of a php button you have to place the code somewhere else. Unfortunately it doesn’t work everywhere. Who wonders.

jsb

#9

It works for me.

And jsbinca do a good work.

How to run a ajax function, do you have any example?
such as http://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function

Could I move it into scriptcase? I tested but not work for me.

#10

This worked for me also
BUT
when I enter something in the search field and press enter the grid refreshes with the standard txt defined in the button. So apparantly the “onRecord” routine is not performing on that moment.

P.S.
I changed the “if ([bcolor])” to do this always and not only on the first record (thought that was the solution but it wasn’t)

regards,
Patrick