Javascript called by blazor code happens when DOM not yet ready?

Question

I've a javascript function that has to create graph:

<script>
    window.setGraph = (lab, ser) => {
        console.log(document.getElementById("weather-chart"));
        console.log(lab);
        console.log(ser);
        var chart = new Chartist.Line('#weather-chart', {
            labels: lab,
            series: ser
        });

        console.log("done");
        return true;
    }    
</script>

This function is called by one of my blazor component:

protected override async Task OnInitAsync()
{
    some-data-a = await RetrieveSomeData();
    some-data-b = await RetrieveSomeOtherData();
    JSRuntime.Current.InvokeAsync<bool>("setGraph", some-data-a, some-data-b);
}

Everything is executed, my console.log are called. But it appears that at this moment my element #weather-chart cannot be found, because I get this:

chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Object.c.createSvg (chartist.min.js:8)
    at f.d [as createChart] (chartist.min.js:8)
    at f.h (chartist.min.js:8)

AND my console.log(document....) is returning null.

If I go to this page, I've the error, and if just after getting this error I do something like window.setGraph([1,2,3], [[1,2,3]]) in my chrome developer tools, everything is initialized correctly.

So what did I do wrong? Why chartist doesn't seems to be able to find the element?

Possible duplicate of [JavaScript that executes after page load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — André Dion, Oct 11 '18 at 11:59
You seem to be trying to execute your code before all the elements have been loaded run your script after the page has loaded all the elements — Karan Shishoo, Oct 11 '18 at 12:00
@AndréDion nothing to do with that. It's called by blazor, so its way after the page has been loaded — J4N, Oct 11 '18 at 12:00
@casualcoder I think it's the only callback that Blazor offer, no? — J4N, Oct 11 '18 at 12:01
@J4N what does your console.log prints? are the values correct? — Margon, Oct 11 '18 at 12:06
@J4N Well Blazor itself says its an "unsupported experimental web framework" can you make timestamps for when your page loads and when the callback is executed to ensure that it indeed happens after your page has loaded. (as all evidence points to your code working fine just trying to access elements which don't exist yet) — Karan Shishoo, Oct 11 '18 at 12:09
It's pretty obvious that the element with id `weather-chart` doesn't exist at the time the `setGraph` function is called, or at all for that matter; you haven't actually showed that part of the solution. — André Dion, Oct 11 '18 at 12:14
You should send an elementRef reference for #weather-chart to your JS function, and you shouldn't do: document.getElementById("weather-chart") — enet, Oct 11 '18 at 12:28

score -1 · Answer 1 · answered Oct 11 '18 at 12:16

-1

It appears that blazor's databinding was taking some time to display the html. So basically after I set the _items, it was changing the template, but not fast enough for the line after this(not sure why, since there was an await).

answered Oct 11 '18 at 12:16

J4N

19,480
39
187
340

keep in mind it IS experimental, if you can make a verifiable example with the await you could file a bug on their site to have them figure out the unexpected behavior – Karan Shishoo Oct 12 '18 at 05:02
I just think that the refresh of the view is invoked. – J4N Oct 12 '18 at 09:20

Javascript called by blazor code happens when DOM not yet ready?

1 Answers1