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

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

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, privacy policy and cookie policy

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