David Funderburk ran into an interesting behaviour when he was working with a Dialog Button, using the Advanced button styling.
He set the Image Layout as "Image followed by text", and set the Image Name... nothing else.
Then, in his rendered Dialog, after making a selection from a Dropdown, he changed the Button Image and the Button Text through Javascript.
There are no ill effects when he mouses in to changed button, but when he mouses out the image changes back to the original image set in the button advanced type property.
I would say this is how it's supposed to work, so all is good there... it's just that it isn't how he'd like it to work.
I thought setting the Image in the onMouseOut event might work, but Alpha runs after this event and the image is set back to the original.
Here's a solution, but I'm not sure how good it is and, even though it should work in IE, it doesn't.
In general, don't set the image using the properties... use Javascript to add a child to the button element. This works across browsers. Here's the part that should work in IE but doesn't. In this case the Image should be positioned before the text, so I used insertAdjacentHTML to set the text after the button.
The following code runs in the onRenderComplete event of the dialog. It sets up the button with it's default values...
Now... from another button, dropdown, etc. you can change the image with Javascript and, since it's not relying on the button's Advanced property values... the changes stick.
He set the Image Layout as "Image followed by text", and set the Image Name... nothing else.
Then, in his rendered Dialog, after making a selection from a Dropdown, he changed the Button Image and the Button Text through Javascript.
There are no ill effects when he mouses in to changed button, but when he mouses out the image changes back to the original image set in the button advanced type property.
I would say this is how it's supposed to work, so all is good there... it's just that it isn't how he'd like it to work.
I thought setting the Image in the onMouseOut event might work, but Alpha runs after this event and the image is set back to the original.
Here's a solution, but I'm not sure how good it is and, even though it should work in IE, it doesn't.
In general, don't set the image using the properties... use Javascript to add a child to the button element. This works across browsers. Here's the part that should work in IE but doesn't. In this case the Image should be positioned before the text, so I used insertAdjacentHTML to set the text after the button.
The following code runs in the onRenderComplete event of the dialog. It sets up the button with it's default values...
Code:
var btnObj = $('{dialog.ComponentName}.V.R1.BTN_PREVIEW');
var Image1 = new Image();
Image1.id = "{dialog.ComponentName}.V.R1.BTN_PREVIEW.ICON";
Image1.src = "images/$$device.display.png.a5image";
btnObj.innerHTML = "";
btnObj.appendChild(Image1);
$('{dialog.ComponentName}.V.R1.BTN_PREVIEW.ICON').style.verticalAlign = "middle";
$('{dialog.ComponentName}.V.R1.BTN_PREVIEW.ICON').border = "none";
$('{dialog.ComponentName}.V.R1.BTN_PREVIEW.ICON').insertAdjacentHTML("AfterEnd", " This is my new Button");
Code:
$('{dialog.ComponentName}.V.R1.BTN_PREVIEW.ICON').src = 'images/$$device.printer.png.a5image';
Comment