Java Script UI is not working in Blazor Server App #22908
Description
Hello,
I'm having problem with an implementation of any of JS UI (say DateTimePicker) in Blazor Server Side app ( .NET Core 3.1 Framework).
Dev Env: Microsoft Visual Studio Professional 2019
Version 16.5.4
Microsoft .NET FRamework 4.7.03062
I just want to have DateTime Picker on my Index.razor page:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="md-form md-outline input-with-post-icon datepicker">
<input type="text" id="orderDatePicker" class="form-control">
</div>
</div>
</div>
</div>
Here is my _Host.cshtml:
@page "/"
@namespace BlazorAppDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorAppDemo</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="https://unpkg.com/gijgo@1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.11/js/gijgo.min.js" type="text/javascript"></script>
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script type="text/javascript">
$('#orderDatePicker').datepicker({
format: 'dddd, dd mmm, yyyy',
});
</script>
</body>
</html>
The issue I'm facing is when "blazor.server.js" reference is sitting within the <body> tag
<script src="_framework/blazor.server.js"></script>
(where this is actually supposed to be), my "orderDatePicker" is not working (not showing Dates to pick).
But when I move
<script src="_framework/blazor.server.js"></script>
from <body> to <head> the Picker works perfectly:
Looks like my problem is resolved, but the new and bigger issue appears as a result of that move.
Exactly, onclick event is stopping to work on Counter.razor page:
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
The Counter doesn't work while this worked well before the move.
Could anybody explain me why this is happening.
Thank you.