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

@onchange not working on select2


Dear support,
i installed blazor version successfully but can't devel @OnChange not working on this form componenet:
https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html
is there any sample or guide for it?

Regards


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 (10)


Blazor and jQuery/JavaScript-based plugins like Select2 can sometimes have compatibility issues, particularly with event handling and data binding, because Blazor operates on a different paradigm (C# code running on WebAssembly or server-side) than traditional JavaScript with geometry dash lite .



Hi There,

Who are still struggling with "OnChange" event not firing in Blazor. There is a way to manually trigger the "Onchange" event when select option is changed in select2.


$(element).on("select2:select", function (e) {
element.dispatchEvent(new Event("change"));
});


in file

scripts.bundle.js line 7080.


This creates some CSS issues when new element is selected, so add class "select2-hidden-accessible" to the select2 select element in HTML.

Hope this helps.



OH MY GOD THANK YOU !



Thanks Lauris,
I tried your ways it's working but without search option like below sample:
https://preview.keenthemes.com/metronic8/demo1/account/settings.html
like country & Language columns

Also issue in DataTable the sort click not working

Also we tried to use another components from html it's not working properly ,
We need a guide how to use html like

Thanks



Thank you for your feedback.

We have an issue with select2 initialization.

To fix the issue you need to call the createInstances function of the KTApp instance.

JS.InvokeVoidAsync("KTApp.createInstances");


Fix will be available in the next Metronic release.

Some of the components from our HTML version might require an additional initialization. Could you please specify which components you are trying to use?



Hi Lauris,

sorry for hooking in, just wanted to mention, that the following example will render the dropdown nicely, but not react on value change or "onchange"-event:


@inject IJSRuntime JsRuntime

<select @bind="@Value" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

<h6>@Value</h6>

@code {
private string Value { get; set; } = "null";

protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeVoidAsync("KTApp.createInstances");
}
}


can you tell us, what to fix?

Many thanks,

Max



yes we have same issue



Hi Max,

Event handling for select2 fields will work differently from classic HTML selects, the ways I described above will work only if you are using uninitialized select2 fields.

For initialized select2 fields please check a solution in the answer below:
https://stackoverflow.com/a/58795843/13267518



Hi Lauris,

does this select2 initialisation applies also to Html version ????, could you confirm !??

I got the same thing here : <a>https://devs.keenthemes.com/question/uncaught-referenceerror-is-not-defined</a>

If so, great, I can wait for the next update.

thank you



Hi,

You can try the example below:


<select @onchange="onChange" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>



@code {
private string value { get; set; }


private void onChange(ChangeEventArgs e){
value = e.Value.ToString();
}
}


Also as an alternative, you can just bind a value using the @bind attribute.

<select @bind="@value" class="form-select" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>


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  :(