Script works in Firefox, Netscape and Opera, but NOT IE7

@bindlestiff7Nov 29.2007

I’ve just about got this form squared away – except for one niggle, albeit a very important one. At the bottom of the form is a control to ‘Add another response’, which appears below the Findings box and allows the user to add another complete line to add further details.

Firefox, Netscape and Opera all display the control in the correct location, under the FINDINGS box, and respond to it, correctly. IE7 displays the control on the left above Body Part (not as bad as it sounds, its for veterinary surgeons) and does not generate a new line, instead it throws up a runtime error (see Debug below)

Debug in IE7 highlights the following line:

[CODE]var newElement = document.createElement(“<” + tagHtml + “></”+ element.tagName + “>”);[/CODE]

Can anyone advise why IE does this (it views the script as an Active x control and requires permission to display blocked content) and whether there is a workaround please.

The form is at: ~~[URL=”http://www.webpedlar.co.uk/form_test/radiology_request.htm”]~~http://www.webpedlar.co.uk/form_test/radiology_request.htm[/URL]

Thanks Guys (and Gals of course)

to post a comment

JavaScript

14 Comments(s) _↴

@WolfShadeNov 29.2007 — #Just off the top of my head - are you testing this locally or on the dev server? If locally, that may explain it, as every time I've tried testing something like this, locally, IE 6 & 7 will both do that. If, however, it's on the server when you test and you still get this, it could be a setting on the information server.

^{^_^{^}}

@bindlestiff7authorNov 29.2007 — #Hi Wolfshade,

I've tested it both locally and on the server where it will eventually live. Several friends have tried it on their own systems as well and the problem always shows up in the same way, Firefox, Netscape etc all fine, IE7 duff.

@zoltankisNov 29.2007 — #http://validator.w3.org/check?uri=http://www.webpedlar.co.uk/form_test/radiology_request.htm

Validation Output: 1 Error

Line 253, Column 58: document type does not allow element "a" here; missing one of "th", "td" start-tag.

<a href="#" id="body_part_select" class="duplicateLink"></a>✉

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

your code is simply wrong:

</table>

 </div></td>
   <td><textarea name="findings" cols="45" rows="3" id="findings"></textarea> [COLOR="Red"]</td>[/COLOR]
   <a href="#" id="body_part_select" class="duplicateLink"></a>
   <!--wf_Relatives1-wfDL -->

[COLOR="Red"] </tr>[/COLOR]

@bindlestiff7authorNov 30.2007 — #Hi Zoltankis, thanks for your input.

I changed the code as you suggested but the problem remains, FFox and Netscape fine, IE7 not.

IE7 still throws the same error in Debug when "Add another response" is selected. Debug picks on the wforms_repeat.js script, with the line selected:

[CODE]else
 var newElement = document.createElement("<" + tagHtml + "></"+ element.tagName + ">"); 
 try { newElement.type = element.type; } catch(e) {}; // nail it down for IE5 ?, breaks in IE6[/CODE]

Is the reference to 'breaks in IE6' telling me that this is simply not going to work?

@zoltankisNov 30.2007 — #your code is:

<td><textarea name="findings" cols="45" rows="3" id="findings"></textarea> [COLOR="Red"]</td>[/COLOR]

<a href="#" id="body_part_select" class="duplicateLink">[COLOR="Red"]</a>[/COLOR]



</tr>

corrected version: http://www.java.xc.hu/bindlestiff7/radiology_request-kzg.htm

<td><textarea name="findings" cols="45" rows="3" id="findings"></textarea>

<a href="#" id="body_part_select" class="duplicateLink">[COLOR="Red"]</a></td>[/COLOR]



</tr>

@KorNov 30.2007 — #I wonder how it could work in Mozilla? Moz uses standard DOM, as

<i>
 </i>document.createElement('[I]tag[/I]')

which is understood by IE as well

But only IE can follow also it's non-standard

<i>
 </i>document.createElement('&lt;[I]tag[/I]&gt;&lt;/[I]tag[/I]&gt;')

Use standard DOM, my advice...

@bindlestiff7authorNov 30.2007 — #Thanks a lot Zoltankis. The form works perfectly now. Much obliged.

Ian

@KorNov 30.2007 — #I am still dazed how the line

document.createElement('<tag></othertag>')

could work in any known browser?... Do I miss something?

@bindlestiff7authorNov 30.2007 — #Sorry Kor,

You've moved right beyond the edge of my expertise there. I went through the Javascript code to check the reference you made but I don't understand why it shouldn't work - but as I said, I fell off the edge of my expertise an hour ago.

@KorNov 30.2007 — #

1. HTML logic says that you can not create something like <tag></anothertag>, because you will have in the end something like

<anothertag><tag></anothertag></tag>, which is [I]not[/I] HTML correct

2. Nor that if you will try to create:

document.createElement('<tag><anothertag>');

document.createElement('</anothertag></tag>');

It woun't work:

But even if you will have

document.createElement('<tag><anothertag></anothertag></tag>');

it might work in IE only...

As I said, standard DOM is:

createElement('[I]tagName[/I]')

DOM:

http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-2141741547

http://www.quirksmode.org/dom/w3c_core.html

@bindlestiff7authorNov 30.2007 — #I understand the point you are making, but, fortunately, it does work in all the browsers that I've tried. The fix that Zoltankis came up with was in the HTML rather than the javascript itself. So the script remains as before.

@KorNov 30.2007 — #OK, I was just curious, I did not wanted to spoil your work or to criticize. I am sure [I]that it is not working[/I] as intended (because simply [I]it can not work[/I]), but, for a strange reason or another, the page looks like you want... ? . Ok, don't mention it... Success!

@zoltankisNov 30.2007 — #I've created in my version a "Make Radiology Report" ? button:

http://www.java.xc.hu//bindlestiff7/radiology_request-kzg.htm

The title "Radiology Report" now has an onmouseover wave effect.

@KorNov 30.2007 — #Oh I see... That is exactly what I guessed... You [I]have[/I] a crossbrowser code

<i>
 </i>if([I]not IE[/I]){
 var newElement = document.createElement(tagHtml)
 }
 else{
 var newElement = document.createElement("&lt;" + tagHtml + "&gt;&lt;/"+ element.tagName + "&gt;");
 }

That is used because IE has a bug, and it does not handle the name attribute when using standard DOM createElement()...

OK, that is clear, you are right, it works, as it is indeed a crossbrowser code down there ?

Also in #JavaScript _↴

Load Webpage in JS Icon Why marquee works in chrome and not others

Success!

Help @bindlestiff7 spread the word by sharing this article on Twitter...

Tweet This

Script works in Firefox, Netscape and Opera, but NOT IE7

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Script works in Firefox, Netscape and Opera, but NOT IE7

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