Select2 on change Event not working
Hi !
I use Metronic 8 for Symfony, I use Select2 in a modal, and I try to set values in JS (Multiple values), but even when doing a .trigger('change') or select2:select, the values are not displayed in the input. On the other hand, when I open the dropdown, I can see my selected values, and when I select another value, all the values are displayed in the input.
Do you know why I can't trigger the change on the input? Even detect on('select2:select') doesn't work. It looks like select2 is initialized, but I can't use the functions or events. The onchange is detect but nothing happens in the input.
I call KTApp.init() when I open my modal to initialize my Select2. This may be because the Metronic JS is not loaded in the same folder as my current JS (the Metronic was added to an existing project).
Edit :
I also need to detect the event "select2:unselect" but this doesn't work either
{{ form_widget(form.owners, {"attr": {"class": "form-select form-select-transparent", "data-control": "select2", "data-dropdown-parent":"#modalLinkOwner"}}) }}let $selectOwners = $body.find("#form_owners");
$selectOwners.val(values);
$selectOwners.trigger("change");Capture after I've set 3 values :
https://ibb.co/4jXVT97
Capture after I've selected 1 value in the dropdown :
https://ibb.co/rZwNT27
Thanks in advance !
Replies (6)
Hi,
Apologise for the delay. Make sure you are initializing Select2 after your modal is opened and your form elements are rendered. If you are using Metronic's KTApp.init(), ensure it is called after the modal is open.
// Example: Call KTApp.init() after opening the modal
$("#yourModal").on("shown.bs.modal", function () {
KTApp.init(); // Ensure KTApp.init() is called after your modal is open
});Confirm that the Select2 library is loaded before your script is executed. Ensure that your scripts are loaded after Metronic scripts.
Open your browser's console (usually by pressing F12) and check for any JavaScript errors. Resolve any errors that might be preventing the correct execution of your scripts.
If Metronic is added to an existing project and the assets are not in the same folder as your current JS, make sure that the paths to Metronic assets are correct.
If the problem persists, consider providing more details or checking the browser console for any error messages that might help identify the issue.
Thank you for your reply!
To answer your questions, the "KTApp.init()" is after our "modal.show()", and we see that the Select2 is well initialized because it works, it's only the events that don't work, or the use directly of the ".select2()" function.
We always load the Metronic scripts first ("assets/js/scripts.bundle.js" & "assets/plugins/global/plugins.bundle.js") and no errors are displayed in the console.
Do we need to load an additional script for Select2 or is this enough?
https://ibb.co/HN0mFP7
If, for the test, I try to initialize select2 (after the "KTApp.init()") with "$('#selectId').select2();", I get the error "select2 is not a function".
I can't figure out what the problem is...
The error "select2 is not a function" indicates that the Select2 library may not be fully loaded or initialized at the point where you're trying to use it.
Confirm that your custom script, where you're trying to initialize Select2, is executed after the Select2 script is loaded. You can achieve this by placing your initialization script at the end of the HTML body or by wrapping it in a document ready function.
<script>
$(document).ready(function() {
// Your Select2 initialization here
$("#selectId").select2();
});
</script>Hi,
Unfortunately, the script is loaded when I call the function, I even used setTimeout of 10 seconds to be sure.
Although my select2 is functional, I'm still unable to use the select2 function or events.
For lack of a solution, I'm going to use another method rather than select2, but thank you!
Hey! I was having the exact same problem.
What my problem was that I was loading JQuery AFTER plugins.bundle.js.
When loading JQuery BEFORE the plugins bundle it worked!
Hopefully it's the same problem for you and this can help you fix it.
Thanks.
Hello,
Thanks for your feedback!
I solved this problem really recently, we were loading another jQuery, and the init of Select2 was with the Metronic's jQuery, so using another jQuery didn't allow to use the select2 functions (even if the selects were well loaded).
So we removed our jQuery and used the Metronic's for the entire project !
