How to access generated HTML Elements from JavaScript?

Question

i want to access a table in the Dynamics NAV Webclient. If I check the html source code of the page I'm working on it is about 20 lines long without any table but when I view the sorucecode in my firefox inspector I can see the html structure including an id inside the table-tag.

Source Code:

Inspector Code:

So I thought I could access my html table (viewable only in inspector) by using functions like getelementfromid, queryselector etc. I always get NULL as a result.

This indicates that the js-code is executed before the page is completely rendered. I decided to wrap a $(document).ready()-function around it to start the execution after the html code is there. Also not working.

I tried building an 2nd example. I just created a simple html-page including an html-table and tried accessing it via the functions I mentioned earlier. This works perfectly.

Do you have any hints or solutions how I can access this table?

Thank you in advance

Edit:

$(document).ready(function()
        { 
            var table = document.getelementbyid('5E9D_BusinessGrid')
        });

Even `$(document).ready()` is likely *too early*. You need to wait longer. — deceze, Apr 18 '18 at 13:52
Firstly you need to provide more information on your version of firefox etc. However lots of info here https://blog.netronic.com/developing-javascript-add-in-for-dynamics-nav-2013-r2-blog1 — Zed, Apr 18 '18 at 13:52
It's pretty hacky, but you could try `window.setTimeout(()=> var table = document.getelementbyid('5E9D_BusinessGrid'), 500)` — wassona, Apr 18 '18 at 14:03

score 1 · Accepted Answer · answered May 17 '18 at 07:45

I found a solution. I can access the code getting the "boot"-script from the code, like:

var msnavdocument = document.getElementById("boot").ownerDocument.activeElement.contentDocument;

I can access every html component. Maybe this helps future Microsoft NAV JavaScript Addin Developer.

score 0 · Answer 2 · answered Apr 18 '18 at 14:03

You trying to access this Table through an extension?

And if the TABLE will exist, you could set an setTimeout timer to repeat until the table appears, then excute the code you want once it does appear.

This isnt real code, but gives you an idea of what you'll need to do.

function REPEAT_LOOK_FOR_TABLE(){
var LEN = document.getElementsByTagName('TABLE').length;
for(i=0; i<LEN; i++){
    console.log(document.getElementsByTagName('TABLE')[i]);
    alert(document.getElementsByTagName('TABLE')[i]);
}
setTimeout( REPEAT_LOOK_FOR_TABLE(); , 1000 ); // Checks ever 1 second.
}REPEAT_LOOK_FOR_TABLE();// Starts it up.

Like i said that is not a working example, just research or fix it up & you'll be able to find the table you are looking for.

Also you wanna put a IF statement, so if the table is found, excute the code you want, if ithe table is NOT found, just keep the setTimeout repeating every 1s. So yes write the code to turn that dam repeating thing off :-)

Also the Table does not appear onload, because the script is loaded independently of the page. If the script was in the HEADER section above the BODY, your script word be working because your browser has to fetch those scripts before onload finishes. Unlike Scripts that are put in the middle of the page or BODY section.

How to access generated HTML Elements from JavaScript?

2 Answers2