annoying problem

Discussion in 'Javascript' started by andreyvul, Feb 4, 2008.

  1. andreyvul

    andreyvul Guest

    I'm using Firefox's Web Development toolbar and it whines about
    function bar() not found:
    <html>
    <head>
    <script type='"text/javascript">
    function foo() {
    document.write("<input type=\"button\" value=\"bar\" onclick=
    \"bar();\">");
    }

    function bar() {

    }
    </script>
    </head>
    <body>
    <input type="button" value="baz" onclick="foo();" />
    </body>
    </html>

    Any clue on how to fix it without inlining the contents of bar()
    inside the onclick of the button generated by foo()?
     
    andreyvul, Feb 4, 2008
    #1
    1. Advertising

  2. andreyvul wrote:
    > I'm using Firefox's Web Development toolbar and it whines about
    > function bar() not found:
    > <html>
    > <head>
    > <script type='"text/javascript">
    > function foo() {
    > document.write("<input type=\"button\" value=\"bar\" onclick=
    > \"bar();\">");
    > }
    >
    > [...]
    > <input type="button" value="baz" onclick="foo();" />


    What you presumptuously call "whining" is its correctly reporting that the
    current execution context does not define a callable object that can be
    referred to by this name. As you have overwritten the previous context
    where that object was defined when you called document.write() after the
    document was fully loaded. That behavior of the UA is in full compliance
    with W3C DOM Level 2 HTML.

    http://www.w3.org/TR/DOM-Level-2-HTML/

    > Any clue on how to fix it without inlining the contents of bar()
    > inside the onclick of the button generated by foo()?


    Don't use document.write() but other DOM methods instead.

    Thank you for wasting the time of other people by needlessly asking a
    Frequently Asked Question.

    http://jibbering.com/faq/


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Feb 4, 2008
    #2
    1. Advertising

  3. andreyvul <> writes:

    > I'm using Firefox's Web Development toolbar and it whines about
    > function bar() not found:
    > <html>
    > <head>
    > <script type='"text/javascript">
    > function foo() {
    > document.write("<input type=\"button\" value=\"bar\" onclick=
    > \"bar();\">");
    > }
    >
    > function bar() {
    >
    > }
    > </script>
    > </head>
    > <body>
    > <input type="button" value="baz" onclick="foo();" />
    > </body>
    > </html>
    >
    > Any clue on how to fix it without inlining the contents of bar()
    > inside the onclick of the button generated by foo()?


    document.write on a loaded page replaces the page. so no bar() for you.

    use the DOM instead.

    Joost.
     
    Joost Diepenmaat, Feb 4, 2008
    #3
  4. Joost Diepenmaat wrote:
    > document.write on a loaded page replaces the page. so no bar() for you.
    >
    > use the DOM instead.


    JFTR: The OP is using the DOM already, only in a wrong way.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Feb 4, 2008
    #4
  5. andreyvul

    andreyvul Guest

    Solution: use <div id="foo"></div> as a placeholder and use
    document.getElementById("foo").innerHTML= instead of
    document.write( ).
    Problem solved.
    Is this the Right Way of using the DOM method for dynamic content
    generation?
     
    andreyvul, Feb 4, 2008
    #5
  6. andreyvul wrote:
    > Solution: use <div id="foo"></div> as a placeholder and use
    > document.getElementById("foo").innerHTML= instead of
    > document.write( ).
    > Problem solved.


    In your test case.

    > Is this the Right Way of using the DOM method for dynamic content
    > generation?


    No. RTFM, STFG, STFW.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Feb 4, 2008
    #6
  7. On Mon, 04 Feb 2008 15:05:50 -0800, andreyvul wrote:

    > Solution: use <div id="foo"></div> as a placeholder and use
    > document.getElementById("foo").innerHTML= instead of document.write( ).
    > Problem solved.
    > Is this the Right Way of using the DOM method for dynamic content
    > generation?


    ..innerHTML is not a DOM standard (yet). Although a lot of browsers
    support it, not all do. Even among those that do support it, it has many
    well-known issues. I recommend avoiding it unless you understand those
    issues.

    < URL http://inmyexperience.com/archives/000428.shtml >

    createElement and and that family of calls are a far better way to
    make the changes, though you should make sure that they are available
    before calling them blindly.

    Check google groups for 'Code Worth Recommending Project" and "gebi" for
    a rather long but good discussion about how to "feature test" before
    blindly calling these functions.
     
    Jeremy J Starcher, Feb 5, 2008
    #7
  8. andreyvul

    andreyvul Guest

    On Feb 4, 7:45 pm, Jeremy J Starcher <> wrote:
    > On Mon, 04 Feb 2008 15:05:50 -0800, andreyvul wrote:
    > > Solution: use <div id="foo"></div> as a placeholder and use
    > > document.getElementById("foo").innerHTML= instead of document.write( ).
    > > Problem solved.
    > > Is this the Right Way of using the DOM method for dynamic content
    > > generation?

    >
    > .innerHTML is not a DOM standard (yet). Although a lot of browsers
    > support it, not all do. Even among those that do support it, it has many
    > well-known issues. I recommend avoiding it unless you understand those
    > issues.
    >
    > < URLhttp://inmyexperience.com/archives/000428.shtml>
    >
    > createElement and and that family of calls are a far better way to
    > make the changes, though you should make sure that they are available
    > before calling them blindly.
    >
    > Check google groups for 'Code Worth Recommending Project" and "gebi" for
    > a rather long but good discussion about how to "feature test" before
    > blindly calling these functions.


    I'm looking at the DOM specs yet I can't find way to add raw HTML
    inside a <div></div> without a chain of createElement() calls.
     
    andreyvul, Feb 5, 2008
    #8
  9. andreyvul wrote:
    > On Feb 4, 7:45 pm, Jeremy J Starcher <> wrote:
    >> Check google groups for 'Code Worth Recommending Project" and "gebi" for
    >> a rather long but good discussion about how to "feature test" before
    >> blindly calling these functions.

    >
    > I'm looking at the DOM specs yet I can't find way to add raw HTML
    > inside a <div></div> without a chain of createElement() calls.


    The reason you can't find anything else in the specs is that there is no
    other standards-compliant way (yet?). However, try to think of that as an
    advantage. You may need more calls but in a conforming implementation you
    won't be able to generate any invalid markup, much in contrast to using
    innerHTML, and if something fails you stay in control in every step on the
    way. It would appear that this is the main reason why `innerHTML' was not
    standardized (yet?).


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Feb 5, 2008
    #9
  10. On Mon, 04 Feb 2008 18:53:20 -0800, andreyvul wrote:

    > I'm looking at the DOM specs yet I can't find way to add raw HTML
    > inside a <div></div> without a chain of createElement() calls.


    *nods*

    Depending on exactly what you are doing, there are a few shortcuts that
    can be taken. You could create your HTML as regular HTML in the page,
    hide it with CSS, and move the node to where you need it later.

    This works on modern browsers. Fails with my cell phone though, I end up
    seeing stray HTML at the bottom of the page.

    Google for 'innerHTML replacement' for some other ideas.
     
    Jeremy J Starcher, Feb 5, 2008
    #10
  11. andreyvul <> writes:

    > I'm looking at the DOM specs yet I can't find way to add raw HTML
    > inside a <div></div> without a chain of createElement() calls.


    I wrote a short bit of code that gets rid of a lot of annoying DOM calls:

    with(htmlGenerator) {
    target_element.appendChild(
    div({ style: { border: "1px solid black", margin: "1em",padding: "0.5em" } },
    h2("Some created elements"),
    p("The time right now is ",(new Date()).toUTCString()),
    p("a paragraph containing ",
    a({href:"#top"},"a link"),
    " and some more text"),
    div({
    style: {
    border: "1px solid black",
    cursor: "pointer",
    color: "#ffff00",
    backgroundColor: "black"
    },
    onclick: function() {
    var bg = this.style.backgroundColor;
    this.style.backgroundColor = this.style.color;
    this.style.color=bg;
    }},
    "This is a <div> with an onclick handler."
    )
    // etc


    It looks ugly (it would look a lot better using lisp syntax) but it
    seems to work OK. Also, it's a bit shorter than the generated HTML. Plus
    you can write out the event handlers directly (which was the main reason
    to function calls)

    I could post the (not very well tested, but fairly simple) supporting
    code if anyone's interested.

    Joost.
     
    Joost Diepenmaat, Feb 5, 2008
    #11
    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. Andreas Zita

    Annoying HttpModule/QueryString Problem

    Andreas Zita, Nov 29, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    525
    Andreas Zita
    Nov 29, 2005
  2. Daniel Fisher\(lennybacon\)

    Re: Annoying HttpModule/QueryString Problem

    Daniel Fisher\(lennybacon\), Nov 30, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    594
    Daniel Fisher\(lennybacon\)
    Nov 30, 2005
  3. Joe
    Replies:
    2
    Views:
    1,786
  4. TheKeith
    Replies:
    15
    Views:
    6,844
    Denise Enck
    Jun 30, 2003
  5. Paul Watt

    Annoying problem with spacer

    Paul Watt, Oct 4, 2005, in forum: HTML
    Replies:
    20
    Views:
    964
    Matt Probert
    Oct 5, 2005
Loading...

Share This Page