Housecleaning

Inner workings or no, thanks for the heads up on Dan's blog. I updated my link as well.

Well, I got forced into javascript (and html and sql) at the current gig even though I told them several times during the interviews that I was very much a back end kinda guy...

BUT, I've gotten several apps to work with firefox that previously did not. The biggest issue was that any element given a name attribute in ie gets an id attribute automatically with the same value so that getElementById() finds them even though the id was not set. Firefox does no such thing, and it's easily remedied by setting the id attribute on any element you wish to access from javascript.

The other thing is this: when I get rid of all errors on the javascript console (Tools->JavaScript_Console) in firefox, lots of things just start magically working. The hardest thing I've found is the difference in handling keymasking events.

This line:

[textarea id="comment-text" name="text" rows="25" cols="30" onkeyup="ReloadTextDiv();"][/textarea]

should have the id changed to "text". Note also that there is no contract that ie will always behave this way and, if somehow this behavior becomes exploitable nefariously, many web pages will break.

'Hope this helps.

Mark

arrgh. I knew this would let me past html elements...

The offending line has this:

textarea id="comment-text" name="text"

Mark

Go firefox!

Hey Doug,

When I click the 'B', 'I', 'U', 'Strike', or '"' button I get this error:

Error: myField has no properties
Source File: http://www.salguod.net/movabletype_3-2/plugins/easy_comments/easy-comments-1.js
Line: 194

When I click one of the list buttons, I get this error:

Error: myField has no properties
Source File: http://www.salguod.net/movabletype_3-2/plugins/easy_comments/easy-comments-2.js
Line: 166

And when I type in the text area I get this:

Error: document.getElementById("text") has no properties
Source File: http://www.salguod.net/weblog/archive/000476.shtml#comments
Line: 51

Hope that helps.

Anonymous - What browser (and version) are you using, FireFox? If I recall right, when I tried in FF the buttons didn't even show up. Are you getting those errors in IE?

Thanks,

BEG - Have you tried Maxthon? From a useability standpoint, Maxthon kicks FireFox's butt, in my opinion. It is based on IE, so if you've got issues with IE, like security, standards compliance or just anti-MS, than it's not for you. But if you're OK with the IE core and you want a full featured browser without searching for plugins, than Maxthon is a better choice. Maxthon does out of the box what it takes several plugins to do in FF. Tabs at the top or bottom, mouse gestures (open a new tab by jsut clicking and dragging, for example), built in links to translation and other services, save tabs as a group, ad blocker, pop up blocker, RSS support and more. Plus you can add plugins for even more functionality and it's skinnable just like FF.

FWIW, the things Anonymous are seeing are exactly what happens when the id attribute has not been explicitly set for an element or is set to something other than what you are looking for.

Another option instead of setting the id to "text" is to change the line that looks for it to:

getElementById("comment-text")

IE should still find it...

Hi,

I'm not sure why my post showed up as from "anonymous"... I'm Alan, and I'm using Firefox 1.5.0.3 under Linux (So I don't have the option to run IE!)

Alan

Sure you can, Alan, just install Wine and WineTools. You'll have IE6 in no time! :)

As a dillo user, I understand the aggravation with websites giving me trouble.

Thanks for the help. Mark, I wish I understood better how this stuff worked, your suggestions might make more sense. I mean, you were pretty specific (change the id to "text"), but it's the rest of the explinations that have my head spinning.

When I say I hacked this from someone else's code, I really mean hacked. I know next to nothing.

I'll get into it later.

Testing, testing in FireFox ...

1. One ...
2. Two ...
3. Three ...

Thanks Mark!

Hmmm. Now that the preview works in FF, it seems there's an issue with alignment, width or something. As the preview fills in, it eventually starts pushing the entry field down the page.

Oh well, it's still an improvement.

Alan, still getting errors?

OK, Mark, two questions:

1. Do I need to change 'comment-text' to 'text' this line too:

[label for="comment-text"]Comments:[/label]

I've tried it both ways and it doesn't seem to make a difference.

Thanks for the great callout AND the advice to others to update their links! Sort of evangelistic in a way.

Man, I never thought the link update thing would be so hard, but it has been. Thanks, though, to great blog friends who make it easy!

label isn't an html tag, so that means it's defined in your stylesheet and that will tell you what would change. I don't think it needs to change.

