Javascript functions not working in my blazor server project!

Question

Hi everyone! I have a viewer webPage which contains some css & javascript files as references. Now to import it into my blazor-server project, after create new project, make some changes to add my given web-page functionality into my blazor server project as follow : Add these reference into _Host.cshtml > head tag (& place it inside wwwroot folders) :

<link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/all.min.css" />
    <script src="js/bootstrap.bundle.min.js" defer></script>
    <script src="js/jquery-3.6.min.js"></script>
    <script src="js/wheel-zoom.min.js"></script>
    <script src="js/app.js"></script>

Add this code to index.razor page :

<div style="height: 100vh;" class="d-flex flex-column justify-content-between">

    <!-- Tools Panel Section -->
    <section>
        <div class="col-12 d-flex justify-content-center mt-md-2 mt-lg-2">
            <!-- Tools -->
            <div class="tools d-flex flex-wrap flex-sm-wrap flex-md-wrap flex-lg-wrap">
                <span id="magnifier" class="d-none d-lg-inline" data-bs-toggle="tooltip" data-bs-placement="bottom"
                      title="ذره بین"><i class="fas fa-magnifying-glass"></i></span>
                <span id="zoom-in" data-bs-toggle="tooltip" data-bs-placement="bottom" title="بزرگ نمایی">
                    <i class="fas fa-magnifying-glass-plus"></i>
                </span>
                <span id="zoom-out" data-bs-toggle="tooltip" data-bs-placement="bottom" title="کوچک نمایی">
                    <i class="fas fa-magnifying-glass-minus"></i>
                </span>
                <span id="fit-size" data-bs-toggle="tooltip" data-bs-placement="bottom" title="اندازه استاندارد">
                    <i class="fas fa-expand"></i>
                </span>
                <div class="seprator-line"></div>
                <span id="rotate-r" data-bs-toggle="tooltip" data-bs-placement="bottom" title="چرخش به راست">
                    <i class="fas fa-solid fa-rotate-right"></i>
                </span>
                <span id="rotate-l" data-bs-toggle="tooltip" data-bs-placement="bottom" title="چرخش به چپ">
                    <i class="fas fa-solid fa-rotate-left"></i>
                </span>
                <span id="flip-v" data-bs-toggle="tooltip" data-bs-placement="bottom" title="چرخش عمودی">
                    <i class="fas fa-grip-lines-vertical"></i>
                </span>
                <span id="flip-h" data-bs-toggle="tooltip" data-bs-placement="bottom" title="چرخش افقی">
                    <i class="fas fa-grip-lines"></i>
                </span>
                <div class="seprator-line"></div>
                <span id="invert" data-bs-toggle="tooltip" data-bs-placement="bottom" title="رنگ معکوس">
                    <i class="fa-solid fa-fill"></i>
                </span>

                <span id="reset" data-bs-toggle="tooltip" data-bs-placement="bottom" title="بازگردانی">
                    <i class="fa-solid fa-rotate"></i>
                </span>
                <span id="info" data-bs-toggle="tooltip" data-bs-placement="bottom" title="اطلاعات">
                    <i class="fa-solid fa-info-circle"></i>
                </span>
                <span id="mobileContrast" class="d-flex flex-column justify-content-center">
                    <i class="fa-solid fa-circle-half-stroke"></i>
                    <div style="margin-top: -5px;" class="contrast-count">-</div>
                </span>
                <span id="mobileBrightness" class="d-flex flex-column justify-content-center">
                    <i class="fa-solid fa-sun"></i>
                    <div style="margin-top: -5px;" class="brightness-count">-</div>
                </span>
                <!-- Range Sliders -->
                <div class="ranges d-flex flex-row ms-5 flex-sm-wrap d-none d-md-none d-lg-block">
                    <label for="contrastRange" class="form-label position-absolute mt-3">
                        Contrast
                        <span id="contrastPercent">-</span>
                        <i id="resetContrast" class="fa-solid fa-rotate ms-1"></i>
                    </label>
                    <input type="range" class="form-range" id="contrastRange" value="100" min="0" max="200">
                </div>
                <div class="ranges d-flex flex-row ms-3 d-none d-md-none d-lg-block">
                    <label for="brightnessRange" class="form-label position-absolute mt-3">
                        Brightness
                        <span id="brightnessPercent">-</span>
                        <i id="resetBrightness" class="fa-solid fa-rotate ms-1"></i>
                    </label>
                    <input type="range" class="form-range" id="brightnessRange" min="0" max="200">
                </div>
            </div>
        </div>
    </section>

    <!-- Image View Section -->
    <section>
        <div id="myWindow" style="width:100%;height:60vh;border: 1px solid #000;" class="d-flex flex-column">
            <div id="myContent" class="position-relative">
                <div class="my-badge" id="myBadge"
                     style="left:20px;top:20px;font-size: 1.1rem; color: white;position: absolute;">
                    <div class="info-box d-flex flex-row justify-content-around mt-2 mb-2 align-content-center text-white fw-bold">
                        <span class="doctor-info text-white">
                            <span class="doc-name">دکتر بهرامی</span>
                            <span class="ingo-sep">-</span>
                            <span class="clinic-name">رادیولوژی مهر</span>
                        </span>
                    </div>
                </div>
                <div class="my-badge" id="myBadge"
                     style="right:20px;top:20px;font-size: 1.1rem; color: white;position: absolute;">
                    <span class="user-info text-white">
                        <span class="name-family">علی کمالی</span>
                        <span class="ingo-sep">-</span>
                        <span class="user-age">25 سال</span>
                    </span>
                </div>
                <div class="img-magnifier-glass"></div>
                <img class="myImage" style="" id="myImage" src="/img/img-1.jpg" alt="image" />
            </div>
        </div>
    </section>

</div>

In my sample web-page it works perfectly, but in my blazor-server project, buttons does not works. What's the problem & how to solve it? I'm using VS 2022 & .Net 7.0 Thanks in advance

Answer 1

Hi @Hamed Vaziri

jquery-3.6.min.js:2 jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function

From the error message, it seems that you are using the JQuery UI tooltip plugin, and you forgot import the JQuery UI reference.
Try to import the JQuery UI reference before using the tooltip method.

protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _jsRunTime.InvokeAsync<IJSObjectReference>("import", "./js/bootstrap.bundle.min.js");
            await _jsRunTime.InvokeAsync<IJSObjectReference>("import", "./js/jquery-3.6.min.js");
            //add the jquery ui reference.
            await JS.InvokeAsync<IJSObjectReference>("import", "https://code.jquery.com/ui/1.13.2/jquery-ui.js");
            await _jsRunTime.InvokeAsync<IJSObjectReference>("import", "./js/wheel-zoom.min.js");
            await _jsRunTime.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
        }
    }

Besides, you should also add the JQuery UI CSS reference in the _Host.cshtml page (header).

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">  

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion