Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Js function sometime not work in blazor server


Hello ,
I used metronic 8.1.5 on Blazor Server and my problem is scripts.bundle.js not worked sometimes , I implement JS Import and anything after read docs but my problem still . this problem very important to me, because my development in middle and i can't change my template .

if i write details about my problem , when login into my project ( load layout ) sometime right menu working well and sometimes menu and top widget doesn't work ,when menu not working if i refresh page in browser this problem solved

my code in MainLayout.razor :

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await JS.InvokeAsync<IJSObjectReference>("import", "/assets/js/scripts.bundle.js");
}

}


my code in _Host.cshtml :


<script src="_framework/blazor.server.js" @*autostart="false"*@></script>

<script>
function setTheme(theme, isThemeDark) {
document.getElementsByTagName("body")[0].style.display = "none";
let synclink = document.getElementById("theme");
synclink.href = "_content/Syncfusion.Blazor.Themes/" + theme + ".css";
setTimeout(function () { document.getElementsByTagName("body")[0].style.display = "block"; }, 200);
}
</script>
<script>var hostUrl = "/assets/";</script>
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/scripts.bundle.js"></script>
<script src="/assets/js/Helper.js"></script>

<script src="/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>


<script src="/assets/plugins/custom/datatables/datatables.bundle.js"></script>

<script src="/assets/js/widgets.bundle.js"></script>
<script src="/assets/js/custom/widgets.js"></script>


Please help me for fix my issue


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Nobody can't help me ? this problem is very important in my project



Hi,

Sorry for the late reply.

Please make sure that your component is wrapped with our initialization file Starterkit/Shared/MasterInit.razor.

Or you can call the component additional initialization on your layout file using the code below:


@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender){
await JS.InvokeVoidAsync("KTComponents.init");
}
}
}


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(