node.innerHTML = '...' not working in IE

Discussion in 'Javascript' started by Joel Byrd, Nov 17, 2005.

  1. Joel Byrd

    Joel Byrd Guest

    I am having this ridiculous problem of trying to set the innerHTML of a
    div node. It works in all other browsers, but internet explorer is
    giving me an "Unknown runtime error". This is actually in the context
    of developing an auto-suggest (basically reverse-engineering Google
    Suggest), but I don't see how any of the other code has anything to do
    with it. I *pretty sure* that I've narrowed it down to 1 line (the
    line on which the javascript error is being thrown. The following is
    the line that's throwing the javascript error:

    [-----------------------------------------------------

    document.getElementById('suggest_box').innerHTML = listings;

    -----------------------------------------------------]

    where "listings" is html code gotten using the XmlHttpRequest object on
    a remote PHP file. I do an "alert(listings)" and a
    "alert(document.getElementById('suggest_box').innerHTML)" right before
    the error line and sure enough, the listings is showing that it is
    indeed set, and the suggest_box node indeed exists. My brain is fried
    from trying to figure this thing out. I would love any
    suggestions/comments anybody has about this. Thanks!
    Joel Byrd, Nov 17, 2005
    #1
    1. Advertising

  2. Joel Byrd

    Evertjan. Guest

    Joel Byrd wrote on 17 nov 2005 in comp.lang.javascript:

    > I am having this ridiculous problem of trying to set the innerHTML of a
    > div node. It works in all other browsers, but internet explorer is
    > giving me an "Unknown runtime error". This is actually in the context
    > of developing an auto-suggest (basically reverse-engineering Google
    > Suggest), but I don't see how any of the other code has anything to do
    > with it. I *pretty sure* that I've narrowed it down to 1 line (the
    > line on which the javascript error is being thrown. The following is
    > the line that's throwing the javascript error:
    >
    > [-----------------------------------------------------
    >
    > document.getElementById('suggest_box').innerHTML = listings;
    >
    > -----------------------------------------------------]
    >
    > where "listings" is html code gotten using the XmlHttpRequest object on
    > a remote PHP file. I do an "alert(listings)" and a
    > "alert(document.getElementById('suggest_box').innerHTML)" right before
    > the error line and sure enough, the listings is showing that it is
    > indeed set, and the suggest_box node indeed exists. My brain is fried
    > from trying to figure this thing out. I would love any
    > suggestions/comments anybody has about this. Thanks!


    perhaps "listings" is not a string but an object?

    Could you try:

    document.getElementById('suggest_box').innerHTML = '' + listings;


    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
    Evertjan., Nov 17, 2005
    #2
    1. Advertising

  3. Joel Byrd

    Joel Byrd Guest

    No, I've actually tried that.

    Evertjan. wrote:
    > Joel Byrd wrote on 17 nov 2005 in comp.lang.javascript:
    >
    > > I am having this ridiculous problem of trying to set the innerHTML of a
    > > div node. It works in all other browsers, but internet explorer is
    > > giving me an "Unknown runtime error". This is actually in the context
    > > of developing an auto-suggest (basically reverse-engineering Google
    > > Suggest), but I don't see how any of the other code has anything to do
    > > with it. I *pretty sure* that I've narrowed it down to 1 line (the
    > > line on which the javascript error is being thrown. The following is
    > > the line that's throwing the javascript error:
    > >
    > > [-----------------------------------------------------
    > >
    > > document.getElementById('suggest_box').innerHTML = listings;
    > >
    > > -----------------------------------------------------]
    > >
    > > where "listings" is html code gotten using the XmlHttpRequest object on
    > > a remote PHP file. I do an "alert(listings)" and a
    > > "alert(document.getElementById('suggest_box').innerHTML)" right before
    > > the error line and sure enough, the listings is showing that it is
    > > indeed set, and the suggest_box node indeed exists. My brain is fried
    > > from trying to figure this thing out. I would love any
    > > suggestions/comments anybody has about this. Thanks!

    >
    > perhaps "listings" is not a string but an object?
    >
    > Could you try:
    >
    > document.getElementById('suggest_box').innerHTML = '' + listings;
    >
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Replace all crosses with dots in my emailaddress)
    Joel Byrd, Nov 17, 2005
    #3
  4. Joel Byrd

    VK Guest

    Joel Byrd wrote:
    > I am having this ridiculous problem of trying to set the innerHTML of a
    > div node. It works in all other browsers, but internet explorer is
    > giving me an "Unknown runtime error". This is actually in the context
    > of developing an auto-suggest (basically reverse-engineering Google
    > Suggest), but I don't see how any of the other code has anything to do
    > with it. I *pretty sure* that I've narrowed it down to 1 line (the
    > line on which the javascript error is being thrown. The following is
    > the line that's throwing the javascript error:
    >
    > [-----------------------------------------------------
    >
    > document.getElementById('suggest_box').innerHTML = listings;
    >
    > -----------------------------------------------------]
    >
    > where "listings" is html code gotten using the XmlHttpRequest object on
    > a remote PHP file. I do an "alert(listings)" and a
    > "alert(document.getElementById('suggest_box').innerHTML)" right before
    > the error line and sure enough, the listings is showing that it is
    > indeed set, and the suggest_box node indeed exists. My brain is fried
    > from trying to figure this thing out. I would love any
    > suggestions/comments anybody has about this. Thanks!


    By any chance - maybe your "listings" contains HTML code for a table?
    VK, Nov 17, 2005
    #4
  5. Joel Byrd wrote:

    > I am having this ridiculous problem of trying to set the innerHTML of a
    > div node. It works in all other browsers, but internet explorer is
    > giving me an "Unknown runtime error".

    [snip]

    > where "listings" is html code gotten using the XmlHttpRequest object on
    > a remote PHP file. I do an "alert(listings)" and a
    > "alert(document.getElementById('suggest_box').innerHTML)" right before
    > the error line and sure enough, the listings is showing that it is
    > indeed set, and the suggest_box node indeed exists.


    Could you post the actual HTML contained within "listings" so we can
    see what you are trying to put into the innerHTML.

    Julian
    Julian Turner, Nov 17, 2005
    #5
  6. Joel Byrd

    Joel Byrd Guest

    Hey, guys - I've actually gotten even closer to solving the problem,
    and I found out it has nothing to do with the contents of "listings"
    (in fact, the same javascript error is thrown when I try to set the
    suggest_box div to some hard-coded text, e.g.
    "document.getElementById('suggest_box').innerHTML = 'text'; "). I
    traced the problem back to where I am defining the parent node of the
    textbox for which I want to use the suggest box on. Basically, here's
    what I'm trying to do. I want to place the suggest_box div node right
    next to the textbox so that it will display in the right spot. So
    first, I create the suggest_box div:

    [------------------------------------------
    var suggest_div = document.createElement('div');
    suggest_div.id = 'suggest_box';
    --------------------------------------------]

    Next, I want to place this right next to the textbox - so basically I
    need to make the suggest_box div a sibling of the textbox and use the
    insertBefore() method to insert the suggest_box div right before the
    textbox. Before I do that, I must first find the parent of the
    textbox, so that I can do a "parent.insertBefore(suggest_div,
    textBox)". Now, apparently, something is happening at the line where I
    do the insertBefore, because before that line, I can successfully set
    the innerHTML of the suggest_box div, but after that line, it throws
    the error when I try to. Ok, so the code (with some testing lines)
    looks like the following:

    [------------------------------------------------------------------------
    CODE SAMPLE 1

    1 var suggest_div = document.createElement('div');
    2 suggest_div.id = 'suggest_box';
    3
    4 var textBox = document.getElementById(input_box_id);
    5 var parent = textBox.parentNode;
    6
    7 suggest_div.innerHTML = 'test before'; //this line works.
    8 alert(parent.innerHTML);
    9 parent.insertBefore(suggest_div, textBox); //apparently something
    happens here so that...
    10 suggest_div.innerHTML = 'test after'; //this line does *not* work
    (throws "Unknown runtime error").
    -------------------------------------------------------------------------]

    Another clue I can give you is that if I change the actual page html a
    little bit, then it does work. I'll give you a case in which it does
    not work and a case in which it does. Using the following html, the
    code does NOT work ("Unknown runtime error" thrown on line 10 in CODE
    SAMPLE 1):

    [-------------------------------------------------------------------------
    CODE SAMPLE 2

    1 <body>
    2 some text.

    3 <p>
    4 <input name="q" type="text" id="q" size="50">
    5 </p>
    6
    7 aaa
    8
    9 </body>
    --------------------------------------------------------------------------]

    But, using the following html (adding a paragraph within the paragraph
    that the textbox is in), it DOES work:

    [--------------------------------------------------------------------------
    CODE SAMPLE 3

    1 <body>
    2 some text.
    3
    4 <p>
    5 <p>asdf</p>
    6 <input name="q" type="text" id="q" size="50">
    7 </p>
    8
    9 aaa
    10
    11 </body>
    ---------------------------------------------------------------------------]

    But note also that while this works, the alert(parent.innerHTML) on
    line 8 in CODE SAMPLE 1 shows that the innerHTML of the textbox's
    parent node is:

    [-------------------------------------
    some text.
    <P>
    <P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
    <P></P>aaa
    -----------------------------------------]

    This would mean that the parent node is, in fact, the body tag node,
    but that's not true (the parent node of the textbox should be its
    surrounding paragraph). In fact, it's technically improper to nest a
    paragraph within a paragraph anyway, but apparently, this works in IE
    (by the way, it still works in the other browsers, too). One final
    note is that the code also works in IE if I surround the textbox in a
    div. Sorry for the long post, and thanks for the help so far -
    hopefully someone has some insight into this javascript stuff and IE's
    quirkiness (or my bad programming). Thanks!

    Joel
    Joel Byrd, Nov 17, 2005
    #6
  7. Joel Byrd

    VK Guest

    (please look at the previous post for code samples)

    You mistake was to consider parent/child relationships as a refraction
    of the page layout, but they are not.

    For example

    <form>
    <formset>
    <input>

    are in parent<>child relationship as sub/sup elements of one big
    structure

    but:
    <form>
    <div>
    <input>

    <div> is not a child of <form> and it is not the parent of <input>. It
    is totally alien buddy just happened to stay between parent and child.

    In 5 min thinking I can tell that what you're trying to do is not
    possible at all exept maybe on IE using its proprietary
    insertAdjacentElement() method:

    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <script type="text/javascript">
    function test() {
    var d = document.createElement('DIV');
    d.id = 'suggestBox';
    d.innerHTML = '<i>Search suggestions...</i>';
    var q = document.getElementById('q');
    q.insertAdjacentElement('afterEnd',d);
    }
    </script>
    </head>

    <body onload="test()">

    <p>Lorem ipsum 1</p>

    <form name="form01" method="post" action="">
    <input type="text" name="q" size="50" autocomplete="off">
    </form>

    <p>Lorem ipsum 2</p>

    </body>
    </html>

    After 20-30 mins of thinking I may possibly come to some hacking
    solution for other browsers. But why? Why don't you place an empty
    <span> element after your textbox? That would solve the problem in a
    very easy and universal way:

    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <script type="text/javascript">
    function test() {
    document.getElementById('suggestBox').innerHTML =
    'Why not like this?';
    }
    </script>
    </head>

    <body onload="test()">

    <p>Lorem ipsum 1</p>

    <form name="form01" method="post" action="">
    <input type="text" name="q" size="50" autocomplete="off">
    <span id="suggestBox">&nbsp;</span>
    </form>

    <p>Lorem ipsum 2</p>

    </body>
    </html>
    VK, Nov 17, 2005
    #7
  8. Joel Byrd

    Joel Byrd Guest

    VK,

    Thank you for your commnents. In response, I have a question for you
    and a comment. First, if the parent/child relationships are not a
    refraction of the page layout (I assume this means like a direct
    reflection of), then what are they, exactly - how are they defined?
    And if the relationship is defined in a fickle way, then it seems that
    using the "parentNode" property of a node would never really be useful
    since you can't know exactly what the parentNode is referring to.

    And to comment on your suggestion, I *can* simply add the suggestBox
    span element after the inputbox. In fact, I have done it and it works
    with no problems. But what I'm trying to do is make this code portable
    and easy to use (idiot-proof), so that someone can just make one
    function call, passing the id of the textbox as one of the parameters;
    and all the rest of the work (like adding the suggestBox span [or div])
    is automatically done for them so that everytime someone wants to use
    this, they don't have to manually insert the span themselves.

    Joel



    VK wrote:
    > (please look at the previous post for code samples)
    >
    > You mistake was to consider parent/child relationships as a refraction
    > of the page layout, but they are not.
    >
    > For example
    >
    > <form>
    > <formset>
    > <input>
    >
    > are in parent<>child relationship as sub/sup elements of one big
    > structure
    >
    > but:
    > <form>
    > <div>
    > <input>
    >
    > <div> is not a child of <form> and it is not the parent of <input>. It
    > is totally alien buddy just happened to stay between parent and child.
    >
    > In 5 min thinking I can tell that what you're trying to do is not
    > possible at all exept maybe on IE using its proprietary
    > insertAdjacentElement() method:
    >
    > <html>
    > <head>
    > <title>Test</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <script type="text/javascript">
    > function test() {
    > var d = document.createElement('DIV');
    > d.id = 'suggestBox';
    > d.innerHTML = '<i>Search suggestions...</i>';
    > var q = document.getElementById('q');
    > q.insertAdjacentElement('afterEnd',d);
    > }
    > </script>
    > </head>
    >
    > <body onload="test()">
    >
    > <p>Lorem ipsum 1</p>
    >
    > <form name="form01" method="post" action="">
    > <input type="text" name="q" size="50" autocomplete="off">
    > </form>
    >
    > <p>Lorem ipsum 2</p>
    >
    > </body>
    > </html>
    >
    > After 20-30 mins of thinking I may possibly come to some hacking
    > solution for other browsers. But why? Why don't you place an empty
    > <span> element after your textbox? That would solve the problem in a
    > very easy and universal way:
    >
    > <html>
    > <head>
    > <title>Test</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <script type="text/javascript">
    > function test() {
    > document.getElementById('suggestBox').innerHTML =
    > 'Why not like this?';
    > }
    > </script>
    > </head>
    >
    > <body onload="test()">
    >
    > <p>Lorem ipsum 1</p>
    >
    > <form name="form01" method="post" action="">
    > <input type="text" name="q" size="50" autocomplete="off">
    > <span id="suggestBox">&nbsp;</span>
    > </form>
    >
    > <p>Lorem ipsum 2</p>
    >
    > </body>
    > </html>
    Joel Byrd, Nov 17, 2005
    #8
  9. VK wrote:

    > (please look at the previous post for code samples)
    >
    > You mistake was to consider parent/child relationships as a refraction
    > of the page layout, but they are not.
    >
    > For example
    >
    > <form>
    > <formset>
    > <input>
    >
    > are in parent<>child relationship as sub/sup elements of one big
    > structure
    >
    > but:
    > <form>
    > <div>
    > <input>
    >
    > <div> is not a child of <form> and it is not the parent of <input>. It
    > is totally alien buddy just happened to stay between parent and child.


    I back your pardon? You must have a very strange definition of parent and
    child because the `div' element (considering the respective end tags and
    required content is added) _is_ a child element node of the `form' element
    and the `input' element _is_ its child node, while the `div' element _is_
    the parent element node of the `input' element and the `form' element _is_
    its parent element node.


    PointedEars
    Thomas 'PointedEars' Lahn, Nov 17, 2005
    #9
  10. Joel Byrd

    Joel Byrd Guest

    Ok, I just had a breakthrough. In your comments, VK, you said to use a
    span tag for the suggestBox. I had been using a div. Well, I just
    tried creating a suggestBox *span* instead of div, and guess what? It
    works! (well, in Opera I'm having a little XmlHttpRequest compatability
    problem [even using Sarissa - maybe I need a different version], but
    that's niether here nor there...). Now, I'm still curious as to why
    this would be the case. Apparently, there's more of a difference
    between span and div than just a line break.

    Joel
    Joel Byrd, Nov 17, 2005
    #10
  11. VK wrote:
    <snip>
    > You mistake was to consider parent/child relationships as a
    > refraction of the page layout, but they are not.


    "Page layout"?

    > For example
    >
    > <form>
    > <formset>


    You mean 'fieldset'?

    > <input>
    >
    > are in parent<>child relationship as sub/sup elements
    > of one big structure
    >
    > but:
    > <form>
    > <div>
    > <input>
    >
    > <div> is not a child of <form>


    Yes it is.

    > and it is not the parent of <input>.


    Yes it is.

    > It is totally alien buddy just happened to stay
    > between parent and child.


    More utter nonsense from the confused mind of VK.

    > In 5 min thinking I can tell that what you're trying to do
    > is not possible at all exept maybe on IE using its proprietary
    > insertAdjacentElement() method:
    >
    > <html>
    > <head>
    > <title>Test</title>
    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">
    > <script type="text/javascript">
    > function test() {
    > var d = document.createElement('DIV');
    > d.id = 'suggestBox';
    > d.innerHTML = '<i>Search suggestions...</i>';
    > var q = document.getElementById('q');
    > q.insertAdjacentElement('afterEnd',d);
    > }
    > </script>
    > </head>
    >
    > <body onload="test()">
    >
    > <p>Lorem ipsum 1</p>
    >
    > <form name="form01" method="post" action="">
    > <input type="text" name="q" size="50" autocomplete="off">
    > </form>
    >
    > <p>Lorem ipsum 2</p>
    >
    > </body>
    > </html>
    >
    > After 20-30 mins of thinking I may possibly come to
    > some hacking solution for other browsers.

    <snip>

    I realise that thinking is not your strong suite but you don't have to
    be that familiar with the DOM to see:-

    q.parentNode.insertBefore(d, q.nextSibling);

    - as the obvious DOM standard (and so much wider supported) alternative
    to the IE only:-

    q.insertAdjacentElement('afterEnd',d);

    (so that is an extra 6 characters to support every dynamic DOM standard
    browser including IE 5+)

    And the simpler:-

    q.parentNode.appendChild(d);

    - as sufficient in the context of your original.

    Richard.
    Richard Cornford, Nov 17, 2005
    #11
  12. Joel Byrd wrote:
    > Hey, guys - I've actually gotten even closer to solving
    > the problem,


    And you would get closer still if you posted a working test case that
    demonstrated the problem instead of incomplete fragments of code without
    any indication of how the javascript is interacting with the HTML.

    > .... Basically, here's what I'm trying to do. I want to
    > place the suggest_box div node right next to the textbox so
    > that it will display in the right spot. So first, I create
    > the suggest_box div:
    >
    > [------------------------------------------
    > var suggest_div = document.createElement('div');
    > suggest_div.id = 'suggest_box';
    > --------------------------------------------]
    >
    > Next, I want to place this right next to the textbox - so
    > basically I need to make the suggest_box div a sibling of
    > the textbox and use the insertBefore() method to insert the
    > suggest_box div right before the textbox. Before I do that,
    > I must first find the parent of the textbox, so that I can
    > do a "parent.insertBefore(suggest_div, textBox)". Now,
    > apparently, something is happening at the line where I do
    > the insertBefore, because before that line, I can successfully
    > set the innerHTML of the suggest_box div, but after that line,
    > it throws the error when I try to.


    So why not set the inner HTML before you insert the node (or use W3C DOM
    node creation/manipulation methods to create the contents of the DIV)?

    > Ok, so the code (with some testing
    > lines) looks like the following:
    >
    > [-----------------------------------------------------------
    > CODE SAMPLE 1
    >
    > 1 var suggest_div = document.createElement('div');
    > 2 suggest_div.id = 'suggest_box';
    > 3
    > 4 var textBox = document.getElementById(input_box_id);
    > 5 var parent = textBox.parentNode;
    > 6
    > 7 suggest_div.innerHTML = 'test before'; //this line works.
    > 8 alert(parent.innerHTML);
    > 9 parent.insertBefore(suggest_div, textBox); //apparently
    > something happens here so that...
    > 10 suggest_div.innerHTML = 'test after'; //this line does *not*
    > work (throws "Unknown runtime error").
    > -------------------------------------------------------------]
    >
    > Another clue I can give you is that if I change the actual page
    > html a little bit, then it does work. I'll give you a case in
    > which it does not work and a case in which it does. Using the
    > following html, the code does NOT work ("Unknown runtime error"
    > thrown on line 10 in CODE SAMPLE 1):
    >
    > [-------------------------------------------------------------
    > CODE SAMPLE 2
    >
    > 1 <body>
    > 2 some text.
    > 3 <p>
    > 4 <input name="q" type="text" id="q" size="50">
    > 5 </p>


    The HTML P element is not allowed to contain block level elements, and
    DIV is a block level element. As a browser should not let you insert a
    DIV as a child of a P element it is not that surprising if things stop
    working properly when you attempt to do so.

    > 6
    > 7 aaa
    > 8
    > 9 </body>
    > -------------------------------------------------------------]
    >
    > But, using the following html (adding a paragraph within the
    > paragraph that the textbox is in), it DOES work:
    >
    > [------------------------------------------------------------
    > CODE SAMPLE 3
    >
    > 1 <body>
    > 2 some text.
    > 4 <p>
    > 5 <p>asdf</p>
    > 6 <input name="q" type="text" id="q" size="50">
    > 7 </p>


    The HTML P element is not allowed to contain block level elements, and
    it is a block level element itself so it cannot contain a P element. The
    P element also has an optional closing tag, which may be implied by the
    context of its use. As a P element may not contain a P element an
    opening P tag encountered within a P element will imply that P element's
    (optional) closing tag.

    Thus the HTML rules imply a closing P tag just following the first
    opening P tag above. The INPUT is the child of the BODY element and the
    two P elements are its preceding siblings.

    > 8
    > 9 aaa
    > 10
    > 11 </body>
    > ----------------------------------------------------------------------

    -----]
    >
    > But note also that while this works, the alert(parent.innerHTML)
    > on line 8 in CODE SAMPLE 1 shows that the innerHTML of the
    > textbox's parent node is:
    >
    > [-------------------------------------
    > some text.
    > <P>
    > <P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
    > <P></P>aaa


    Yes, that is what you would expect, except for the P element after the
    INPUT, but that is just a manifestation of error-correction in response
    to encountering an unopened P closing tag.

    > -----------------------------------------]
    >
    > This would mean that the parent node is, in fact, the
    > body tag node, but that's not true (the parent node of
    > the textbox should be its surrounding paragraph).


    No, that is true and the mark-up you wrote is asking for the INPUT to be
    outside of any P elements and a child of the BODY (and it is).


    > In fact, it's technically improper to nest a
    > paragraph within a paragraph anyway,


    Yes it is, and since the closing P tag is optional it is actually
    impossible in HTML as any opening P tag implies the closing of the
    already open one.

    > but apparently, this works in IE


    Isn't your entire problem that IE doesn't work here?

    > (by the way, it still works in the other browsers, too).
    > One final note is that the code also works in IE if I
    > surround the textbox in a div.


    DIV elements are allowed to contain block level elements (including DIV
    and P).


    > Sorry for the long post, and thanks for the help so far -
    > hopefully someone has some insight into this javascript
    > stuff and IE's quirkiness (or my bad programming). Thanks!


    I think you would find the task more productive if you only attempted to
    create validly structured DOMs, then the browsers don't have an excuse
    for complaining.

    Richard.
    Richard Cornford, Nov 17, 2005
    #12
  13. Joel Byrd wrote:
    <snip>
    > ... . Well, I just tried creating a suggestBox *span*
    > instead of div, and guess what? It works! ... Now, I'm
    > still curious as to why this would be the case. Apparently,
    > there's more of a difference between span and div than just
    > a line break.


    Virtually the only difference between the semantically neutral DIV and
    SPAN elements is that DIV is a block level element and SPAN is an inline
    element. P elements may not contain DIV elements in valid HTML, but they
    may contain all inline elements.

    Apart form the BR element there is not really any such thing as a line
    break, just different laying-out rules applying to block and inline
    elements.

    Incidentally INPUT is an inline element, and generally wherever you can
    have one inline element you can place another. So if you want to create
    a sibling for the INPUT it would be much safer to create a SPAN (or some
    other appropriate inline element (the I, BOLD, STRONG, etc elements are
    also inline).

    Incidentally, treat anything that VK says on technical subjects (when
    you can actually deduce meaning from it at all) with more than a large
    pinch of salt. It will save you much trouble in the long run.

    Richard.
    Richard Cornford, Nov 17, 2005
    #13
  14. Joel Byrd

    Joel Byrd Guest

    Richard,

    Your comments were extremely helpful and in fact got at the core of my
    problem. I did not realize that a p element was not allowed to contain
    a block level element (but it is somewhat intuitive). Now, my problem
    is solved and I've definately learned some things from it - thanks a
    lot!

    Joel



    Richard Cornford wrote:
    > Joel Byrd wrote:
    > > Hey, guys - I've actually gotten even closer to solving
    > > the problem,

    >
    > And you would get closer still if you posted a working test case that
    > demonstrated the problem instead of incomplete fragments of code without
    > any indication of how the javascript is interacting with the HTML.
    >
    > > .... Basically, here's what I'm trying to do. I want to
    > > place the suggest_box div node right next to the textbox so
    > > that it will display in the right spot. So first, I create
    > > the suggest_box div:
    > >
    > > [------------------------------------------
    > > var suggest_div = document.createElement('div');
    > > suggest_div.id = 'suggest_box';
    > > --------------------------------------------]
    > >
    > > Next, I want to place this right next to the textbox - so
    > > basically I need to make the suggest_box div a sibling of
    > > the textbox and use the insertBefore() method to insert the
    > > suggest_box div right before the textbox. Before I do that,
    > > I must first find the parent of the textbox, so that I can
    > > do a "parent.insertBefore(suggest_div, textBox)". Now,
    > > apparently, something is happening at the line where I do
    > > the insertBefore, because before that line, I can successfully
    > > set the innerHTML of the suggest_box div, but after that line,
    > > it throws the error when I try to.

    >
    > So why not set the inner HTML before you insert the node (or use W3C DOM
    > node creation/manipulation methods to create the contents of the DIV)?
    >
    > > Ok, so the code (with some testing
    > > lines) looks like the following:
    > >
    > > [-----------------------------------------------------------
    > > CODE SAMPLE 1
    > >
    > > 1 var suggest_div = document.createElement('div');
    > > 2 suggest_div.id = 'suggest_box';
    > > 3
    > > 4 var textBox = document.getElementById(input_box_id);
    > > 5 var parent = textBox.parentNode;
    > > 6
    > > 7 suggest_div.innerHTML = 'test before'; //this line works.
    > > 8 alert(parent.innerHTML);
    > > 9 parent.insertBefore(suggest_div, textBox); //apparently
    > > something happens here so that...
    > > 10 suggest_div.innerHTML = 'test after'; //this line does *not*
    > > work (throws "Unknown runtime error").
    > > -------------------------------------------------------------]
    > >
    > > Another clue I can give you is that if I change the actual page
    > > html a little bit, then it does work. I'll give you a case in
    > > which it does not work and a case in which it does. Using the
    > > following html, the code does NOT work ("Unknown runtime error"
    > > thrown on line 10 in CODE SAMPLE 1):
    > >
    > > [-------------------------------------------------------------
    > > CODE SAMPLE 2
    > >
    > > 1 <body>
    > > 2 some text.
    > > 3 <p>
    > > 4 <input name="q" type="text" id="q" size="50">
    > > 5 </p>

    >
    > The HTML P element is not allowed to contain block level elements, and
    > DIV is a block level element. As a browser should not let you insert a
    > DIV as a child of a P element it is not that surprising if things stop
    > working properly when you attempt to do so.
    >
    > > 6
    > > 7 aaa
    > > 8
    > > 9 </body>
    > > -------------------------------------------------------------]
    > >
    > > But, using the following html (adding a paragraph within the
    > > paragraph that the textbox is in), it DOES work:
    > >
    > > [------------------------------------------------------------
    > > CODE SAMPLE 3
    > >
    > > 1 <body>
    > > 2 some text.
    > > 4 <p>
    > > 5 <p>asdf</p>
    > > 6 <input name="q" type="text" id="q" size="50">
    > > 7 </p>

    >
    > The HTML P element is not allowed to contain block level elements, and
    > it is a block level element itself so it cannot contain a P element. The
    > P element also has an optional closing tag, which may be implied by the
    > context of its use. As a P element may not contain a P element an
    > opening P tag encountered within a P element will imply that P element's
    > (optional) closing tag.
    >
    > Thus the HTML rules imply a closing P tag just following the first
    > opening P tag above. The INPUT is the child of the BODY element and the
    > two P elements are its preceding siblings.
    >
    > > 8
    > > 9 aaa
    > > 10
    > > 11 </body>
    > > ----------------------------------------------------------------------

    > -----]
    > >
    > > But note also that while this works, the alert(parent.innerHTML)
    > > on line 8 in CODE SAMPLE 1 shows that the innerHTML of the
    > > textbox's parent node is:
    > >
    > > [-------------------------------------
    > > some text.
    > > <P>
    > > <P>asdf</P><INPUT id=q size=50 name=q autocomplete="off">
    > > <P></P>aaa

    >
    > Yes, that is what you would expect, except for the P element after the
    > INPUT, but that is just a manifestation of error-correction in response
    > to encountering an unopened P closing tag.
    >
    > > -----------------------------------------]
    > >
    > > This would mean that the parent node is, in fact, the
    > > body tag node, but that's not true (the parent node of
    > > the textbox should be its surrounding paragraph).

    >
    > No, that is true and the mark-up you wrote is asking for the INPUT to be
    > outside of any P elements and a child of the BODY (and it is).
    >
    >
    > > In fact, it's technically improper to nest a
    > > paragraph within a paragraph anyway,

    >
    > Yes it is, and since the closing P tag is optional it is actually
    > impossible in HTML as any opening P tag implies the closing of the
    > already open one.
    >
    > > but apparently, this works in IE

    >
    > Isn't your entire problem that IE doesn't work here?
    >
    > > (by the way, it still works in the other browsers, too).
    > > One final note is that the code also works in IE if I
    > > surround the textbox in a div.

    >
    > DIV elements are allowed to contain block level elements (including DIV
    > and P).
    >
    >
    > > Sorry for the long post, and thanks for the help so far -
    > > hopefully someone has some insight into this javascript
    > > stuff and IE's quirkiness (or my bad programming). Thanks!

    >
    > I think you would find the task more productive if you only attempted to
    > create validly structured DOMs, then the browsers don't have an excuse
    > for complaining.
    >
    > Richard.
    Joel Byrd, Nov 18, 2005
    #14
  15. Joel Byrd

    Joel Byrd Guest

    Alright, alright, one last thing. I am using javascript to determine
    the placement of the suggest box in relation to the input box so that
    it ends up right below it. The code worked perfectly until I put the
    input box inside a table cell. Any ideas why? The following is the
    code I'm using:

    [the style defined for the suggest box]:

    #suggest_box {
    border: 1px solid #000000;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    position: absolute;
    background-color: #FFFFFF;
    display: none;
    }

    [and the code that sets the size and placement]:

    function addSuggestBoxDiv() {
    var suggest_div = document.createElement('span');
    suggest_div.id = 'suggest_box';

    var textBox = document.getElementById(input_box_id);
    var parent = textBox.parentNode;

    parent.insertBefore(suggest_div, textBox);

    var l, t, w, h;

    with (textBox) {
    l = offsetLeft;
    t = offsetTop;
    w = offsetWidth;
    h = offsetHeight;

    //Tweek position and size according to browser.
    if (isIE) { //Internet Explorer
    l += 10;
    t += 15;
    w -= 5;
    } else if (isOpera) { //Opera
    l += 3;
    t -= 3;
    w -= 8;
    } else { //Gecko-based (like Netscape and Firefox)
    w -= 2;
    }
    }

    with (element('suggest_box').style) {
    top = (t + h + top_offset) + "px";
    left = (l + left_offset) + "px";
    width = (w + extra_width) + "px";
    }
    }//end function addSuggestBoxDiv

    I know that absolute positioning means that it's positioned relative
    (yeah, kinda contradictory) to its "containing block". First, what
    exactly defines a containing block (I know at least that a div would be
    one)? Second, are the offsetLeft, offsetTop, offsetWidth and
    offsetHeight properties of a node defined by the same rules? If not, I
    know this is my problem. And if this is the problem, are there any
    solutions for finding the correct positioning of the suggest box in all
    cases? Again, I know that I can just set these manually for a given
    page, but I'm trying to make this portable so that it can be used in
    any page (and maybe to some degree this is just not realistic).
    Thanks, guys!
    Joel Byrd, Nov 18, 2005
    #15
  16. Joel Byrd

    VK Guest

    Joel Byrd wrote:
    > Alright, alright, one last thing. I am using javascript to determine
    > the placement of the suggest box in relation to the input box so that
    > it ends up right below it. The code worked perfectly until I put the
    > input box inside a table cell. Any ideas why? The following is the
    > code I'm using:


    <http://www.mattkruse.com/javascript/anchorposition/> and similar can
    give you a source code you may include in your solution.

    Briefly: what you are doing is one of most difficult tasks on a fully
    DOM-compliant browser. Namely you need a method with the behavior like:
    "Shut up for a sec about your stupid DOM, take what I gave you and put
    where I told you! Quickly!"

    IE has full set of such methods because Big Brother loves you :)
    It has the above mentioned insertAdjacentElement. If you want to make
    your code pseudo-standard looking you can hack the situation by using
    (again IE only):
    q.replaceNode(d);
    The code above is totally DOM-wise wrong and meaningless but it works
    (on IE) and it mimics the "standard compliance".

    >From the other side you cannot expect such methods from W3C, as you

    cannot expect and old nane dancing jig.

    All this ornithology- and reproduction-related stuff (nodes, parents,
    children) is not intended at all to be used on a rather chaotic HTML
    page. (And nearly any nice design-targeted page is rather chaotic in
    reference to its internal structure).

    These properties/methods are made for strict *XML* structures, not
    HTML. And you do not have official methods (at least I 'm not aware of
    any) to "add more chaos to the chaos".

    I said what I think (it does not mean that it is all true) and I
    suggest you to visit the provided link as well as to look for Matt Kruz
    postings here - once he was doing an universal element position
    locator, I just lost the link.
    VK, Nov 18, 2005
    #16
  17. VK wrote:

    > Joel Byrd wrote:
    >> Alright, alright, one last thing. I am using javascript to determine
    >> the placement of the suggest box in relation to the input box so that
    >> it ends up right below it. The code worked perfectly until I put the
    >> input box inside a table cell. Any ideas why? The following is the
    >> code I'm using:

    >
    > <http://www.mattkruse.com/javascript/anchorposition/> and similar can
    > give you a source code you may include in your solution.
    >
    > Briefly: what you are doing is one of most difficult tasks on a fully
    > DOM-compliant browser. Namely you need a method with the behavior like:
    > "Shut up for a sec about your stupid DOM, take what I gave you and put
    > where I told you! Quickly!"


    Not true. Thanks to positioning via CSS, the textual arrangement of
    elements in the source code does not need to reflect (or be reflected
    by) the graphical arrangement of rendered elements in the document.

    > IE has full set of such methods because Big Brother loves you :)
    > It has the above mentioned insertAdjacentElement.


    IE's insertAdjacentElement() can only insert elements before or after
    other elements in the DOM tree which is what interface methods of the
    W3C DOM also can. It definitely cannot insert elements graphically
    below other elements as the OP requested and as you pretend here.

    <http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacentelement.asp>

    > If you want to make
    > your code pseudo-standard looking you can hack the situation by using
    > (again IE only):
    > q.replaceNode(d);
    > The code above is totally DOM-wise


    FYI: The term "DOM" (Document Object Model) is not and has never been
    restricted to the W3C DOM.

    > wrong and meaningless


    It is error-prone.

    > but it works (on IE)

    ^^^^^
    Of course, it is IE proprietary.

    > and it mimics the "standard compliance".


    This statement of yours has exactly nothing to do with the OPs request.

    > From the other side you cannot expect such methods from W3C, as you
    > cannot expect and old nane dancing jig.


    If you explained what you expect q.replaceNode(d) to do,
    one would have at least the opportunity to prove you wrong.

    > All this ornithology- and reproduction-related stuff


    LOL

    > (nodes, parents, children) is not intended at all to be used on a rather
    > chaotic HTML page. [...]
    > These properties/methods are made for strict *XML* structures, not
    > HTML.


    Not true. There is the W3C DOM Level 2 HTML Specification explicitely
    for HTML 4.01 and XHTML 1.0 documents. That Specification defines
    interfaces that implement interfaces defined in the W3C DOM Level 2
    Core Specification.

    > [...] (And nearly any nice design-targeted page is rather chaotic in
    > reference to its internal structure).


    That may be so in documents of incompetent authors. Generally, that is not
    true either. Well-designed documents are created in a way that they are
    usable both with and without CSS (that goes for other techniques as well).

    > And you do not have official methods (at least I 'm not aware of
    > any) to "add more chaos to the chaos".
    >
    > I said what I think


    You mean: what you understood of what you know which, _sadly_, is not much.


    PointedEars
    Thomas 'PointedEars' Lahn, Nov 18, 2005
    #17
    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. Replies:
    0
    Views:
    1,411
  2. Tjerk Wolterink
    Replies:
    2
    Views:
    1,403
    Dimitre Novatchev
    Aug 24, 2006
  3. john
    Replies:
    2
    Views:
    238
  4. sonic
    Replies:
    5
    Views:
    269
    Randy Webb
    Jul 11, 2006
  5. martymix

    innerHTML text node whitespace question

    martymix, May 1, 2007, in forum: Javascript
    Replies:
    9
    Views:
    115
    -Lost
    May 2, 2007
Loading...

Share This Page