On a recent project I ran into some issues with trying to change a button’s caption, so I tried to solve that by using a clickable image instead, but that led me down the garden path to some issues with clickable images. So this week we will be looking at Clickable Images.

You ever have one of those simple request that you think is going to take you five minutes to do and before you know it you have burn two days and don’t even remember exactly what the original request even was!  It never ceases to amaze me how often the stuff I think will be hard ends up being easy, and the stuff I think will be a cake walk turns into a never ending battle.
That happened to me recently on a project. The request seemed easy enough. Change the caption of a button based on some logic. Are you kidding me one line of code, I won’t even break a sweat today!

btnname..Caption = "New Caption"

Wrong. Come Along as I take you on a magical mystery tour. The examples I am going to use are not the exact same as the project, and it seems that some of the issues have cleared up with WebDev 18, but there are still issues. And before we go any further, when is the last time I mentioned, I hate Internet Explorer!!!

So we start with a simple screen with a couple of edit fields, a “Save” button and a button that will change the caption of the “Save” button.

The code behind the Change Caption button looks like this

Notice that it is AJAX enabled, as we don’t want to reload the screen. In the production system this logic was elsewhere and based on several conditions.

So run a test. Click the “Change Caption” button, verify the result and take an early lunch.

Before I can even get started on my lunch I get a call wanting to know why the save button looks funny now. After some back and forth, we discover that everyone at this project site runs Internet Explorer and it looks different in Internet Explorer. Oh bother here we go!

Here is the really bizarre part it is even different before the caption is changed in IE. Take a look:

Notice that the Save caption is now at the top of the button, and this is even before we have pressed the “Change Caption” button. Just the act of putting code in that will change the caption causes the HTML to be generated slightly different. I will climb back up on my soapbox here and say again this is why you need to understand the underlying HTML and CSS code even though you work in WebDev. So lets take a look at what is going on in the HTML code.

First we comment out the btnsave..Caption = “Save now” line of code and run it in IE. The save button looks correct and if we inspect the code for the button we will see this

If we add the line of code back in and inspect the code we see this instead

Notice instead of the inline CSS style, it is now using a CSS class. And something in that change has upset IE, but not the other browsers. It is very important to note here that the line of code we are talking about hasn’t even been executed and doesn’t directly change the style of the button at all, but the mere act of having that line of code causes WebDev to generate the HTML different.

So after a lot of cursing IE, and trial and error, I had to come up with a solution. One of the solutions that I came up with was to use Clickable Images, and use Images for the buttons.  So lets setup another example with a Clickable image that changes from a Green Checkmark to a Gray Checkmark.

So we create a clickable image.

And a “Make Green” button with the following code:

Run a test and it comes up as gray.

Click the button and it turns Green.

But hey I am no dummy, this time I test it and verify it works in IE as well. So off to lunch I go. The phone rings, now it seems to whole world is coming to an end, things are not being saved properly, data is being corrupted, so its back to the drawing board again. I am starting to wonder how I ever got fat working like this !

So to see what this new hell is all about, lets add a couple of lines of code to the “Save Button”

Again notice that it is AJAX enabled so that we don’t get a full page refresh. Run a test, put some values in, and press the save button and we get a trace window verifying our values.

Now add the same to lines of code to the click event for our image

And run the same test.

And we don’t have any values. What the heck? Well there is a slight difference between a button and a clickable image. Lets take a look at the general tab of the button description

Notice the area in the red box is set to “Send the value of controls to the server (submit)”.  If we look at the description of the Clickable Image that option is not available.

And that is why trace statements don’t have any values and why my production form was suddenly not saving data correctly. Notice on the Clickable Image description there is an “Action” option, we can drop that down and have it execute the server code of the Save button instead.

But that doesn’t help us, as it only runs the code, it doesn’t submit the values and to make matters worst it doesn’t do it as AJAX code so we get a full page refresh.

My next attempt was to leave have the regular “Save” button, hide it, and press it via code like this

This also produces a failure, the code of the save button runs, but it doesn’t have the values typed into the edit fields. Why you ask? Well this is where we get into a little bit of Black Magic when AJAX is involved, I can’t find any specific documentation, but from my personal experience, an AJAX event firing another AJAX event is the road to damnation. I never seem to get the result I want at that point.

So through a bit more experiment I discover that if the ExecuteProcess code is fired from the browser it behaves differently. To accomplish this we move the code to the browser and clear all of the server code and AJAX setting.

And in the description of the Image we set the Action to None. Meaning only the browser code will be executed.

A final test shows that we now get the intended results, but one last warning before you think life is all milk and honey now. In the project where this actually came up, this solution ended up not working either, although it tested fine when tested via the IDE, when we published to the production server, everything would work fine but once the code of the save button completed, it never returned control to the browser. We only saw this issue when we published to the production server, which time constraints prevent me from doing for this article, and the actual code involved was very complex with a lot of controls, and AJAX events involved, so it may not ever be an issue for you but be sure to test it on the production server before you go to lunch, or turn your cell phone off and just enjoy lunch for a change!

So as you see Clickable images can give a boost to the look and feel of your interface, but you have to be aware of the pitfalls involved and be prepared to handle them.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday, to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WEBDEV