Opening a Modal

He Tac,

how did you get it to work? When i change import {Modal} from 'bootstrap'; to import {Modal} from 'bootstrap/js/dist/modal'; i get i error:
bootstrap_js_dist_modal__WEBPACK_IMPORTED_MODULE_15__.Modal is not a constructor
i have this in my controller:
let modal = new Modal(modalObject);

Hey Scott S.!

I still don't understand why the different import behaves differently, but I believe if you do this, you need to import Modal instead of {Modal}:

import Modal from 'bootstrap/js/dist/modal';

Cheers!

Hey Tac,

Thank you for sharing a possible fix with others!

Cheers!

Hey @dioupy!

Sorry for the slow reply! Busy time of year!

I think (unless it's someone else with the exact same question) that we chatted on Slack already a bit. Generally-speaking, though I don't know select2 specifically well, your code looks ok to me. Btw, where/how is Select 2 itself initialized? Is that in your Stimulus controller but you didn't show it here?

Anyway, if you're still having issues, let me know what is and isn't working and we'll see what we can figure out :).

Cheers!

Hey @pasquale_pellicani

Good catch. The import statement has changed in a recent version from stimulus to what you have @hotwired/stimulus. So that's fine
About the comment line, that's a trick to mark a controller as lazy loading. In other words, that controller will be only loaded if something in your page uses it

Cheers!

thanks @MolloKhan for reply, actually to make the example in this guide work, I modified the code like this:

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

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    static targets = ['modal'];

    openModal(event) {
        event.preventDefault();
        const modal = new bootstrap.Modal(this.modalTarget, {backdrop:true, keyboard:false});
        modal.show();
    };
};

...but it seems that something anticipates the stimulus controller, because I receive this error which seems to be due to the fact that the element does not yet exist at the time of the click event

error code:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at he._isAnimated (modal.js:313:26)
    at he._initializeBackDrop (modal.js:195:24)
    at new he (modal.js:83:27)
    at he.getOrCreateInstance (base-component.js:55:41)
    at HTMLAnchorElement.<anonymous> (modal.js:421:22)
    at HTMLDocument.s (event-handler.js:119:21)

thanks to all
P.S.
the modal opens correctly, but I want to resolve the error :)

[solved]
remove from button data-bs-toggle="modal"
button become :

<button 
class="btn btn-primary btn-sm"
data-bs-effect="effect-scale"
data-action="modal-form#openModal"
>New entity</button>

Hey @pasquale_pellicani

Sorry for my slow reply, a long weekend got in the middle :)

Oh ok, so the problem was a Bootstrap modal thing and not actually a Stimulus error. I'm glad to know that you found a solution.

Cheers!

Hi @pasquale_pellicani,

All you need is 1 universal stimulus controller, which can be re-used everywhere and apply it to all forms you need, of course you will need to add some more twig code to use it.

Cheers!

Hey @ikerib!

Ok! Let's see if we can fix this :).

First, about the code above. It's more or less valid, but we can improve :). The problem with code like this is that it will only affect elements that are ON the page the moment you run this. So, for example, if you moved this into assets/app.js (as an example), it would correctly transform all of the elements... that CURRENTLY exist on the page. But if any new elements are added later, nothing would happen with those. That's why you added this after the this.modalBodyTarget.innerHTML = await response.text(); line: you're basically re-initializing your JavaScript now that you have new content on the page. This works, but it's a bummer to need to do this whenever new content is loaded onto the page via AJAX.

Fortunately, this is where Stimulus shines. I'll use the .nireselect2 as an example:

A) Instead (or in addition to) the nireselect2 class, you should render a new stimulus controller onto the select element. I'll assume you're using the form component:

{{ form_row(form.someSelectField, {
    attr: stimulus_controller('select2')
}) }}

B) Create a new assets/controllers/select2-controller.js file:

import { Controller } from '@hotwired/stimulus';
import $ form 'jquery';

export default class extends Controller {
    connect() {
        $(this.elelement).select2({
            placeholder: 'Aukeratu bat',
            width: '100%',
            theme: 'classic'
        });
    }
}

That's it! The key is that, as soon as the data-controller="select2" pops onto the page - no matter HOW it's loaded onto the page - the connect() method in your controller will trigger and it will initialize select2 on that element (this.element).

For the dater picker, it would be a date-picker controller that does the same thing.

For FOSCKEditor, I'm not really sure, as IT, I believe tries to initialize CKEditor on your behalf. Personally, I would skip that bundle and create a small Stimulus controller (like above) to initialize CKEditor. Or use something like https://github.com/basecamp/trix - where all you need to do is render a <trix-editor input="x"></trix-editor> element and it "just works".

Let me know if this helps!

Cheers!

Ryan,

I've just been reading through the comments and saw posts like these from you.
I just wanted to say thank you for taking the time in providing help in the comments.
I'm sure my sentiment is shared with others and that you are greatly appreciated by the silent majority.

Thanks again man.

❤️❤️❤️

Wow! Ok! I undestand what you say, thanks a lot! I will try all tomorrow ;)

Everything working!! Thanks!!

Sorry It O.! That's totally my fault - I got behind yesterday! This tutorial especially (because I've been improving Stimulus with Symfony while making the tutorial!) has been a particularly hard one to get consistently out. But, I *did* just record the 2nd to last video... and so I'll be getting the audio recorded for those ASAP. The last video is, of course, waiting on a pull request to get merged (I hope!) that I just created today - https://github.com/afcapel/... - it's open source meets tutorial building :).

Anyways, more to come soon - with any luck, the last few will come faster than one every day.

Cheers!

great!!! thanks for answering