How to load JavaScript and jQuery UI on Blazor on page load

1
votes

I have an admin template that I wan to use using Blazor. I have placed all the JavaScript and jQuery UI and CSS on the _host.chtml file. I then sliced up the template into layouts like navigation, headers, and footers.

After loading a dashboard page, all bootstrap js functionality like collapsible menu, close button dialog, does not work.

However, when I tried to click an href link within a page then click the back button, the JavaScript functionality works.

Do you have any ideas why it's like that? How can we load all the jQuery UI to work within the CSS on component and layout loads?

I have tried JSinterop but it's more of calling a JavaScript function. It won't work if you have a bunch of jQuery UIs and bootstrap JavaScript that is tied up to CSS.

2
blazor

2 Answers

0
votes

You can subscribe to the URL changing by injecting the IUriHelper and then invoke some JS to add your hooks.

However, it's not going to be that simple. When Blazor components render they can optionally create HTML elements, for example when doing a foreach over a collection to render data. There are lots of scenarios that can trigger a re-render without navigation (such as clicking a button).

You'll need to decorate your components explicit with events such as @onmouseenter @onnouseout etc rather than having a single function they wires up everything.

0
votes

Well what I did is to call the theme.js on component load using javascript interop. I have this 

    reloadPage: function () {
            $.getScript('assets/javascripts/theme.js');
            $.getScript('assets/javascripts/theme.custom.js');
            $.getScript('assets/javascripts/theme.init.js');
        }

Then I removed the references of assets/javascript/theme.js.. etc on the main _host.chtml.

And it worked! haha