When writing html table to div, the data from table is unformatted

Discussion in 'Javascript' started by sil, Feb 4, 2010.

  1. sil

    sil Guest

    Hi All,

    I am new to HTML and JavaScript.

    I am using Javascript to write an HTML table into an HTML div.
    However, the data from the table appears, inside the DIV, like one
    long line. When I am using the same Javascript code to write the same
    table to a HTML page the table appears OK.
    The question is: Are there some specific things that I should do when
    writing HTML code to a DIV versus writing HTML code to an HTML page?
    It looks like inside a DIV the HTML table formatting is gone, only the
    data is present.

    Thanks in advance for any help on this matter. See snippet of my code
    below:

    function wDoc( wtxt )
    {
    document.getElementById('profile').innerHTML+=wtxt;
    }

    function wDocClear()
    {
    document.getElementById('profile').innerHTML="";
    }

    function UpdateProfile() //Partial code
    {
    var nSelProf =
    ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value;

    // Record the currently selected profile for when we
    Submit this form.
    ME.PROFILE_INDEX.value = nSelProf;
    wDocClear();

    // Write the top, fixed, portion of the document
    wDoc( '<html>' );
    wDoc( '<head>' );

    wDoc( '<\/head>' );
    wDoc( '<body bgcolor="#FFFFFF" topmargin="0"
    leftmargin="0">' );

    // If there us no Profile selected give them a
    message.
    if( nSelProf == -1 )
    {
    wDoc(' <DIV ALIGN="CENTER"><H2>There is no
    Profile currently selected.<\/H2><\/DIV>' );
    }
    else
    {
    //wDoc( "<div class='enc-acct'>Account<\/
    div>" );
    //wDoc( "<div class='enc-prod'>Products<\/
    div>" );

    wDoc( '<BR>' );
    wDoc( '<TABLE CELLPADDING="1" CELLSPACING="0"
    BORDER="1" ALIGN="CENTER">' );
    wDoc( ' <TR>' );

    wDoc( '<TH><strong>&nbsp;&nbsp;Account&nbsp;&nbsp;<\/TH>' );
    wDoc( '<TH
    COLSPAN="2"><strong>&nbsp;&nbsp;Products&nbsp;&nbsp;<\/TH>' );
    wDoc( ' <\/TR>' );
    sil, Feb 4, 2010
    #1
    1. Advertising

  2. sil

    nick Guest

    Re: When writing html table to div, the data from table isunformatted

    On Feb 4, 5:20 pm, sil <> wrote:
    > Hi All,
    >
    > I am new to HTML and JavaScript.
    >
    > I am using Javascript to write an HTML table into an HTML div.
    > However, the data from the table appears, inside the DIV,  like one
    > long line. When I am using the same Javascript code to write the same
    > table to a HTML page the table appears OK.
    > The question is: Are there some specific things that I should do when
    > writing HTML code to a DIV versus writing HTML code to an HTML page?
    > It looks like inside a DIV the HTML table formatting is gone, only the
    > data is present.
    >
    > Thanks in advance for any help on this matter. See snippet of my code
    > below:
    > ...


    You may want to adjust your tab spacing to a more reasonable size
    (like 2 spaces) next time you post code; that's pretty much
    unreadable.

    The problem, though, comes from not writing the opening and closing
    tag of an element at the same time. If you just do "e.innerHTML +=
    '<sometag>'", <sometag> will (often? always?) be automatically closed
    as soon as it is inserted in order to prevent broken markup.

    If you write the opening and closing tags to the innerHTML all at
    once, and never write an opening tag without also writing its closing
    tag at the same time, it should work the way you expect.

    e.innerHTML += '<sometag> some cdata </sometag>';

    -- Nick
    nick, Feb 5, 2010
    #2
    1. Advertising

  3. sil wrote:

    > I am new to HTML and JavaScript.
    >
    > I am using Javascript to write an HTML table into an HTML div.
    > However, the data from the table appears, inside the DIV, like one
    > long line. When I am using the same Javascript code to write the same
    > table to a HTML page the table appears OK.
    > The question is: Are there some specific things that I should do when
    > writing HTML code to a DIV versus writing HTML code to an HTML page?
    > It looks like inside a DIV the HTML table formatting is gone, only the
    > data is present.
    >
    > Thanks in advance for any help on this matter. See snippet of my code
    > below:
    >
    > function wDoc( wtxt )
    > {
    > document.getElementById('profile').innerHTML+=wtxt;
    > }


    Don't, see below.

    > function wDocClear()
    > {
    > document.getElementById('profile').innerHTML="";
    > }


    Chances are that you have given an element an ID which type has no `id'
    attribute, or that you are appending wrong markup.

    > function UpdateProfile() //Partial code


    This function does not look as if it would be used as a constructor, so its
    identifier should start lowercase.

    > {
    > var nSelProf =
    > ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value;
    >
    > // Record the currently selected profile for when we
    > Submit this form.
    > ME.PROFILE_INDEX.value = nSelProf;


    Since `ME' aso. not declared here, one must assume it is defined or
    declared in an outer execution context. Accessing globals from a local
    context like this is considered bad code style (it is error-prone,
    inefficient aso). Your function should be passed references to the
    objects it is going to modify, and it should use the named arguments
    instead.

    > wDocClear();
    >
    > // Write the top, fixed, portion of the document
    > wDoc( '<html>' );


    This cannot work (reliably). `HTML' is the root element of a Valid HTML
    document, and only elements can have an ID (and are found by
    document.getElementById()). So you would attempt to create a document of
    the form

    <html>
    ...
    <... id="profile">
    <html>
    ...
    </html>
    </...>
    ...
    </html>

    here, which is obviously not Valid. This and the missing `</table>'
    end tag is very likely the reason why you observe what you describe.

    Forget about this approach.

    If you want to write a complete document, use *one* document.write() call
    (preceded by a document.open() call and followed by a document.close()
    call) to write a string you build before, keep the `HTML' element and write
    a DOCTYPE declaration before it.

    If you want to update only a specific portion of the document, lose the
    `HTML' element and all other elements that MUST NOT be children of the
    target element (in your case that target element is the `DIV' element).
    You should also avoid `innerHTML', especially with tables; use DOM creator
    and mutator methods instead. If you use `innerHTML', though, do not append
    to the property repeatedly, but assign to it *once* a string that you build
    earlier.

    However, since you have not been aware of this script-*unrelated* problem,
    it might be a better idea to learn writing proper static HTML before you
    attempt to do it dynamically.

    See the FAQ for details: <http://jibbering.com/faq/#posting>


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, Feb 5, 2010
    #3
  4. sil

    sil Guest

    Re: When writing html table to div, the data from table isunformatted

    On Feb 4, 7:26 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > sil wrote:
    > > I am new to HTML and JavaScript.

    >
    > > I am using Javascript to write an HTML table into an HTML div.
    > > However, the data from the table appears, inside the DIV,  like one
    > > long line. When I am using the same Javascript code to write the same
    > > table to a HTML page the table appears OK.
    > > The question is: Are there some specific things that I should do when
    > > writing HTML code to a DIV versus writing HTML code to an HTML page?
    > > It looks like inside a DIV the HTML table formatting is gone, only the
    > > data is present.

    >
    > > Thanks in advance for any help on this matter. See snippet of my code
    > > below:

    >
    > > function wDoc( wtxt )
    > > {
    > >    document.getElementById('profile').innerHTML+=wtxt;
    > > }

    >
    > Don't, see below.
    >
    > > function wDocClear()
    > > {
    > >    document.getElementById('profile').innerHTML="";
    > > }

    >
    > Chances are that you have given an element an ID which type has no `id'
    > attribute, or that you are appending wrong markup.
    >
    > > function UpdateProfile() //Partial code

    >
    > This function does not look as if it would be used as a constructor, so its
    > identifier should start lowercase.
    >
    > >         {
    > >                 var nSelProf =
    > > ME.ACCT_PROFILE.options[ME.ACCT_PROFILE.selectedIndex].value;

    >
    > >                 // Record the currently selected profile for when we
    > > Submit this form.
    > >                 ME.PROFILE_INDEX.value = nSelProf;

    >
    > Since `ME' aso. not declared here, one must assume it is defined or
    > declared in an outer execution context.  Accessing globals from a local
    > context like this is considered bad code style (it is error-prone,
    > inefficient aso).  Your function should be passed references to the
    > objects it is going to modify, and it should use the named arguments
    > instead.
    >
    > >                 wDocClear();

    >
    > >                 // Write the top, fixed, portion of thedocument
    > >                 wDoc( '<html>' );

    >
    > This cannot work (reliably).  `HTML' is the root element of a Valid HTML
    > document, and only elements can have an ID (and are found by
    > document.getElementById()).  So you would attempt to create a document of
    > the form
    >
    >   <html>
    >     ...
    >     <... id="profile">
    >       <html>
    >         ...
    >       </html>
    >     </...>
    >     ...
    >   </html>
    >
    > here, which is obviously not Valid.  This and the missing `</table>'
    > end tag is very likely the reason why you observe what you describe.
    >
    > Forget about this approach.
    >
    > If you want to write a complete document, use *one* document.write() call
    > (preceded by a document.open() call and followed by a document.close()
    > call) to write a string you build before, keep the `HTML' element and write
    > a DOCTYPE declaration before it.
    >
    > If you want to update only a specific portion of the document, lose the
    > `HTML' element and all other elements that MUST NOT be children of the
    > target element (in your case that target element is the `DIV' element).  
    > You should also avoid `innerHTML', especially with tables; use DOM creator
    > and mutator methods instead.  If you use `innerHTML', though, do not append
    > to the property repeatedly, but assign to it *once* a string that you build
    > earlier.
    >
    > However, since you have not been aware of this script-*unrelated* problem,
    > it might be a better idea to learn writing proper static HTML before you
    > attempt to do it dynamically.
    >
    > See the FAQ for details: <http://jibbering.com/faq/#posting>
    >
    > PointedEars
    > --
    >     realism:    HTML 4.01 Strict
    >     evangelism: XHTML 1.0 Strict
    >     madness:    XHTML 1.1 as application/xhtml+xml
    >                                                     -- Bjoern Hoehrmann


    Hi,

    I followed your advise. That is, generating the whole string and then
    writing it only once to the innerHTML. It worked beautifully.

    I cannot thank you enough for this!

    Cheers,
    Silvio
    sil, Feb 5, 2010
    #4
  5. Re: When writing html table to div, the data from table is unformatted

    Hans-Georg Michna wrote:

    > sil wrote:
    >> I followed your advise. That is, generating the whole string and
    >> then writing it only once to the innerHTML. It worked beautifully.

    >
    > It may still not always work, because Internet Explorer cannot
    > insert certain table-related tags through innerHTML. Citation
    > from
    > http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx :
    > [...]
    > The property is read/write for all objects except the following,
    > for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML,
    > STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has
    > no default value.
    > ...
    > ----- End Citation -----
    >
    > Note the HTML elements in the last paragraph. Even if innerHTML
    > works for you now, it may fail always or under certain unknown
    > conditions in all versions of Internet Explorer.


    ISTM you are misinterpreting. The paragraph above indicates that writing a
    TABLE element into another element using `innerHTML', as the OP does, is
    never going to fail in any version of Internet Explorer. Attempting to
    write other elements into a TABLE element, however, is bound to fail there.

    So there really is no reason for FUD like "it may fail always or under
    certain unknown conditions"; the conditions under which it is going to fail
    are well-documented.

    > So I can only underwrite what Thomas already wrote:
    >
    > "You should also avoid `innerHTML', especially with tables; use
    > DOM creator and mutator methods instead."


    I stand by my recommendation. Your argument is a non sequitur, though.


    PointedEars
    --
    realism: HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness: XHTML 1.1 as application/xhtml+xml
    -- Bjoern Hoehrmann
    Thomas 'PointedEars' Lahn, Feb 7, 2010
    #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. Edwin Knoppert
    Replies:
    2
    Views:
    471
    Edwin Knoppert
    Nov 16, 2005
  2. Marc Schellens

    unformatted i/o

    Marc Schellens, Jul 13, 2003, in forum: C++
    Replies:
    3
    Views:
    895
    Gianni Mariani
    Jul 14, 2003
  3. TheDD
    Replies:
    4
    Views:
    505
    John Harrison
    May 13, 2004
  4. Lionel B
    Replies:
    19
    Views:
    919
    Victor Bazarov
    Mar 25, 2005
  5. Andrea Gavana

    Reading unformatted big-endian files

    Andrea Gavana, Aug 11, 2006, in forum: Python
    Replies:
    1
    Views:
    3,990
    John Machin
    Aug 11, 2006
Loading...

Share This Page