Problem with select2 from kartik

[karProgrammer]

Hello @loveorigami ,

Very nice library, but I have a problem with Select2 when I open the modal to create an record then open modal to update another record without refresh the page. I think you should destroy the modal created using mode_single before create a new modal with mode_multi.

Thank you.

[loveorigami]

You have idea, how it fix it and where? I have similar problem with all widgets from kartik.

[karProgrammer]

I think the problem when user close modal you hide it instead of remove it from DOM, so when opening another modal, the field in the first modal and the second modal have same IDs, this conflict causes kartik widgets to not work.

Solution: $(".modal").on("hidden.bs.modal", function(){ $(".modal-body").html(""); });

Remove modal body content after hide it.

[karProgrammer]

Please can you tell me why you create multiple modal and not use just one modal in the same page?

[loveorigami]

Multiply MODE - not multiply MODAL. Multiply mode - is mode for display several content in ONE modal. For example - edit model from grid on index page. Modal opened once and load jsSripts also once.

If opened new modal with new js scripts - I have more conflicts with js scripts from first modal

Details you .can see in Readme.md

[karmac2015]

Create (Single Modal Mode)

echo ModalAjax::widget([
    'id' => 'createCompany',
    'header' => 'Create Company',
    'toggleButton' => [
        'label' => 'New Company',
        'class' => 'btn btn-primary pull-right'
    ],
    'url' => Url::to(['/partner/default/create']), // Ajax view with form to load
    'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
    'size' => ModalAjax::SIZE_LARGE,
    'options' => ['class' => 'header-primary'],
    'autoClose' => true,
    'pjaxContainer' => '#grid-company-pjax',

]);

Update (Multi Modal Mode)

echo ModalAjax::widget([
    'id' => 'updateCompany',
    'selector' => 'a.btn', // all buttons in grid view with href attribute
    'options' => ['class' => 'header-primary'],
    'pjaxContainer' => '#grid-company-pjax',
]);

Suppose you have the two above options in same page. When opening the create modal, the modal load the form in modal-body then after you close and open the update modal, the two modal now contains the same form fields but the first in new mode and the second in update mode. Because the same fields with same IDs exist in the both modal a conflict between IDs cause some fields to not work like kartik widgets.

You can update your code to use one modal instead of multiple modal in this case you should change the modal's header and body when showing the modal each time, or you can clear the content of first modal before show another modal to prevent conflict between fields

[loveorigami]

Thanks. Now I understand you issue. But why you use two ModalAjax widgets in one page? For create button you can add class .bfn (as selector in multi mode) and ycur create form will be opened in multi modal.

[karProgrammer]

Thank you, in this way there are no problems 👍