Don't detect select2
I am trying to use select2 but my function is not detected, the following$('#departamento').on('change', function () {
var data = $(".select2 option:selected").text();
console.log(data);
})
also try the following$('#departamento').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
Replies (12)
Hi Jesus,
I'm not sure where you have this function in your blade file ,but if it is before
<x-base-layout></x-base-layout>Then it will not work and you will have to place the <script></script> after the
</x-base-layout>If you've created your own js file in the assets folder then go to config/global/pages.php and you will need to add the asset to your page you are loading it to
Example -
"YOUR_PAGE_NAME" => array(
"*" => array(
"title" => "YOUR_PAGE_TITLE",
"assets" => array(
"custom" => array(
"js" => array(
"path_to_your_js_file,
),
),
),
),
),If none of that works check the console in chrome using dev tools to see if there is an error. You can paste it here if you need help.
Note - Usually you don't need to a function for select2 using Metronic ,but it seems you may be trying to load the data to the select and you can simply use
<select 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>Also always good to reference the documentation provided as well for examples.
Metronic Select2 Documentation
Hope this helps.
What you mention I have already done, I have it as follows
<x-base-layout>
<select class="form-select form-select-solid" data-control="select2" data-allow-clear="true" data-placeholder="{{ __("mensajes.globales.select_placeholder") }}" name="servicio" >
<option></option>
@foreach ($departamentos as $key => $value)
<option value="{{ $value->departamento_id }}">{{ $value->departamento_nombre }}</option>
@endforeach
</select>
</x-base-layout>What I want to do is to know which element has been selected by java script but it doesn't let me
what you say about config/global/pages.php
"ticket" => array(
"new" => array(
"*" => array(
"title" => "Nuevo ticket",
"assets" => array(
"custom" => array(
"js" => array(
"plugins/custom/ckeditor/ckeditor-document.bundle.js",
"js/custom/ticket/new.js",
),
),
),
),
),
),this is the file -> 'js/custom/ticket/new.js',
Hi Jesus,
Can you explain what this select2 is meant to do? Is it an edit or create form? Is it used for filtering?
I'll need this to better help you fix your problem.
it is used to filter, from what you select it displays information
Hi Jesus,
Could you please try to use this HTML markup?
<select class="form-select" name="tag" data-control="select2">
...Please check if the element is exist here as well.
console.log($("#departamento"));Thanks
if it prints me the console
but my function no longer detects me
, the following code does not work
$(document.querySelector("#kt_ticket_new_form").querySelector("[name="departamento"]")).on("change", (function (event) {
e.revalidateField("departamento");
if (event.target.value.length != 0) {
KTicketMuestraServicios.int();
} else {
KTicketMuestraServicios.limpiar_select_servicio();
document.getElementById("prioridad_int").style.display = "none";
}
}))I tell you that inside my js I place the following, at the beginning
require("select2");if i remove it tell me
Uncaught TypeError: $(...).select2 is not a functionSome help
Hi Jesus,
May I know which Metronic Laravel version are you using?
If it's not the latest, could you please try to get the latest Metronic Laravel version? And then replace these 2 files into your current Laravel project. Please note, if you have modified these files.
resources/assets/core/plugins/plugins.js
webpack.mix.js
Thanks
I use the version Metronic v8.0.35, I don't use the latest version v8.0.36,due to incompatibility, with phpmailer
I have not made any changes to that file.
resources/assets/core/plugins/plugins.js
webpack.mix.jsHi Jesus,
How's the issue going? Have you tried to update with the latest version? Or at least try to update those 2 files?
Thanks
I already tried to update the files and it didn't work, I'll go to the latest version 3.037, I'll let you know how it goes
select2 js file is not available for angular, you should install it from open source.
React Dev Vacancy
