Issue with Icon and DateTime Picker functionality after Implementing Bootstrap Theme #55421
Replies: 7 comments
-
Is it possible that JS events were attached to the prerendered DOM that gets replaced later by interactive rendering which removes those events? If not, we will need a minimal repro of the issue hosted on GitHub to investigate this further. |
Beta Was this translation helpful? Give feedback.
-
I've prepared a minimal repository project to assist in debugging the issue we discussed. You can find the project via the following link: After 1-2 Seconds |
Beta Was this translation helpful? Give feedback.
-
@sambhavyadav90 thanks for the additional details. What's happening is that the approach you are using for scripts is problematic when using interactivity. If you have interactive components you shouldn't use script tags inside them. Those tags will apply when the component gets prerendered, but won't apply when the component becomes interactive. The best practice recommendations for scripts is to define a JS module that you can inject into the page or retrieve via For example: module.js export activate = function () {
...
};
activate(); App.razor <script type=module src="module.js"></script> Component.razor @code {
protected async Task override OnAfterRenderAsync()
{
_module ??= await import('module.js');
await _module.InvokeAsync("activate");
} (note that this is pseudo-code). |
Beta Was this translation helpful? Give feedback.
-
Then tell me how to call function on .razor page from flatpickr.min.js for your reference just check this flatpickr.min.js // Deleted the content of the JS file linked above to make it easier to read (by @mkArtakMSFT) |
Beta Was this translation helpful? Give feedback.
-
Thanks for contacting us. This doesn't seem to be a problem with the framework rather a question about how to use it. |
Beta Was this translation helpful? Give feedback.
-
This might help. https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript |
Beta Was this translation helpful? Give feedback.
-
@javiercn @halter73 Recently, there has been a growing trend among some Microsoft Technology Developers to consider migrating from Blazor to React or Angular due to perceived challenges with JavaScript integration in Blazor applications React and Angular have vibrant communities and extensive ecosystems, but so does Blazor. By migrating away from Blazor, developers may miss out on the growing community support, documentation, and ecosystem development that could address existing challenges over time. I'm reaching out to express my frustration with the current lack of real-time examples demonstrating the seamless integration of Bootstrap themes in Blazor applications. As a developer working with Blazor, I have found myself struggling to incorporate Bootstrap themes effectively, and I believe that having real-time examples would greatly alleviate this challenge. I believe that using my repository could provide a more efficient and effective way to address the problem at hand. By leveraging the resources and codebase available in my repository, we can streamline the troubleshooting process and expedite the resolution of the issue. |
Beta Was this translation helpful? Give feedback.
-
In my Blazor Server Application, I've implemented a Bootstrap theme. However, there seems to be an issue with the functionality of the Icon and DateTime Picker on the website
After 1-2 seconds of loading the page, the Icon and DateTime Picker functionality stops working. This behavior is consistent and needs investigation to identify the root cause.
Bootstrap Theme Template URL : Template
Steps to reproduce:
Expected behavior:
The Icon and DateTime Picker functionality should remain operational without interruption after loading the page.
Additional information:
Please investigate this issue further to understand what's causing the problem and provide a resolution. Thank you for your attention to this matter.
Beta Was this translation helpful? Give feedback.
All reactions