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

S

sil

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>' );
 
N

nick

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:
...
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

sil said:
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;
}
Click to expand...

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

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
Click to expand...

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;
Click to expand...

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>' );
Click to expand...

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
 
S

sil

sil said:
I am new to HTML and JavaScript.
Click to expand...
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.
Click to expand...
Thanks in advance for any help on this matter. See snippet of my code
below:
Click to expand...
function wDoc( wtxt )
{
   document.getElementById('profile').innerHTML+=wtxt;
}
Click to expand...

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

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
Click to expand...

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;
Click to expand...
                // Record the currently selected profile for when we
Submit this form.
                ME.PROFILE_INDEX.value = nSelProf;
Click to expand...

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();
Click to expand...
                // Write the top, fixed, portion of thedocument
                wDoc( '<html>' );
Click to expand...

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
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

Hans-Georg Michna said:
sil said:
I followed your advise. That is, generating the whole string and
then writing it only once to the innerHTML. It worked beautifully.
Click to expand...

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.
Click to expand...

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."
Click to expand...

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


PointedEars
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
Image shifts to the right when export the page to pdf 4
How to delete the item from table? I am using SESSION. 0
How to have two html audio players on one page? 0

Members online

Total: 57 (members: 1, guests: 56)
Robots: 443

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,815
Latest member
treekmostly22

Latest Threads

Top