Synchronization issues

[Robert]

Hi,

I have noticed some synchronization issues when using javascript.
I'll give you an example. It is easy to reproduce the problem if you can
cause some delay in the webserver before sending the page.

//filename = page.html

<script type="text/javascript">
function test1()
{
}
</script>
<a href="#" onclick="test1();
window.location.reload();
return false;">Refresh</a>

When I click the link quite fast then I get some javascript errors about
how test1 does not exist. As a side-effect I will be directed to page.html#
This problem occurs in Firefox 1.5 and not in Internet Explorer 6. I
only tried these browsers for now.

What I am thinking what happens is that the onclick events are handled
sequentially, however the reload is started in a different thread, and
does not stop the UI from sending new events. So the onclick event is
executed while at that time the current page is unloaded. The test1
function does not exist anymore and so causes a javascript error in the
onclick event. This also causes the onclick to not return default and
therefore the href will be used to go to the next page. So now two
threads are racing against eachother. One to reload and one to use the
href. So I will get either page.html or page.html# in the next url. In
this case the difference might not be so interesting, however if I used
window.location.href="next.html" the problem can be quite serious.

So how do I effectively protect me from these problems? And are there
more synchronization issues that I should be aware of in these or other
browers?

For protection I was thinking of something like this:

<a href="#" onclick="try {
test1();
window.location.reload();
}
catch(e)
return false;">Refresh</a>

But I do not like this because I would not get any javascript errors if
I made some mistake when implementing test1 and would make debugging
more difficult.

Any comments are appreciated.

Robert

[Robert]

Robert wrote:

This also causes the onclick to not return default and ...

Correction: This also causes the onclick to not return false and so the
default action will happen for the A element, which is to open the url
in the href.

[VK]

Robert wrote:

Correction: This also causes the onclick to not return false and so the
default action will happen for the A element, which is to open the url
in the href.

So don't misuse hypertext container then if you don't need any
navigation. Use <var> or (if you are semantically preoccupied :-)
<span>

var {
font-style: normal;
color: #0000FF;
text-decoration: underline;
cursor: pointer;
behavior: url(hilite.htc);
}

The behavior is needed only until IE 7 release which will support hover
for all elements. A two-line code for .htc can be found here:
<http://groups.google.com/group/comp.lang.javascript/tree/browse_frm/thread/85eff0714f7c2778/3238327268eed329?rnum=1&_done=%2Fgroup%2Fcomp.lang .javascript%2Fbrowse_frm%2Fthread%2F85eff0714f7c27 78%2F9e263b68e08d9c2b%3F#doc_d07a65ad5c9ab43b>

And then:

<var onclick="f1()">Click here</var>

It doesn't solve the problem of missing function, but no worries about
unwanted navigation.

Even more robust:
<var onclick="if ('undefined' != typeof f1) {f1();}">Click here</var>

[Robert]

VK wrote:

Robert wrote:

Correction: This also causes the onclick to not return false and so the
default action will happen for the A element, which is to open the url
in the href.

So don't misuse hypertext container then if you don't need any
navigation. Use <var> or (if you are semantically preoccupied :-)
<span>

Hmm I will think about that. Not exactly why you prefer VAR over SPAN,
but I like the idea of not using A.
Of course this was done because of the hover support as you have guessed.
Even more robust:
<var onclick="if ('undefined' != typeof f1) {f1();}">Click here</var>

Not really worth it in my opinion because there is nothing stopping f1
from being unloaded between the if condition and f1() statement.

[VK]

Robert wrote:

Not exactly why you prefer VAR over SPAN,

Only for the sake of convenience: this way I can get all psi-links in
one call:
document.getElementsByTagName('VAR');
rather than grab all <span>'s (which I use for other purposes too) and
then sort them out in a loop.

[Robert]

VK wrote:

Robert wrote:

Not exactly why you prefer VAR over SPAN,

Only for the sake of convenience: this way I can get all psi-links in
one call:
document.getElementsByTagName('VAR');
rather than grab all <span>'s (which I use for other purposes too) and
then sort them out in a loop.

Ahh I see...
Well I guess I am semantically preoccupied :)

[VK]

Robert wrote:

Well I guess I am semantically preoccupied :)

Oh, I'm so sorry... :-(

:-)

[VK]

Robert wrote:

Not exactly why you prefer VAR over SPAN,

Only for the sake of convenience: this way I can get all psi-links in
one call:
document.getElementsByTagName('VAR');
rather than grab all <span>'s (which I use for other purposes too) and
then sort them out in a loop.

Ahh I see...
Well I guess I am semantically preoccupied :)

Also: despite widely believed otherwise, a hypercontainer doesn't
require neither href nor name attributes. These attributes only needed
to make a hypercontainer act as a link or as an anchor or as both. It
is totally correct and standard-compliant just to mark a hypercontainer
but leave it without the regular functionality:
<a>Just a plain hypercontainer</a>

But the default styling (cursor, color) is attached not to the
hypercontainer itself, but only to a hypercontainer used as a link
(having href attribute set). So additional styling is still needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
color: #0000FF;
text-decoration: none;
cursor: pointer;
behavior: url(hilite.htc) /* IE4/5/6 hover fix */}
a:hover {
color: #FF0000;
text-decoration: underline}
</style>
</head>
<body>
<p><a onClick="alert(this.innerHTML)">Click me</a></p>
</body>
</html>

Where hilite.htc is (I edited it a bit to make it more flexible):

<public:component>
<public:attach event="onmouseover" onevent="Hilite()">
<public:attach event="onmouseout" onevent="Restore()">
<script type="text/Jscript">
// Your settings:
var hoverColor = '#FF0000';
var hoverDecor = 'underline';
// End of settings

var normalColor, normalDecor;

function Hilite() {
normalColor = this.currentStyle.color;
normalDecor = this.currentStyle.textDecoration;
this.runtimeStyle.color = hoverColor;
this.runtimeStyle.textDecoration = hoverDecor;
this.runtimeStyle.cursor = 'hand';
}

function Restore() {
this.runtimeStyle.color = normalColor;
this.runtimeStyle.textDecoration = normalDecor;
}
</script>
</public:component>

You are welcome to use this approach too. I'm still missing the
semantical difference of using <a href> or <a> just to execute
JavaScript on the same page (which many hold as semantically correct
approach) and using <var> or other non-<a> tag (which is considered as
semantically non-correct). But the W3C-style semantic thinking is a
dark matter I guess :-)