Button type and Submit type buttons behaving oddly...

Discussion in 'Javascript' started by babygodzilla, Sep 17, 2007.

  1. babygodzilla

    babygodzilla Guest

    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??
     
    babygodzilla, Sep 17, 2007
    #1
    1. Advertising

  2. babygodzilla wrote:
    > [...]
    > 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
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
     
    Thomas 'PointedEars' Lahn, Sep 17, 2007
    #2
    1. Advertising

  3. babygodzilla

    babygodzilla Guest

    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!

    On Sep 17, 1:33 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > babygodzilla wrote:
    > > [...]
    > > 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
     
    babygodzilla, Sep 17, 2007
    #3
  4. babygodzilla wrote:
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Sep 17, 2007
    #4
  5. babygodzilla

    babygodzilla Guest

    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

    On Sep 17, 3:52 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > babygodzilla wrote:
    > > 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
     
    babygodzilla, Sep 18, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Vincent

    unittest behaving oddly

    David Vincent, Jun 20, 2006, in forum: Python
    Replies:
    3
    Views:
    1,078
    Fredrik Lundh
    Jun 20, 2006
  2. Ben
    Replies:
    7
    Views:
    320
    Steven D'Aprano
    Dec 28, 2006
  3. Replies:
    8
    Views:
    389
    mlimber
    Dec 8, 2005
  4. Siam
    Replies:
    4
    Views:
    417
    Pete Becker
    Jul 27, 2006
  5. Replies:
    13
    Views:
    203
    Ilya Zakharevich
    Feb 22, 2011
Loading...

Share This Page