Button type and Submit type buttons behaving oddly...

[babygodzilla]

I've got 2 scripts that do the same thing, except one uses a Button
type button to call a Javascript function, and the other uses a Submit
type.

Script with Button type: http://im.chillax.in/projects/eventful

Script with Submit type: http://im.chillax.in/projects/eventful/index2.html

The reason I found this distinction is because in the first script,
the original script, when someone presses Enter key in the text field,
the script does not run. So I had to add an onkeypress event that
looks at every keystroke for that text field and simulates a click()
on the Search button when the Enter key is pressed.

Then I found out that this can be achieved by using a Submit type
button instead of a Button type. So I did it, the result of which is
the second link up there. When I run this script, I get some pretty
nasty error from Firebug that I don't understand.

[Exception... "Component returned failure code: 0x80040111
(NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult:
"0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
http://chillax.in/projects/eventful/?artist=maroon :: anonymous ::
line 67" data: no]

Does anyone know what this means? Does anyone know the reason behind
this behavior and how to fix it? It doesn't make sense to me because
both onSubmit and onClick calls the go() function. what is this
NS_ERROR_NOT_AVAILABLE error??

 

[Thomas 'PointedEars' Lahn]

[...]
Then I found out that this can be achieved by using a Submit type
button instead of a Button type. So I did it, the result of which is
the second link up there. When I run this script, I get some pretty
nasty error from Firebug that I don't understand.

[Exception... "Component returned failure code: 0x80040111
(NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
"0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::
http://chillax.in/projects/eventful/?artist=maroon :: anonymous :: ^^^^^^^^^^^^^^
line 67" data: no] ^^^^^^^
Does anyone know what this means? Does anyone know the reason behind
this behavior and how to fix it? It doesn't make sense to me because
both onSubmit and onClick calls the go() function. what is this
NS_ERROR_NOT_AVAILABLE error??

I have marked the important parts above. The relevant code reads:

<form id="userInput" action="" name="userInput" onSubmit="setTimeout('go()',
0);">
<label for="artist" style="font-size: 18px;">Artist / Band:</label>
<input type="text" id="artist"/>
<input type="submit" id="search" value="Search" />
<span id="ajaxLoader" style="visibility:hidden;"><img
src="../images/ajax-loader.gif" alt="Loading..."/></span>
</form>

Because you are not canceling the `submit' event and the (required) action
attribute has the value "" set, the application is forced to navigate to
another resource while "waiting" for the timeout. Even though that target
resource is the same document, that will cause unloading of the previous
document and the destruction of its associated global execution context.
In turn, all objects defined in that execution context are garbage-collected
because no references to them exists anymore.

Hence a race condition when accessing a property of the XMLHttpRequest
object in the go() method; the peculiarity that causes the above error
message would be that this object is a host object. Details of that error
can be found e.g. when doing a full-text search through the respective Gecko
source:

http://lxr.mozilla.org/

That does not happen with input[type="button"] because clicking that button
does not submit the form, it only executes the code specified in the
`onclick' event handler attribute value.

All should be fine (to a certain extent -- further efforts towards graceful
degradation are required by you) if you replaced

<form id="userInput" action="" name="userInput" onSubmit="setTimeout('go()',
0);">

with

<form id="userInput" action="" name="userInput" onSubmit="go(); return false;">

The setTimeout() call (which should be window.setTimeout()) is not
necessary; in fact, as you have seen, it is error-prone here. Probably
you will not even need to give the form a name or an ID.

The onEnter() method is probably redundant, I don't see it being called.
If so, it is Voodoo programming at best (IE only). Use the corresponding
keyboard event handler attributes instead, and note that users do not take
kindly to their actions being altered. Probably with the above modification
you will not need that anymore, anyway.

Despite the leading XML declaration (which at least some IEs choke on), your
response Content-Type HTTP header must contain a declaration of the used
encoding (UTF-8); you have not used a BOM, and not all UAs recognize BOMs:

http://www.w3.org/TR/html401/charset.html#h-5.2.2

And finally your XHTML code:

It is probably unnecessary, too. It is spelled AJAX, but it does not
require X(HT)ML at all. You could save yourself a lot of trouble by
declaring HTML 4.01 instead. You are not even serving your XHTML as
application/xhtml+xml, and you are also not serving it HTML-compatible
as much as possible (AFAIK, IE chokes only on `<br></br>'); that
combination is strongly recommended against:

http://www.w3.org/TR/xhtml-media-types/#summary

For proper XHTML, you have to use an <?xml-stylesheet ...?> processing
instruction to link to the `style' element (the recommended alternative are
`link' elements).

Also, the XML namespace :v="urn:schemas-microsoft-com:vml" appears to be
unused and may be removed (maybe HTML Tidy left it in from a document
previous generated by MS Office). The `xml:lang' and `lang' attributes
should be added and set appropriately (here to "en"):

http://www.w3.org/TR/xhtml1/#docconf
http://www.w3.org/TR/xhtml1/#guidelines


PointedEars

 

[babygodzilla]

WOW Thanks a lot for the essa... errr very good explanation!!
Your solution worked. I think I understand what you explained about
canceling the submit event, but I'm gonna have to read through that
paragraph again.

About the XHTML, it didn't use to be like that. I validated using
http://validator.w3.org, and there were lots of errors, so right now
at least it's validated. I also used the HTML Tidy tool as suggested
by W3 http://www.w3.org/People/Raggett/tidy/
I noticed that tool made some changes, particularly on the DOCTYPE
declaration. I believe it used to be HTML Strict, and now its XHTML
Transitional. I don't really know the difference and when to use
which. Have you got a tip on this?

THANKS AGAIN!

[...]
Then I found out that this can be achieved by using a Submit type
button instead of a Button type. So I did it, the result of which is
the second link up there. When I run this script, I get some pretty
nasty error from Firebug that I don't understand.

[Exception... "Component returned failure code: 0x80040111
(NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult:

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^> "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame ::

http://chillax.in/projects/eventful/?artist=maroon:: anonymous ::
^^^^^^^^^^^^^^

line 67" data: no] ^^^^^^^
Does anyone know what this means? Does anyone know the reason behind
this behavior and how to fix it? It doesn't make sense to me because
both onSubmit and onClick calls the go() function. what is this
NS_ERROR_NOT_AVAILABLE error??

I have marked the important parts above. The relevant code reads:

<form id="userInput" action="" name="userInput" onSubmit="setTimeout('go()',
0);">
<label for="artist" style="font-size: 18px;">Artist / Band:</label>
<input type="text" id="artist"/>
<input type="submit" id="search" value="Search" />
<span id="ajaxLoader" style="visibility:hidden;"><img
src="../images/ajax-loader.gif" alt="Loading..."/></span>
</form>

Because you are not canceling the `submit' event and the (required) action
attribute has the value "" set, the application is forced to navigate to
another resource while "waiting" for the timeout. Even though that target
resource is the same document, that will cause unloading of the previous
document and the destruction of its associated global execution context.
In turn, all objects defined in that execution context are garbage-collected
because no references to them exists anymore.

Hence a race condition when accessing a property of the XMLHttpRequest
object in the go() method; the peculiarity that causes the above error
message would be that this object is a host object. Details of that error
can be found e.g. when doing a full-text search through the respective Gecko
source:

http://lxr.mozilla.org/

That does not happen with input[type="button"] because clicking that button
does not submit the form, it only executes the code specified in the
`onclick' event handler attribute value.

All should be fine (to a certain extent -- further efforts towards graceful
degradation are required by you) if you replaced

<form id="userInput" action="" name="userInput" onSubmit="setTimeout('go()',
0);">

with

<form id="userInput" action="" name="userInput" onSubmit="go(); return false;">

The setTimeout() call (which should be window.setTimeout()) is not
necessary; in fact, as you have seen, it is error-prone here. Probably
you will not even need to give the form a name or an ID.

The onEnter() method is probably redundant, I don't see it being called.
If so, it is Voodoo programming at best (IE only). Use the corresponding
keyboard event handler attributes instead, and note that users do not take
kindly to their actions being altered. Probably with the above modification
you will not need that anymore, anyway.

Despite the leading XML declaration (which at least some IEs choke on), your
response Content-Type HTTP header must contain a declaration of the used
encoding (UTF-8); you have not used a BOM, and not all UAs recognize BOMs:

http://www.w3.org/TR/html401/charset.html#h-5.2.2

And finally your XHTML code:

It is probably unnecessary, too. It is spelled AJAX, but it does not
require X(HT)ML at all. You could save yourself a lot of trouble by
declaring HTML 4.01 instead. You are not even serving your XHTML as
application/xhtml+xml, and you are also not serving it HTML-compatible
as much as possible (AFAIK, IE chokes only on `<br></br>'); that
combination is strongly recommended against:

http://www.w3.org/TR/xhtml-media-types/#summary

For proper XHTML, you have to use an <?xml-stylesheet ...?> processing
instruction to link to the `style' element (the recommended alternative are
`link' elements).

Also, the XML namespace :v="urn:schemas-microsoft-com:vml" appears to be
unused and may be removed (maybe HTML Tidy left it in from a document
previous generated by MS Office). The `xml:lang' and `lang' attributes
should be added and set appropriately (here to "en"):

http://www.w3.org/TR/xhtml1/#docconfhttp://www.w3.org/TR/xhtml1/#guidelines

PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

 

[Thomas 'PointedEars' Lahn]

WOW Thanks a lot for the essa... errr very good explanation!!

You're welcome

[...]
About the XHTML, it didn't use to be like that. I validated using
http://validator.w3.org, and there were lots of errors, so right now
at least it's validated. I also used the HTML Tidy tool as suggested
by W3 http://www.w3.org/People/Raggett/tidy/

JFTR:

| The maintenance of Tidy has now been taken over by a group of enthusiastic
| volunteers at Source Forge, see http://tidy.sourceforge.net. There you can
| find the source code and binaries for a very wide range of platforms.

I noticed that tool made some changes, particularly on the DOCTYPE
declaration. I believe it used to be HTML Strict, and now its XHTML
Transitional. I don't really know the difference and when to use
which. Have you got a tip on this?

It probably recognized elements with empty content model to be written like
<.../> which means <.../&gt; in HTML, and so deduced that you wrote XHTML.

However, HTML Tidy can be configured by an option so that it produces
(probably) Valid HTML instead of XHTML. I use primarily EclipseTidy (HTML
Tidy for Eclipse) now, so I don't remember that command-line option; it
should be documented on the above Web site or on SourceForge, though.

Questions about plain (X)HTML are better be asked in
comp.infosystems.www.authoring.misc


PointedEars

 

[babygodzilla]

After re-reading your explanation a few times, I think I understand
better now. Thanks a lot for your help again. I wanna ask you if you
have any preferred method of paginating results? If possible, I'd like
it so that all the markers get placed as usual, but the actual list of
results gets paginated.

Right now I can use the Eventful API to retrieve a paginated list of
results, using the parameter "page_number" to go to a certain page,
but that means to go to a different page I would have to query the API
again and again. I would rather just do the whole thing once and
paginate the result. Can that be done with just javascript?

thanks

WOW Thanks a lot for the essa... errr very good explanation!!

You're welcome

[...]
About the XHTML, it didn't use to be like that. I validated using
http://validator.w3.org, and there were lots of errors, so right now
at least it's validated. I also used the HTML Tidy tool as suggested
by W3http://www.w3.org/People/Raggett/tidy/

JFTR:

| The maintenance of Tidy has now been taken over by a group of enthusiastic
| volunteers at Source Forge, seehttp://tidy.sourceforge.net. There you can
| find the source code and binaries for a very wide range of platforms.

I noticed that tool made some changes, particularly on the DOCTYPE
declaration. I believe it used to be HTML Strict, and now its XHTML
Transitional. I don't really know the difference and when to use
which. Have you got a tip on this?

It probably recognized elements with empty content model to be written like
<.../> which means <.../&gt; in HTML, and so deduced that you wrote XHTML.

However, HTML Tidy can be configured by an option so that it produces
(probably) Valid HTML instead of XHTML. I use primarily EclipseTidy (HTML
Tidy for Eclipse) now, so I don't remember that command-line option; it
should be documented on the above Web site or on SourceForge, though.

Questions about plain (X)HTML are better be asked in
comp.infosystems.www.authoring.misc

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16