Client Side Events That Overlap

G

Gaz

This is impossible right??

This is a very simplified description of my form so don't worry if it
sounds like I could do it a different way, it's just because I have
simplified it. I have two controls. In control 1 you can update a text
value, the onblur event of this control will submit the form and
update the value on the server. When the onclick event of control 2 is
fired the form is submitted and on return the value in control 1 is
populated ready for editting.

You might be able to see the problem. If the onblur of control 1 is
fired because the user is clicking on control 2 then the event
handling code wants to submit the form twice. What happens is that the
onblur event of control 1 is lost because the onclick event of control
2 overtakes it. So if you make a change to control 1 and expect it to
be updated when the focus is lost when you click on control 2 then
you're in for a surprise.

I think that this is a pretty standard problem in a client-server
application like this. Only one event that goes back to the server can
run at a time. Any solutions to get around this are messy and
unintuitive when looking back at the code.

To resolve this issue I simply check in the onclick event of control 2
if a flag has been set by the onblur event of control 1. If it has
then then I show a warning to the user that they will have to click
again (not in an alert() box, which makes matters worse!), and I don't
submit the form because the onblur submit() is running.

Part of the problem is that when you submit a form the client
environment still seems to be running for a sub-second, so events can
get called when they aren't wanted.

I suppose the point of this message is, has anybody else faced this
problem and did they hit a brick wall like I have?

Thanks.
 
K

kaeli

This is impossible right??
Click to expand...

Maybe, maybe not. Depends.
This is a very simplified description of my form so don't worry if it
sounds like I could do it a different way, it's just because I have
simplified it. I have two controls. In control 1 you can update a text
value, the onblur event of this control will submit the form and
update the value on the server. When the onclick event of control 2 is
fired the form is submitted and on return the value in control 1 is
populated ready for editting.
Click to expand...

This sounds like the following.
I edit a field.
I click on another field.
The onBlur of F1 fires.
The onClick of F2 fires.

If this is the case...

How this is done is slightly different from IE/Netscape. Is this an
intranet application? Does everyone use IE, or do you need the Netscape
code?

This simple test (see code below) shows that IE6 and Opera fire the blur
and never even fire the click. Put a value in the first field, then
click on the second. The alert for blur goes off, but not the click
alert.
Netscape 7 fired the click first, then the onBlur.

So, tell me more about what browsers you need to do this for.

--- test code ---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
function f_onBlur()
{
alert("blur fired");
}
function f_onClick()
{
alert("click fired");
}

</script>
</head>

<body>
<form name="frm1">
<input type="text" name="t1" onBlur="f_onBlur();"> <br>
<input type="text" name="t2" onClick="f_onClick();"> <br>
</form>


</body>
</html>

--
--
~kaeli~
I can't sleep.
The clowns might eat me.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
G

Gaz

How this is done is slightly different from IE/Netscape. Is this an
intranet application? Does everyone use IE, or do you need the Netscape
code?
Click to expand...

It is an intranet application, everyone will be using IE5.5+.
This simple test (see code below) shows that IE6 and Opera fire the blur
and never even fire the click. Put a value in the first field, then
click on the second. The alert for blur goes off, but not the click
alert.
Netscape 7 fired the click first, then the onBlur.

So, tell me more about what browsers you need to do this for.
Click to expand...

I think that when an alert() is onscreen any further events from
behind the alert() box are ignored while the alert window hogs all
events.

I have provided another test, an asp page which replicates my problem
exactly. The problem comes in the delay between submitting the page in
the onBlur handler and the server returning a new page in response.
During this delay, which is replicated by an asp for-loop in the test
below, the client can still handle other messages, such as the onclick
- which comes immediately after the onblur (in IE6). I suspect that on
the server because the onClick submit() came from the same client
session it immediately discards the processing of the onBlur request
and starts afresh with the onClick request, so it only returns the
response from the onClick request. It's like pressing F5 twice in
quick succession - you only get the response from the later F5 press.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
<head>
<title>test</title>
</head>

<%
dim n, nn
for n = 0 to 500000
nn = (n/4) * 4
Next
%>

<script type="text/javascript">
function f_onBlur()
{
//alert("onblur");
document.getElementById("test").value = "onBlur";
document.getElementById("frm1").submit();
}
function f_onClick()
{
//alert("onclick");
document.getElementById("test").value = "onClick";
document.getElementById("frm1").submit();
}
function MyInit()
{
if( document.getElementById("test").value != "")
{
alert("Last event triggered was " +
document.getElementById("test").value);
}
}
</script>

</head>

<body onload="javascript:MyInit();">
<form name="frm1" action="default.asp" method="post">
<input type="text" name="t1" onBlur="f_onBlur();"> <br>
<input type="text" name="t2" onClick="f_onClick();"> <br>
<input type="hidden" name="test" id="test"
value="<%=Request.Form("test")%>"/>
</form>

