OnBlur firing when not expected.

[John Kotuby]

Hello all...
I am working on an ASP.NET 2.0 application with VS2005 and VB. I have chosen
to use popup windows in some cases because it makes the user experience
better (according to all the users I have polled who will be using this
app).

In an attempt to keep the popup from disappearing behind the calling window,
I am adding the onblur="FocusMe():" event to the Body tag of the popup. I
really want onblur to react to any click outside the popup Window, but I
have read that the only place to put that event when trying to apply it to
the window is in the Body tag. BTW... FocusMe() just does window.focus();

Well I thought this would be a simple task and work just fine... after all,
doesn't everybody who uses popups have to deal with this issue? That's why I
also expected to find copious documentation on the subject if I ran into a
problem...not so.

Apparently when I click on any form input type control (text, select, etc.)
that is clearly within the Window and within the Body tags, the
window.onblur (body.onblur) event fires, and the input control does not
function. Not what I expected.

I then tried placing an OnClick event in the Body of the parent window...
which looks for an open popup and places focus back onto it. That allows
controls inside the popup to work, but fails if I click on certain controls
(like links) in the parent window.

I have looked in Javascript forums and books for answers and have not found
them yet. So I am posting here, since my development environment is ASP.NET
2.0.

Somebody please tell me there is an easy way to fix this problem, and I have
just not found it yet.

Thanks to all for your help.

 

[Patrice]

Not sure what is the problem you are trying to solve. Are you trying to
create an "always on top" window or a modal dialog ? Could it be acceptable
to create a div with the appropriate z-index order ?

 

[Mark Rae]

Somebody please tell me there is an easy way to fix this problem, and I
have just not found it yet.

Is this a public Internet app or a closed intranet app...?

 

[John Kotuby]

Thanks for the quick responses. I was busy looking into
window.showModalDialog function for the last couple hours and am having
trouble getting it to work in IE7.

It is a public internet application that requires authentication. The aspx
form displayed in the window must be filled out and submitted (posted back)
to allow creation of a Record entry (using the entered form values) in SQL
Server.

In essence I want the user to fill out the form before continuing back to
the parent window. I could just navigate to another aspx, and let the user
go back to the "parent" window to continue working. However, it is simpler
for the user to do repetitive tasks from the "parent" window if I just use a
"modal" popup.

BTW...This part of the application is available after the user logs in and
is authenticated. It is not part of the login.

 

[Mark Rae]

Thanks for the quick responses. I was busy looking into
window.showModalDialog function for the last couple hours and am having
trouble getting it to work in IE7.

Really? Works perfectly in IE7 for me... What specific problems are you
having...?

It is a public internet application

Ah - well that rules showModalDialog out, then, as that is supported only in
IE and the latest version of Safari...

 

[John Kotuby]

I am trying to create a modal window in which the user fills out form
information, submits it, the window closes, and the user is back to the
parent window and can then repeat a similar task with any of possibly
hundreds of Repeater entries that might be present on that page.

I have to think about whether "always on top" would actually work better. I
have been reading about the window.ShowModalDialog function and that it has
trouble with posting back to the server. I have also been getting synatax
errors trying to create it.
------------------------------------------
function OpenNewWin(type)
{
if(type=='deck')
{ if(window.showModalDialog)
{
window.showModalDialog("/Search/NewDeck.aspx", window, "dialogHeight: 500px;
dialogWidth: 550px; dialogTop: 40px; dialogLeft: 40px; edge: Raised; center:
Yes; help: No; resizable: Yes; status: Yes;");
}
else
{
var
newdeck=window.open("/Search/NewDeck.aspx","newdeck","modal=yes,title=show,toolbar=0,location=0,status=0,menubar=0,scrollbars=1,resizable=1,width=550,height=500,top=40,left=40");
popWin=newdeck; newdeck.focus();
}
}

if(type=='card') ........... and so on.

 

[John Kotuby]

Hi Mark,

I was having truoble getting the showModalDialog to run because I was
leaving the "argument" argument empty instead of passing something like
"window" which I am doing in the below example. Now it works fine.

Since it is actually a paid subscription site that is used for research
during business hours, we can stipulate IE if we want.
However, I saw a great article that showed me how to test for
showModalDialog in javascript...

{ if(window.showModalDialog)
{
window.showModalDialog("/Search/NewDeck.aspx", window, "dialogHeight: 500px;
");
}
else
{
var
newdeck=window.open("/Search/NewDeck.aspx","newdeck","modal=yes,title=show");
}

The modal=yes attribute works for newer Mozilla/Foxfire browsers. No excuse
not to use a newer browser for security...especially in business.

 

[Mark Rae]

The modal=yes attribute works for newer Mozilla/Foxfire browsers.

Obviously you mean FireFox...

The modal=yes tab is completely unreliable. I have just tried it on a
variety of browser / platform combinations, and the only one it worked on
was Mozilla 1.7.13 for Windows.

It failed on all of the following:

FireFox 2.0.0.3 for Windows, Mac & Linux
Opera 9.20 for Windows, Mac & Linux
Netscape 8.1.2 for Windows
Netscape 7.2 for Mac & Linux
Mozilla 1.7.13 for Mac & Linux
Camino 1.0.4 for Mac
SeaMonkey 1.1.1 for Windows, Mac & Linux

 

[Mark Rae]

It failed on all of the following:

I forgot to mention that it also failed on:

Epiphany 2.18.1 for Linux
Konqueror 3.5.6 for Linux

 

[John Kotuby]

Mark,
You are indeed correct..
My error entirely. "Always test before you speak " is what I should
remember. Along with "Don't believe everything you read".

I don't want to be passing along bad informattion and I'm glad you called me
on it.

I have since seen other postings where for FireFox it is recommended to
feign pop-ups with absolute positioned <div> elements (or other appropriate
elements), change either visibility attributes(which I have done in IE) or
z-order (something I havent even messed with yet).

The coders that code primarily for FireFox bad mouth IE for it's stupididy
in failing to understand simple css commands, while I say "why doesn't
firefox respect the modal attribute" .

I guess its all a point of view thing.

Even in IE I have found that PostBacks with modal or even modeless dialogs
present some problems. When just opening a child window without modality,
the postbacks appear in the same child window... which is what I want.

I am back to looking at the onblur event and how to tell when the mouse
pointer is outside of the child window or just pointing to a form element
within the child window. If that is easy to determine then I can use the
onblur event and just do nothing if the mousepointer is still in the child
window or call self.focus() top.focus() or window.focus() if it's not.
Another option is to (maybe) somehow disable the entire parent window when
creating the popup.

My other alternative is to feign a popup by creating a div or table inside
the original form and displaying it when necessary... but that would require
a LOT of new coding at this point, when the boss is screaming for results.

I can't believe such a simple thing can present such problems.. for me at
least. For now I must move on with other aspects of the application until I
find the right solution for the popups.

Thanks for your help...

 

[Mark Rae]

I have since seen other postings where for FireFox it is recommended to
feign pop-ups with absolute positioned <div> elements (or other
appropriate elements), change either visibility attributes(which I have
done in IE) or z-order (something I havent even messed with yet).

Yes indeed - which is what I used to do until Ajax...

The coders that code primarily for FireFox bad mouth IE for it's stupididy
in failing to understand simple css commands, while I say "why doesn't
firefox respect the modal attribute" .

IE6 and earlier versions were really, really, non-compliant - IE7 is much,
much better... As for modal dialogs, Apple clearly think they're a valid
piece of functionality to support as they've built them into their latest
Safari browser.

Even in IE I have found that PostBacks with modal or even modeless dialogs
present some problems. When just opening a child window without modality,
the postbacks appear in the same child window... which is what I want.

I am back to looking at the onblur event and how to tell when the mouse
pointer is outside of the child window or just pointing to a form element
within the child window. If that is easy to determine then I can use the
onblur event and just do nothing if the mousepointer is still in the child
window or call self.focus() top.focus() or window.focus() if it's not.

Again, you'll encounter cross-browser incompatibilities with that...

Another option is to (maybe) somehow disable the entire parent window when
creating the popup.

Which is what Ajax does:
http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx

My other alternative is to feign a popup by creating a div or table inside
the original form and displaying it when necessary... but that would
require a LOT of new coding at this point, when the boss is screaming for
results.

If you don't want to use Ajax, there are tons of examples of this type of
modal "dialog" on the net...