sonata admin 4 custom js not working events

77 views Asked by At

I see that the v4 sonata uses Webpack - I add

 {% block sonata_javascript_pool %}
                {% for javascript in sonata_config.getOption('javascripts', []) %}
                    <script src="{{ asset(javascript) }}"></script>
                {% endfor %}
            {% endblock %}

            {# localize moment #}
            {% set localeForMoment = canonicalize_locale_for_moment() %}
            {% if localeForMoment %}
                <script src="{{ asset('bundles/sonataform/moment-locale/' ~ localeForMoment ~ '.js') }}"></script>
            {% endif %}

            {# localize select2 #}
            {% if sonata_config.getOption('use_select2') %}
                {% set localeForSelect2 = canonicalize_locale_for_select2() %}
                {% if localeForSelect2 %}
                    <script src="{{ asset('bundles/sonataadmin/select2-locale/' ~ localeForSelect2 ~ '.js') }}"></script>
                {% endif %}
            {% endif %}
        {% endblock %}

        {{ encore_entry_script_tags('myjs') }}

in myjs simple actions not working - I add select2 in the top menu and change events not working ...

here is the stimulus controller

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
  connect() {

    $(this.element).on('select2:initialized', () => {
      this.element.addEventListener('change', this.handleChange.bind(this));
      $(this.element).on('select2:select', this.handleChange.bind(this));
    });


    this.element.addEventListener('change', this.handleChange.bind(this));
    this.element.addEventListener('selection:update', this.handleChange.bind(this));

    $(this.element).on('select2:select', this.handleChange.bind(this));
  }

select is self-change to select2 - think is sonata code.

maybe the conflict is from my webpack - so custom jQuery.. - how to extend sonta js / add my stimulus controllers?

cannot be found in doc https://docs.sonata-project.org/projects/SonataAdminBundle/en/4.x/

i add

console.log('stimulus',global.stimulus);
let app =global.sonataApplication;

const myControllersContext = require.context('./controllers', true, /\.[jt]sx?$/);

myControllersContext.keys().forEach(filename => {
  const controllerName = filename.match(/\.\/(.+)_controller\.js$/)[1];
  app.register(controllerName, myControllersContext(filename).default);
});

and add this js to admin - work but when i create controller for modals

 import { Modal } from 'bootstrap';
export default class bootstrapModal {

filter toogle stop working ...

my packages.json

  "bootstrap": "^3.4.1",
 "jquery": "^3.6.4",

any suggest ?

0

There are 0 answers