Nothing showing on mirror. GetDom not firing?

[RConner7]

I'm fairly new to JavaScript and MagicMirror but i've attempted some troubleshooting to try and figure out what is going on.

Ultimately, it seems that getDom within the main program is not loading. I've added a console.log at a bunch of places in both the helper and main. Also there is a variable that is defined within getDom (this.tbody) that is needed within replaceTableRows as 'parent' that is showing as undefined.

I thought it was something within the config file so i recreated a mySQL database with the same table names and info as the example. I copied the config example exactly and only changed DB host, user,password but i still received the same results.... Nothing is ever displaying on the screen.

I've launched the program in npm start dev and with some tweaks to attempt to get it to work and i can see the table being created with structure and data within the debug console but i do not see the table showing within the Elements section with all of the other browser items (if i do add another modules, i do see it displaying).

I've removed all other modules and have only this one running but same result.

What am i missing? Why is getDom not firing? Why is nothing displaying on the screen for this module?

[ralberth]

Howdy! Thanks for the info. I'm backlogged at the moment with a couple other tickets for this project, but I'll get back to you for sure. Cheers, - Rich

[RConner7]

Thanks Rich

On Jul 29, 2019, at 9:26 AM, Rich Alberth notifications@github.com<mailto:notifications@github.com> wrote:

Howdy! Thanks for the info. I'm backlogged at the moment with a couple other tickets for this project, but I'll get back to you for sure. Cheers, - Rich

[ralberth]

THANK YOU for trying something out, putting in debug statements and generally giving it a go!

OK, here's a first stab. Let's make sure you're getting part or all of the basic HTML DOm created. I started up a MMM, loaded a table with a single row and "Inspect Element" from FireFox. Here's the section of the DOM after MMM-MysqlQuery drew a row of results:

<div id="module_8_MMM-MysqlQuery" class="module MMM-MysqlQuery MMM-MysqlQuery">
    <header class="module-header">One Thru Four</header>
    <div class="module-content">
        <div class="mysqlQuery">
            <table>
                <thead>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                        <th>Three</th>
                        <th>Four</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="left">1</td>
                        <td class="left">2</td>
                        <td class="left">3</td>
                        <td class="left">4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

You mentioned that the this.tbody is undefined. From the getDom() function, I see this as

this.tbody = this.createEle(table, "tbody");

I'm hoping you have at least the <tbody> above showing in the "Inspect Element", which confirms that this.tbody in getDom() was reached and has a valid value. This is the connection between initially drawing the skeleton table, and replacing all the body rows each time the SELECT query is fired.

If not, there might be a problem in getDom() like you said and the this.tbody wasn't reached. That localizes the problem to the middle of getDom(). We should look at your config file and see if there is a value that is causing a problem. Specifically, something in this.config.columns forEach might have blown up.

If you see a <tbody> in the "Inspect Element" in your browser, then getDom() likely finished, and the value is getting reset, or something else strange.

Check out the value (make debug statements in socketNotificationReceived() around the this.replaceTableRows(this.tbody, payload.rows); which passes it to replaceTableRows(). Another statement in replaceTableRows() around the local variable parent.

That will confirm and help narrow down where we're losing a pointer to the <tbody> we need to draw the database rows.

While we're at it, would you please sanitize your config.js and post it here for reference?

Cheers!

[RConner7]

Thank you! I think I was able to locate the issue. GetDom was not loading correctly because of a small typo in my config file. I had position as ‘postion’ which was causing the dom to not load the table at all; which now makes total sense.

With that corrected I now get the table loaded as expected.

Much appreciated!

On Aug 2, 2019, at 6:50 PM, Rich Alberth notifications@github.com<mailto:notifications@github.com> wrote:

THANK YOU for trying something out, putting in debug statements and generally giving it a go!

OK, here's a first stab. Let's make sure you're getting part or all of the basic HTML DOm created. I started up a MMM, loaded a table with a single row and "Inspect Element" from FireFox. Here's the section of the DOM after MMM-MysqlQuery drew a row of results:

One Thru Four

One	Two	Three	Four
1	2	3	4

You mentioned that the this.tbody is undefined. From the getDom() function, I see this as

this.tbody = this.createEle(table, "tbody");

I'm hoping you have at least the above showing in the "Inspect Element", which confirms that this.tbody in getDom() was reached and has a valid value. This is the connection between initially drawing the skeleton table, and replacing all the body rows each time the SELECT query is fired.

If not, there might be a problem in getDom() like you said and the this.tbody wasn't reached. That localizes the problem to the middle of getDom(). We should look at your config file and see if there is a value that is causing a problem. Specifically, something in this.config.columns forEach might have blown up.

If you see a in the "Inspect Element" in your browser, then getDom() likely finished, and the value is getting reset, or something else strange.

Check out the value (make debug statements in socketNotificationReceived() around the this.replaceTableRows(this.tbody, payload.rows); which passes it to replaceTableRows(). Another statement in replaceTableRows() around the local variable parent.

That will confirm and help narrow down where we're losing a pointer to the we need to draw the database rows.

While we're at it, would you please sanitize your config.js and post it here for reference?

Cheers!

[ralberth]

Holy crap! We're lucky you saw that. Thanks for replying back.