</body>
</html>
 
K

kaeli

I have provided another test, an asp page which replicates my problem
exactly. The problem comes in the delay between submitting the page in
the onBlur handler and the server returning a new page in response.
During this delay, which is replicated by an asp for-loop in the test
below, the client can still handle other messages, such as the onclick
- which comes immediately after the onblur (in IE6). I suspect that on
the server because the onClick submit() came from the same client
session it immediately discards the processing of the onBlur request
and starts afresh with the onClick request, so it only returns the
response from the onClick request. It's like pressing F5 twice in
quick succession - you only get the response from the later F5 press.
Click to expand...

I had to change the code to the following (provide IDs and post to self
instead of default.asp) for it to work. When it did, the event fired was
always onBlur(). It did let me type while it was processing, but when
the new page was returned, the event fired was onBlur(). Are you sure
this isn't a problem with your server or browser? I'm using ASP, not
ASP.net, and IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
<head>
<title>test</title>
</head>

<%
dim n, nn
for n = 0 to 500000
nn = (n/4) * 4
Next
%>

<script type="text/javascript">
function f_onBlur()
{
//alert("onblur");
document.getElementById("test").value = "onBlur";
document.getElementById("frm1").submit();
}
function f_onClick()
{
//alert("onclick");
document.getElementById("test").value = "onClick";
document.getElementById("frm1").submit();
}
function MyInit()
{
if( document.getElementById("test").value != "")
{
alert("Last event triggered was " +
document.getElementById("test").value);
}
}
</script>

</head>

<body onload="javascript:MyInit();">
<form name="frm1" id="frm1" action="" method="post">
<input type="text" name="t1" id="t1" onBlur="f_onBlur();"> <br>
<input type="text" name="t2" id="t2" onClick="f_onClick();"> <br>
<input type="hidden" name="test" id="test" value="<%=Request.Form
("test")%>"/>
</form>
<p>value=<%=Request.Form("test")%></p>
</body>
</html>

--
 
G

Gaz

I had to change the code to the following (provide IDs and post to self
instead of default.asp) for it to work. When it did, the event fired was
always onBlur(). It did let me type while it was processing, but when
the new page was returned, the event fired was onBlur(). Are you sure
this isn't a problem with your server or browser? I'm using ASP, not
ASP.net, and IE6.
Click to expand...

Your version gave me the same result as my version - I don't
understand why my version didn't work for you as the changes you made
shouldn't make much difference I don't think. What version of iis are
you using? I am using 5.1 with Windows XP. Perhaps you have a faster
cpu so that the for-loop completes quickly enough so that the client
doesn't have time to.

I always get the last event as onClick when I click on control2.
 
K

kaeli

Your version gave me the same result as my version - I don't
understand why my version didn't work for you as the changes you made
shouldn't make much difference I don't think. What version of iis are
you using?
Click to expand...

Honestly, I don't know. It's not my server and I don't have access to
the administrator. I do know it's running on a real windows server set
up for high-end applications, so it's a fast, secure machine. I'm also
on a T3 backbone, so that's fast, too. It's an intranet.
I am using 5.1 with Windows XP. Perhaps you have a faster
cpu so that the for-loop completes quickly enough so that the client
doesn't have time to.
Click to expand...

Well, that could be.
Let me increase it.
....

Nope, I upped it huge (for n = 0 to 5000000) and no difference. I kept
clicking and clicking, but still got onBlur.

This sounds like a bug somewhere. What version of IE are you using? IE5
had some bugs. I'm using IE6.
For giggles, get a computer with IE6 on it and test this page out (put
the page on a server where everyone can get to it), see what happens.

--
--
~kaeli~
Jesus saves, Allah protects, and Cthulhu thinks you'd make
a nice sandwich.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
 
L

Lee

Gaz said:
the onblur event of this control will submit the form
Click to expand...

Revisit that decision. In addition to the problem
that you're having, there are too many things that
are beyond your control, and the control of the user,
that can cause a field to lose focus.

The onBlur event handler should generally only
be used for tasks that are simple enough to be
independent of whatever triggered them.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Python client/server that reads HTML body from server 1
HTML form to csv file on server 1
Node.js server that streams an infinite silence sound switches to streaming mew audio data receiving an event, and then returns to silence 0
I want to deploy a docker compose application on client side premises and I want to protect the source code and the names of technologies 1
Submitting a Form that has Control Events 0
VB .Net form windowState to keep same 2
Asp.net Keep the Heartbeat (server-client communication) 0
Jquery not triggering / acting as expected. 0

Members online

No members online now.
Total: 229 (members: 0, guests: 229)
Robots: 428

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top