CODEWITHSUNDEEP
javascriptjqueryasp.net-coreblazorblazor-webassembly
Wilrod
Wilrod

Reputation: 47

How to Initialize existing Jquery in Blazor WebAsambly

I'm migrating an existing website to Blazor WASM on .NET Core 5 and i've had some challenges initializing/calling this plugin from blazor. See HTML and JS code below:

On my current website I initialize this plugin as follow:

<script src="./hs-unfold.min.js"></script>        
<script>
    $(document).on('ready', function () {
    // INITIALIZATION OF UNFOLD
    // =======================================================
    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
    });
</script>

Then on the HTML Page

<div class="hs-unfold">
    <a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
         }'>Dropdow on hover</a>
    
    <div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
        <a class="dropdown-item active" href="#">Active</a>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

As showing above the properties for this JQuery plugin are passed through HTML tags:

<a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
}'>

Upvotes: 1

Views: 1494

Answers (2)

Wilrod
Wilrod

Reputation: 47

@Neil-W thanks for your help with the code above. I was able to remediate the issue by providing the js function options/parameters on the .js initializer file. Below the code for reference:

Create .Js file on wwwroot/ serving as middleware to initialize JS code

**hs-unfold-initializer.js**

(function () {

        // INITIALIZATION OF HS-Unfold 
        // ======================================================
    window.HSUnfoldFuntions = {
        AddHSUnfold: function (unfoldElement) {
            //unfold options
            var options = {
                target: '#editDropdownElement',
                type: "css-animation"
            };
            //set a new intance of HSUnfold
            new HSUnfold(unfoldElement, options).init();
        },
    };

})();

Initialization script in the header of your Blazor Index.html page:

<head>
    <script src="./hs-unfold.min.js"></script>
    <script src="./hs-unfold-initializer.js"></script>
</head>

In your Component

        @inject IJSRuntime JS
        @inject ElementReference hsUnfoldEditElement
    
    <div class="hs-unfold">
        <a @ref="@hsUnfoldEditElement" class="js-hs-unfold-invoker btn btn-primary dropdown-toggle">
    Dropdow on hover</a>
        
        <div id="editDropdownElement" class="hs-unfold-content dropdown-unfold dropdown-menu">
            <a class="dropdown-item active" href="#">Active</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
@code{

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {

            if (firstRender)
            {
                //hsUnfold
                await JS.InvokeAsync<string>("HSUnfoldFuntions.AddHSUnfold", hsUnfoldEditElement);
            }

        }
}

Upvotes: 0

Neil W
Neil W

Reputation: 9247

To replicate this in Blazor, you'll need to hook into the Component Lifecycle events and use a bit of JSInterop.

Create a js file to hold your own initialization code

**hs-unfold-initializer.js**

window.MyJS = {
    initialiseHSUnfold: function() {
        // INITIALIZATION OF UNFOLD
        // =======================================================
        var unfold = new HSUnfold('.js-hs-unfold-invoker').init();        
    }
}

Load the plug-in script and your initialisation script in the header of your Blazor Index.html page:

<head>
    <script src="./hs-unfold.min.js"></script>
    <script src="./hs-unfold-initializer.js"></script>
</head>

In your component:

Inject JS Interop (IJSRuntime), add your html, and trigger your initializer after render. Note that you cannot do this during component initialize as the DOM is not loaded at that point. The OnAfterRenderAsync lifecycle method is there to allow you to perform actions after the DOM has loaded.

@inject IJSRuntime IJS

<div class="hs-unfold">
    <a class="js-hs-unfold-invoker btn btn-primary dropdown-toggle" href="javascript:;"
         data-hs-unfold-options='{
           "target": "#dropdownHover",
           "type": "css-animation",
           "event": "hover"
         }'>Dropdow on hover</a>
    
    <div id="dropdownHover" class="hs-unfold-content dropdown-unfold dropdown-menu">
        <a class="dropdown-item active" href="#">Active</a>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

@code {
    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
             await IJS.InvokeVoidAsync("MyJS.initialiseHSUnfold")
        }
    }
}

Upvotes: 1

Related Questions