Day 24: I know it backwards and forwards…

…or, in this case, downwards and sideways (sort of)…

After staying up quite late with my table issue last night, it turned out that I was not dynamically adding rows to the table, but the div itself, which is why the rows were showing up after the table element, and why I couldn’t get rid the the rows afterwards without wiping everything out of the div. I was off by ONE line of code. It’s always the way!

Despite my 5 hours of sleep, everything was just ducky. In fact, thanks to figuring that issue out, I was able to easily tackle our afternoon assignment. We had to take a JSON file, convert it, then use a dropdown to have the user select out an object to create a table dynamically from the file with the information on this object. I was so excited when I managed to spit out a very nice table listing field headings all the way across. I even used Bootstrap to make the table look attractive. There was only one problem…

Pam needs to learn to read.

The table was supposed to read SIDEWAYS!

The headings were to be in the left hand column and the information in the next column. Logically, this makes perfect sense, as we were only calling up one record row of information per object. I wasn’t the only one to make this mistake. Our instructor kept telling us the issue was “simple to figure out” and “much easier” than what we had been doing. However, after your brain has been hard-wired to making a table a certain way ALL AFTERNOON it’s tough to completely turn around to figure out how to literally “turn around” the table. I couldn’t do it. I was going to stay later to figure it out, but I really need my sleep this evening. I figure I can tackle it in the morning before we get started on our usual Friday project.

You watch…sideways tables will be the main project feature tomorrow!

Where’s the Advil???

Day 23: Dynamically creating things…

…Mostly a scene…

Today was a VERY long day. Thankfully, with a bit of help, I figured out my issue from yesterday. I was off by ONE lousy line of code.

Our next adventure was adding, creating, and manipulating things to the html (appendChild, etc.) I managed to figure out how to do all this, but I’m still fuzzy on how to get rid of a dynamically-created table, once it’s created. I know I can just put a blank string in the div that holds it, but that wipes out the table element within the div, which fixes it so you can’t repeat the selection process when you choose another category from the drop down. I carefully inspected the elements after the first table gets created, and it’s odd. The <tr> and <td> tags are created in the html AFTER the <table> <\table> grouping, so one can’t even erase out the table, as technically nothing is in there—even though a table is definitely created on the screen. The only way I see around this is to perhaps figure out a way to dynamically recreate the table element after the div is blanked out. Either that, or do a routine to specifically delete out the <tr> and <td> tags.

After 10:30 pm, I decided to call it a night and to tackle this again tomorrow. Right now, I have the lazy fix in there to just reload the page if you hit the “Start Over” button. I do need to figure out how to erase the rows correctly though, as the OTHER issue is that if you just keep selecting category options from the drop down, and don’t reset, the choices just get added over and over again to the page every time you select a category—they don’t get replaced with the new category’s table entries.

Knitting fair isle with five colors would be easier…