Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23
  1. #16
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Why did you use <div> instead of <table> tag?

  2. #17
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    The fact is that I don't need the table; what I need is a row snippet that can remain in memory and be used multiple times as data is dynamically inserted into a table.

    This is one of many parts that are maintained in memory and used multiple times in various parts of the application. It's certainly much cleaner than concatenating strings everywhere, and for me it's all about clean, secure code, with performance a close second.

    ..and on that point, yes, upon completion a code review will identify areas where jQuery may be replaced with native JavaScript without sacrificing cross-browser integrity or readability.

    Now on to the issue at hand, have you successfully replicated the issue? Can you explain it?

  3. #18
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Without even running the page, I think the issue is that you have invalid HTML - putting <tr><td> inside <div> tag and not <table> tag.

    Try this in the console:
    Code:
    $('<div><tr><td>test</td></tr></div>')
    Output: [<div>​test​</div>​]

    Code:
    $('<table><tr><td>test</td></tr></table>')
    Output: [<table>​<tbody>​<tr>​<td>​test​</td>​</tr>​</tbody>​</table>​]

  4. Users who have thanked glenngv for this post:

    sbhmf (04-05-2014)

  5. #19
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    paraphrasing off of your suggestion, here's what I have deduced:

    Regarding:
    Code:
    var doc = CreateDoc('Text/Test.txt');
    $('div').eq(1).html('<xmp>' + $(doc)[0].outerHTML + '</xmp>');
    ...when doc is made into an object it is identified as an illegal object and the foul parts (tr and td) are dropped. Makes sense, because tr is wrapped by di in the 'doc' stream.

    Regerding:
    Code:
    var doc = CreateDoc('Text/Test.txt');
    document.getElementsByTagName('div')[0].innerHTML = '<xmp>' + doc + '</xmp>';
    ...the stream was never converted into an object, so it maintained state as simply a stream of characters.

    Therefore, it stands to reason that the problem occurs when tr is converted into an object.

    However, $('<tr><td><span>Cool Stuff</span></td></tr>') also drops the tr and tds. Apparently they may not exist as independent objects, and have a dependency on table. THAT I did not expect! I expected the fragment to create a tr object, and to eventually append it to a tbody container. Yet that did not occur.

    well, that's the sense that I am making of all this.

    It also stands to reason, therefore, that even if my original tr were wrapped in a table object, as soon as I retrieved its innerHTML - i.e., the tr segment that I need - the object would drop the tr and td tags as well.

    The result reveals that I should maintain it as a text stream and not convert it into an object until it's in tbody.

    Do you concur?

  6. #20
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,632
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by sbhmf View Post
    It also stands to reason, therefore, that even if my original tr were wrapped in a table object, as soon as I retrieved its innerHTML - i.e., the tr segment that I need - the object would drop the tr and td tags as well.
    Some browsers do not accept innerHTML when working with parts of a table (eg. Internet Explorer) you need to either include all or none of the table tags inside the innerHTML call.

    The object you are dealing with when working with a table from JavaScript is the <table> element. All of the sub elements within the table can be referenced as properties of that object without needing to perform additional calls to get them as elements. If you use createElement() to create the elements within your page the only tag inside of a table that you also need to use createElement in order to create it is <tbody> as all of the other sub-elements have their own methods attached to the table object for creating and deleting them.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  7. Users who have thanked felgall for this post:

    sbhmf (04-05-2014)

  8. #21
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Thx for that, it's coming back to me now. It's been a very looong time since college! in the context of my deductions this makes a great deal of sense.

    Thx a bunch!

  9. #22
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by sbhmf View Post
    Regerding:
    Code:
    var doc = CreateDoc('Text/Test.txt');
    document.getElementsByTagName('div')[0].innerHTML = '<xmp>' + doc + '</xmp>';
    ...the stream was never converted into an object, so it maintained state as simply a stream of characters.?
    The reason this works is because you enclosed the <div><tr><td> tags in <xmp> tag which is an HTML tag that is used to render content without parsing or interpreting the HTML. This means <div><tr><td> tags will not be dropped and will be displayed as literal text not HTML.

    Code:
    document.getElementsByTagName('div')[0].innerHTML = '<xmp><tr><td>test</td></xmp>';
    But doing this:
    Code:
    document.getElementsByTagName('div')[0].innerHTML = '<div><tr><td>test</td></div>';
    will drop the invalid tags and render:
    Code:
    <div>test</div>

  10. #23
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    Not quite...

    I was demonstrating that in

    Code:
    '<xmp>' + $(doc)[0].outerHTML + '</xmp>'
    ...it is apparent the doc itself did not drop tr and td, and that is precisely the reason that, when wrapped in xmp, it rendered them.

    If doc had dropped tr and td then xmp-wrapped code would not have displayed tr and td.

    This suggests that I can use this format to inject rows into tbody dynamically without losing tr and td, though I have yet to test it in the code.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •