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.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post

    Array of Auto-Generating HTML Table Problem

    I'm almost finished with this app for XUL / HTML Table Generation, and i have a really strange problem...

    The HTML strings in the Arrays can be changed, and the HTML file saved, and the HTML page reloaded, and the changes will render.
    However, i have one array, no matter what i change the HTML strings to, it refuses to render the changes made to the HTML strings.
    It's quite confusing...

    the array in question is

    Code:
    // Humidor InnerHTML
    HumidorInnerHTML[0] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
    HumidorInnerHTML[1] = "<input type='textbox' id='Others_Caption" + HumidorIndex + "'>";
    HumidorInnerHTML[2] = "<input type='textbox' value='85' id='Others_Height" + HumidorIndex +"'>";
    HumidorInnerHTML[3] = "<input type='textbox' value='85' id='Others_Width" + HumidorIndex +"'>";
    HumidorInnerHTML[4] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
    HumidorInnerHTML[5] = "<img src='NoImage.gif' style='height:100px; width:100px;'>";
    HumidorInnerHTML[6] = "<img src='delete.png' onClick=DeleteRow('" + HumidorIndex + "','Humidor_Table');>";
    HumidorInnerHTML[7] = "<img src='add.png' onClick=AddRow('" + HumidorIndex + "','Humidor_Table');>";
    and the function that generates the HTML Table on the fly (and adds the cell data to them) is here:

    Code:
    function AddRow(index, DIV)
    {
    MyTable = document.getElementById(DIV);
     
    var newCell;
    var newRow = MyTable.insertRow(index);
    
    var Length;
    
    switch (DIV)
    {
    case "Intro_Table" : Length = IntroInnerHTML.length;
    break;
    case "Image_Table" : Length = ImageInnerHTML.length;
    break;
    case "Watch_Table" : Length = WatchInnerHTML.length;
    break;
    case "Others_Table" : Length = OthersInnerHTML.length;
    break;
    case "Humidor_Table" : Length = HumidorInnerHTML.length;
    break;
    }
    
    for (var i = 0; i < Length; i++) 
    	{
         newCell = newRow.insertCell(i);
    	 
    	 switch (DIV)
    	 {
    	  case "Intro_Table": newCell.innerHTML = IntroInnerHTML[i];
    	  break;
    	  case "Image_Table": newCell.innerHTML = ImageInnerHTML[i];
    	  break;
    	  case "Watch_Table": newCell.innerHTML = WatchInnerHTML[i];
    	  break;
    	  case "Others_Table": newCell.innerHTML = OthersInnerHTML[i];
    	  break;
    	  case "Humidor_Table": newCell.innerHTML = WatchInnerHTML[i];
    	  break;
    	 }
    
        }
    
    // Update the Index Counters
    switch (DIV)
     {
     case "Intro_Table": IntroIndex++;
     break;
     case "Image_Table": ImageIndex++;
     break;
     case "Watch_Table": WatchIndex++;
     break;
     case "Others_Table": OthersIndex++;
     break;
     case "Humidor_Table": HumidorIndex++;
     break;
     }
    }
    when the page is loaded, the Init() function is started, that code is here:

    Code:
    function Init()
    {
     AddRow(1, "Intro_Table");
     AddRow(1, "Image_Table");
     AddRow(1, "Watch_Table");
     AddRow(1, "Humidor_Table");
     AddRow(1, "Others_Table");
    }
    Did i miss something? there must be something i've over looking. I have even tried isolating some other external JS, and CSS includes that i have, and isolating them has no change in the result.

    the html file is live here:

    http://kevinjohnson.clanteam.com/XML...anageSite.html

    thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,460
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Code makes no sense.

    You create all those HTML strings WHEN THE PAGE IS LOADED:
    Code:
    var IntroIndex = -1;
    ...
    IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption" + IntroIndex + "'>";
    IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height" + IntroIndex +"'>";
    ...
    So *ALL* of those HTML strings will have IntroIndex set to -1.

    And so you might as well have simply done:
    Code:
    ...
    IntroInnerHTML[1] = "<input type='textbox' id='Intro_Caption-1'>";
    IntroInnerHTML[2] = "<input type='textbox' value='85' id='Intro_Height-1'>";
    ...
    The fact that LATER in the code you do
    Code:
    switch (DIV)
     {
     case "Intro_Table": IntroIndex++;
     break;
    ...
    Will have NO IMPACT WHATSOEVER on the contents of all those HTML strings!

    So, just as an example, after adding another row by clicking on the + for Image Options, both the first and second row have
    Code:
         <input id="Image_Caption-1" type="textbox">
    I *assume* that what you were after was to produce multiple fields such as
    Code:
         <input id="Image_Caption0" type="textbox">
         <input id="Image_Caption1" type="textbox">
         <input id="Image_Caption2" type="textbox">
         ...
    But that won't happen with this code.

    Incidentally, there is no such thing in HTML as type="textbox". It should be just type="text". Not that it matters too much; if you omit or give an invalid type for an <input>, it defaults to "text".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,460
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Incidentally, you can easily see this happening--all those identical "-1" fields being created--if you use Firebug with FireFox.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Incidentally, you can easily see this happening--all those identical "-1" fields being created--if you use Firebug with FireFox.
    Actually, what the problem is if you goto the Tab or section where it says "Humidor" the last two cells in the table should be pictures that have onClick events in them, they trigger functions that add or delete a table row from the table. However the problem i'm having, is that the correct HTML elements are not being loaded there. The HTML elements come directly from the Array that i have setup at the beginning of the script called HumidorInnerHTML[]

    I can change any of the HTML tags in the HumidorInnerHTML variables, and then save, and refresh the page, ...and it will not actually change anything...
    there is something blocking it, but i don't know what....

    that's the problem...

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,460
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    Fine. Have it your way. Just be aware that your code that does
    Code:
    switch (DIV)
     {
     case "Intro_Table": IntroIndex++;
     break;
     ...
    is *NOT* impacting what you are dumping into new rows.

    Not to mention that you claim to be standards compliant, yet you are still adding rows via innerHTML instead of the more modern and standard use of document.createElement( ).

    Anyway, I won't comment on the code again. Maybe sometody else can find a way for you to make it work when it doesn't do what it was apparently intended to do.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Fine. Have it your way. Just be aware that your code that does
    Code:
    switch (DIV)
     {
     case "Intro_Table": IntroIndex++;
     break;
     ...
    is *NOT* impacting what you are dumping into new rows.

    Not to mention that you claim to be standards compliant, yet you are still adding rows via innerHTML instead of the more modern and standard use of document.createElement( ).

    Anyway, I won't comment on the code again. Maybe sometody else can find a way for you to make it work when it doesn't do what it was apparently intended to do.
    if it's not standard-compliant code, then why does it work with FF? just something to think about i guess. But then again, what is standards anyway? they keep changing. Some people have told me that using onClick="ThisFunction" in code is non-standard also, but i see it used in so many websites still. Anyways, enough of that

    i found the solution

    Code:
    case "Humidor_Table" : Length = WatchInnerHTML.length;
    break;
    should have been

    Code:
    case "Humidor_Table" : Length = HumidorInnerHTML.length;
    break;


  •  

    Posting Permissions

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