Modal window does not work under IE but works every where else!!!

**WorldNews** · Feb 7, 2011 16:05

Hello,

We have a new sign-in pop-up Window that is based on a Modal Window design. You can see it:
1- Go here
http://www.anoox.com/index_new.php

2- Click on the sign-in icon which is the blue image on the right lower corner
with letter a on it.

Once you do the sign-in Window pops up where you can enter your Username & Password. So the sign-in works OK under all Web browsers, but NOT under!
That is under IE after the user submits the form, the sign-in Modal Window just seats there and does not show the result of the submission.
What do we need to to do correct this under IE?

What in Gods name is wrong with IE? Almost always it is the browser that does not render a look/process correctly in contrast to all other Web browsers! Sheeeesh M$

P.S., I am not sure if this message should be posted under CSS, HTML, Javascript, or Php! Since the problem can be due to either of these. So sorry if this is not the exact correct location for this post.

**w3dx** · Feb 8, 2011 08:58

Are you receiving the form submission server-side?

There are quite a few validation errors with the page - some of which could be the cause of the problem, since you are probably traversing the DOM with your (JavaScript) lightbox code. If you disable scripting then it works OK. So I would certainly try to resolve the validation errors (at least the ones that matter) before proceeding.

**WorldNews** · Feb 8, 2011 10:02

Hi,

Yes, they are being received on server side.
After all, again the form submission and the resulting processing works OK on all Web browsers, it is just the darn IE that does not show the result of the submission.

With that said:
1- What "validation errors" did you find?
2- And how did you find these Errors?

Regards,

Originally Posted by w3dx

Are you receiving the form submission server-side?

There are quite a few validation errors with the page - some of which could be the cause of the problem, since you are probably traversing the DOM with your (JavaScript) lightbox code. If you disable scripting then it works OK. So I would certainly try to resolve the validation errors (at least the ones that matter) before proceeding.

**w3dx** · Feb 8, 2011 10:30

The JavaScript could have been preventing the form from being submitted. This could have been specific to IE, since if the markup is invalid then browsers tend to behave differently in order to compensate.

Specific errors returned from the W3C validator:
- Line 38, Column 173: document type does not allow element "BODY" here
- Line 56, Column 18: ID "TABLE_01" already defined
- Line 62, Column 81: document type does not allow element "FORM" here
- Line 63, Column 14: document type does not allow element "TR" here
- etc.

The W3C validator at:
http://validator.w3.org/

I've just noticed that you have white space before your DOCTYPE and a DOCTYPE that triggers quirks mode in IE. You should ideally be using a full DOCTYPE - one that triggers standards mode in IE - providing this doesn't break your page!

eg.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org./TR/html4/loose.dtd">

**WorldNews** · Feb 8, 2011 15:44

Hi,

These errors that you have reported, which one of our Web pages do they belong to?

FYI, our Modal based log-in Window form, which is:
index_login_form.php

calls this page to process the login:
process_login.php

And again the problem ONLY occurs with IE browser when the log-in form is loaded via the Modal based window and not the regular Web browser.
So if we call process_login.php via a regular Web page form, in IE, then it processes OK too, but this process_login.php does not process ONLY if the log-in form was loaded via the Modal Window and the browser is IE.

ThanX,

Originally Posted by w3dx

The JavaScript could have been preventing the form from being submitted. This could have been specific to IE, since if the markup is invalid then browsers tend to behave differently in order to compensate.

Specific errors returned from the W3C validator:
- Line 38, Column 173: document type does not allow element "BODY" here
- Line 56, Column 18: ID "TABLE_01" already defined
- Line 62, Column 81: document type does not allow element "FORM" here
- Line 63, Column 14: document type does not allow element "TR" here
- etc.

The W3C validator at:
http://validator.w3.org/

I've just noticed that you have white space before your DOCTYPE and a DOCTYPE that triggers quirks mode in IE. You should ideally be using a full DOCTYPE - one that triggers standards mode in IE - providing this doesn't break your page!

eg.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org./TR/html4/loose.dtd">

**w3dx** · Feb 8, 2011 18:22

The validation errors mentioned above were from your homepage - index.php

Yes, your login page is index_login_form.php - but when you use the lightbox, this page gets incorporated into index.php (above the closing </body></html>). So any errors in index.php could affect the imported lightbox code (ie. index_login_form.php). The 'lightbox' code just gives the illusion of a modal dialog box/window - it's really just the same page.

Something which could affect one browser and not another is validation errors in the source.

I'm only saying validation errors could be the problem...

In stepping through the code with IE's Developer Tools, there appears to be a problem submitting the form data via the XMLHttpRequest object (the lightbox hijacks the normal form submission to submit the request via Ajax) - an exception is raised in the prototype library!? You say the form submission is definitely getting through though?

The JavaScript code you are using (prototype.js v1.4 and lightbox.js) does seem a bit dated. There are numerous checks for if (browser == 'Internet Explorer') which might now be redundant with IE8? But I'm speculating.

**WorldNews** · Feb 8, 2011 19:41

Hi,

1st, Thanx for your thoughtful remarks. It is obvious that you have looked at the problem in some depth rather than a cursory look.

In response to your question, I cannot be certain that IE does actually submit the Modal based form to the server. That is I thought it was, but after creating a test page with bare minimum in, that is just a "Hello World" type thing on the receiving side, and seeing this not display, it seems like that IE is actually not submitting the Modal based form to the server.

So with that said, what do you suggest then to address this IE only related bug?

I tell you darn IE

These sort of problems ONLY and ONLY happen with IE.

Originally Posted by w3dx

The validation errors mentioned above were from your homepage - index.php

Something which could affect one browser and not another is validation errors in the source.

I'm only saying validation errors could be the problem...

In stepping through the code with IE's Developer Tools, there appears to be a problem submitting the form data via the XMLHttpRequest object (the lightbox hijacks the normal form submission to submit the request via Ajax) - an exception is raised in the prototype library!? You say the form submission is definitely getting through though?

The JavaScript code you are using (prototype.js v1.4 and lightbox.js) does seem a bit dated. There are numerous checks for if (browser == 'Internet Explorer') which might now be redundant with IE8? But I'm speculating.

User Tag List

Thread: Modal window does not work under IE but works every where else!!!

Thread Tools

Display

Modal window does not work under IE but works every where else!!!

Bookmarks

Bookmarks

Posting Permissions