Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > When writing html table to div, the data from table is unformatted

Reply
Thread Tools

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

 
 
sil
Guest
Posts: n/a
 
      02-04-2010
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;&nbs p;<\/TH>' );
wDoc( ' <\/TR>' );
 
Reply With Quote
 
 
 
 
nick
Guest
Posts: n/a
 
      02-05-2010
On Feb 4, 5:20*pm, sil <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      02-05-2010
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
 
Reply With Quote
 
sil
Guest
Posts: n/a
 
      02-05-2010
On Feb 4, 7:26*pm, Thomas 'PointedEars' Lahn <(E-Mail Removed)>
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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      02-07-2010
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/libr...97(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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Reading unformatted big-endian files Andrea Gavana Python 1 08-11-2006 10:17 AM
Grid Auto fill columns, annoying unformatted date/time Edwin Knoppert ASP .Net 2 11-16-2005 02:43 PM
Reading unformatted text from stdin Lionel B C++ 19 03-25-2005 03:08 PM
From unformatted to formatted input TheDD C++ 4 05-13-2004 09:51 AM
unformatted i/o Marc Schellens C++ 3 07-14-2003 03:05 PM



Advertisments