What I'd try next is to change the id on that textarea back to "comments-text" and change the getElementById() call to look for "comments-text" instead of "text".

My favorite html site:

w3schools.com (sparse but useful HTML DOM section)

My favorite javascript site:

docs.sun.com/source/816-6408-10/

Mark

Hey comments work!

I don't know. Kind of a stickler with FF now.

Well, I'm wrong about labels - they're valid inside a form element, discussed here:

w3.org

Mark

What I'd try next is to change the id on that textarea back to "comments-text" and change the getElementById() call to look for "comments-text" instead of "text".

Oops.

I guess the textarea has to be called 'text' in order for comments to work. Or at least I didn't see what else to change. Or something. I'll look into that more later.

"I guess the textarea has to be called 'text' in order for comments to work."

Originally, the textarea element had name="text" and id="comments-text".

The id is what (supposedly) is used in a getElementById() call. The name is what is submitted in the POST or GET. In my case, in a java servelet, I'd retrieve it with something like:

String comments=req.getParameter("text");

and changing the name to "comments-text" would cause me not to find it.

So, just change the getElementById() to look for "comments-text" and leave the textarea with name="text" and id="comments-text". That way, it gets submitted properly.

I think. :)

This is a test to see what the new comment formatting setting does.

Do I get line breaks?
Do I?

So, just change the getElementById() to look for "comments-text" and leave the textarea with name="text" and id="comments-text".

Also, I don't see "text" or "comments-text" within the [form] tag. The 'Post' button, I think, has this line:

[input type="submit" accesskey="s" name="post" id="comment-post" value="Post" /]

[script type="text/javascript">var edCanvas = document.getElementById('text');[/script]

I went through the comment form and replaced all the 'text' with 'comment-text', including that 'getElementById' and that's what broke the submission. You'd type away, hit 'Post' and you'd get an error about there being no comment text.

I think I'll just change the cols="30" to a smaller number and be done.

Phooey.

In html, the elements can have specific attributes. Certain elements inside a form get submitted when the form is submitted. When they are sent, they are sent, more or less, as name-value pairs and the other end (wordpress in this instance) retrieves their value by their name. And, in a rare stroke of clarity, in this case the name is the name attribute and the value is the value attribute.

In the simplest example, suppose your form has the following element:

[input type="text" name="foo" id="bar" value="baz" /]

This would display as a simple text entry box (like Name, Email Address, and URL do on your comments form) and it would be pre-populated with the text "baz".

When the submit button was pressed, the other end would ask for the value associated with the name "bar" and get "baz" returned unless the user had typed something else in there.

What's confusing is that Internet Explorer lets you write javascript and access that form element either of two ways:

getElementByID("foo")

or

getElementByID("bar")

But Firefox and other browsers will only allow the second one. getElementByID() is supposed to return an object that has the id you passed as an argument. Internet Explorer will also return an object that has the *name* you passed as an argument.

Where Internet Explorer's feature can cause confusion is if you have the following perfectly legitimate elements:

[input type="text" name="foo" /]

and

input type="text" name="bar" id="foo" /]

Which one should

getElementByID("foo")

return? I believe it "does the right thing" and, in this example, would return the second one, but if you did not have the second element in your form, would return the first one. But it's not clear, since Internet Explorer secretly assigns the id of "foo" to the first element. Internet Explorer's seemingly nice little feature actually *encourages* sloppy html and javascript programming. And there's no real reason to disparage Microsoft over this: html and javascript were originally pretty freewheeling languages and only in the last 5-7 years has anyone attempted to standardized them somewhat, partly driven by the Internet's success and by security exploits that took advantage of this freewheeling nature that, arguably, was much of the cause of the Internet's success.

I hope that this is as clear as mud. That's what I was aiming for, any way. :)

OK, let's see. Hmmm, preview no-workey in IE. How about buttons?

Buttons fine. Now the real test, can I post?

Trying again, in FF this time. Hey, got a preview!

And look:

1. I
2. can
3. make

• different
• kinds
• of
• lists!

Thanks Mark. I was still scratching my head after your last post, but something clicked and I got it.

text area id has to be 'comment-text' to work with the stylesheet
textarea name has to be 'text' for comments to work.

preview and formatting buttons script needs to look for 'comment-text' in their 'gets'.