Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
KTSelect.getOrCreateInstance is not a function error in Metronic 9.x KTSelect
I’m upgrading to Metronic 9.x (Tailwind CSS) and trying to initialize a KTSelect on my <select> element, but I get:
Uncaught TypeError: KTSelect.getOrCreateInstance is not a function
Example markup:
<select
id="districtSelect"
class="kt-select"
data-kt-select="true"
data-kt-select-placeholder="Seçiniz"
data-kt-select-multiple="true"
data-kt-select-config='{
"optionsClass": "kt-scrollable overflow-auto max-h-[250px]"
}'>
</select>
Initialization code:
const districtEl = document.querySelector("#districtSelect");
var districtSelect = KTSelect.getOrCreateInstance(districtEl, {
placeholder: 'Şehir seçiniz',
enableSearch: true,
searchPlaceholder: 'Ara...'
});
What I’ve tried:
- Inspected
core.bundle.jsand confirmed thatKTSelectis defined but does not exposegetOrCreateInstance(unlikeKTModal). - Manually calling
new KTSelect(districtEl, …)works as expected. - Checked that I’m using the demo-6 assets for Metronic 9.x.
Questions:
- Does Metronic 9.x include a static
KTSelect.getOrCreateInstancemethod? - If not, what’s the recommended way to add “get or create” behavior to KTSelect?
- Is there a simpler alternative to ensure I don’t accidentally re-initialize an existing instance?
Any guidance on how to resolve this or best practice for managing KTSelect instances would be greatly appreciated.
Replies (2)
Hi
KTSelect attaches its instance to the DOM element as element.instance.
Best practice:
- Before creating a new instance, check if
element.instanceexists and is aKTSelectinstance. - If not, create a new one.
Example:
const districtEl = document.querySelector("#districtSelect");
let districtSelect = districtEl.instance;
if (!districtSelect) {
districtSelect = new KTSelect(districtEl, {
placeholder: 'Şehir seçiniz',
enableSearch: true,
searchPlaceholder: 'Ara...'
});
}
To avoids double-initialize and the error, You can create your helper:
function getOrCreateKTSelect(element, config) {
if (!element.instance) {
element.instance = new KTSelect(element, config);
}
return element.instance;
}
