0

I have add my requirejs-config.js

app/design/frontend/Altravista/my_theme/requirejs-config.js

var config = {
    deps: [
        'js/custom'
    ],
    paths: {
        'select2': 'js/select2/select2.min'
    },
    shim: {
    'select2': {
      'deps': ['jquery']
           }
      }
};

I have my custom js file in

app/design/frontend/Altravista/my_theme/web/js/custom.js

define([
    "jquery",
    "select2",
    "domReady!"
], 
function($, select2) {
        "use strict";
        $( function (){
            $('select').select2();
            console.log('my_log');
    });
});

but select2 does not start.

  1. custom.js is loaded (I can see my log in console)
  2. If i write jQuery('select').select2(); in console select2 works

PS: I have try also with selectize.js plugin and I have the same problem

if I use a scroll jquery event it works (start on scroll of page) so it is not a script error

$(function(){
  $(window).scroll(function(){
    // $('select').selectize({
 //     create: true,
 //     sortField: 'text'
    // });
    $('select').select2(
        { 
            width: 'resolve',
            closeOnSelect: true,
            minimumResultsForSearch: -1 
        }
    );
    console.log('Hey!');
    });
});

my custom.js file is loaded before select2.min.js

5
  • Vendor/Theme is your custom module?
    – Sohel Rana
    Jul 28, 2018 at 14:30
  • is my custom theme
    – Altravista
    Jul 28, 2018 at 14:34
  • Could you please show me where you call your script ??
    – HoangHieu
    Jul 29, 2018 at 15:06
  • Does your select element rendered ??
    – HoangHieu
    Jul 29, 2018 at 15:07
  • The script is call in custom.js but select is not rendered
    – Altravista
    Jul 30, 2018 at 6:17

1 Answer 1

1

I have solved with ko afterRender function:

Add afterRender="selectTwo()" to select template html

Vendor/Module/view/frontend/web/template/form/element/select.html

<select class="select select2" afterRender="selectTwo()" ...

add selectTwo function to js component

Vendor/Module/view/frontend/web/js/form/element/select.js

    selectTwo: function (){
        $('select.select2').select2();
    },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.