Photo by TalAtlas

Are you struggling with simple features that were working on a page, but now have quit working for apparently no reason? Uncle Pete has been dealing with that a lot lately and has a few ideas on why and what to do about it.

While working on theTaxCure.com several times I have had features on my pages working and then suddenly quit working for no apparent reason. Especially features that use quite a bit of WX generated JavaScript like the “revolving CURE“, the running doctor, or the fade-in photo panels. I am preparing to write a series of articles showing how I created those features using native WX code, but realized it might be beneficial for you to know what can go wrong first.

A little background, if you haven’t work with WebDev much yet. When coding your pages there are two types of code, server code and browser code. Although you can write the browser code in WLanguage, it is converted to JavaScript when sent to the browser. After all browsers don’t know anything about WLanguage.

Over the years I have managed to tweak JavaScript a little here and there when needed, but one of the things that attracted me to WebDev was not needing to know JavaScript  And as you can see from those links above, quite a bit can be accomplished with native WLanguage. However the resulting JavaScript, is not foolproof. I have had a few occasions where there were no compile errors in WB, however the JavaScript did have errors and the page did not behave as expected.

We will create a couple of examples to demonstrate this, so you will know what to look for as you start pushing WB beyond the basics.

So create a new WB project. A WebDev dynamic project with no Analysis will work fine. Then create a new page. You don’t need to do anything fancy, just a static and an entry field like so:

On the Note,Help tab of the entry field put some test in the Information text area. That is what is showing in the light gray inside the entry control.

If you run a test of the page, you will see “Background Help” show in light gray inside the edit control, as long as the cursor is not currently in the edit control, and there isn’t a value already in the control. This is a nice feature, that is a great way to provide a hint to the user was to what should be entered into the field. If you look at the source code of the page from your browser you will see the HTML for the entry field looks something like this:

<INPUT TYPE=”text” SIZE=”16″ NAME=”A1″ VALUE=”” onblur=”_T1(event)” onfocus=”_T2(event)” id=”A1″ class=”Edit”>

Notice the onblur and onfocus entries, these are executing JavaScript, on entry and exit of the field. So now you know that it is JavaScript this is controlling the background text inside the entry field. So now to break the JavaScript code. Go back to WB and Control Right Click to select both the static and the entry field.

Right click on and chose Groups->Associate the Selection from the popup menu. This place the controls in a group.

On the Managing the groups window insert a new group.

Save the managing the groups window.  Now code to the code of the window and put a line of code to set the Opacity of the group you just created to 50% in the browser onload process.

If you run a test of the page now you will notice that the Background text is no longer working.

Chrome has some great tools for developers, including a JavaScript console. From the setting menu chose Tools->JavaScript Console. I am sure other browser have similar tools.

The JavaScript Console shows that there are some undefined references in the JavaScript code now.

Looking at the source code in the browser, here is the JavaScript portion.

var _PAGE_=null
function _JGCS(e){if(e.currentStyle) return e.currentStyle;var d = e.ownerDocument;if (!d){d = document}var w = d.defaultView;if (w.getComputedStyle){if (e.nodeName == "#text"){e = e.parentNode}return w.getComputedStyle(e, null)}return new Object()}
function _T0(event,_WW_ACTION_SPEC_){_LOD_COM(event);{;=50}}
function _T1(event,_WW_ACTION_SPEC_){clA1.OnSubmit(event);return true}
function _T2(event,_WW_ACTION_SPEC_){{}clA1.OnBlur(event)}
function _T3(event,_WW_ACTION_SPEC_){clA1.OnFocus(event);{}}
function _LOD_COM(event){}
function _UNL_COM(event){}

Apparently there is something wrong with that code, but again, not being a JavaScript expert was one of my reasons for using WB, and even if I did know what was wrong with the code. I am not sure how I could fix it since it is in generated code.

So my current “best practice” when a page does not work as expected, is to drop a entry control with background text on the page and see if it works, or use Chromes JavaScript console to see if there are JavaScript errors, if so I begin comment out browser code until it is resolved and then adjust from there as needed.

I have ran into a few different things that cause this type of behavior. Even though WB doesn’t indicate any kind of compile error. The resulting code is invalid. Most of the other examples were more complex and related to coding errors of my own where I used an incorrect variable name, but again there were no compile errors. As I run into other examples of this I will be sure to update this article. And if you find any similar examples please include them in the comments so we can all benefit from each others experiences.

And yes this has been reported to pcSoft support.

Be sure to look for the How-to articles coming in the next week or show, to see all of the WX code that create the three examples I gave at the beginning of the article!

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

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

 

• WEBDEV