select2 stops working in a multiple modal

JL DIAZ 0
Viewed 39

Hello I have a problem with select2, I have a project in laravel where I have a table where I list the data to display and in the last boxes of my table in all the data I use a button that opens a modal

enter image description here

to differentiate the modal uses a name plus a hyphen and the id of the data:

<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-success"  data-toggle="modal" data- 
  target="#examplemodal-{{$user->id}}">
    <i class="fas fa-folder-plus"></i>
 </button> 
<!-- Modal -->
<div class="modal fade" id="examplemodal-{{$user->id}}" tabindex="-1" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
        <div class="modal-body"> 
            <div class="card card-body">
                {!! Form::open(['url' => '/date','files'=>'true']) !!}
                    {{Form::token()}} 
                    <div class="row">
                        <div class="form-group col-4" id="select"> 
                            <label for="name">Users:</label><br>
                            <select name="entidad_id" class="form-control selectAdmwn" style="width:100%"> 
                                    <option value="{{$user->user_id}}">{{$user->name}}</option>  
                            </select>
                        </div>
                    </div>
                    {!! Form::submit('Guardar',['class' =>'btn btn-primary btn-lg']) !!}
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

but in that modal I use the select2 to have a quick access to the data of a select but as the id of my modal has that structure already shown in the code above the select2 stops working.

I have seen that they use this code to solve but in that case they use a unique id for a modal in my case I use several modals how could I do it?

$(document).ready(function(){
    $('#tecnics').select2({
    dropdownParent: 'modal-id'
    });
});
jquery-select2 jquery laravel javascript
2 Answers

The select2 needs to initialize on an existing DOM element. Since your modals change dynamically, you need to re-initialize the select2 every time the modal opens.

I see you're using Bootstrap, so implement something like this:

const myModalEl = document.getElementById('#myModalEl')

myModalEl.addEventListener('shown.bs.modal', event => {
    $('#tecnics').select2({
        dropdownParent: 'modal-id'
    });
})

This is a crude example, you will have to adjust it to get it working properly. I also noticed that you're using #technics in your code, which will cause issues because only one element can have an ID per document.

Learn more about Bootstrap modal events here: https://getbootstrap.com/docs/5.2/components/modal/#events

kjoedion0

I may not have explained myself well but I appreciate your help, I arrived at the solution by adding an onclick to the modal button in order to pass its id in a javascript function.

<button type="button" onClick='mandarId({{$user->id}})' class="btn btn- 
outline-success" title="Crear orden de compra" data-toggle="modal" data- 
target="#TareAddModalOrdenAdm-{{$user->id}}">
   <i class="fas fa-folder-plus"></i>
</button>

and in my script the id obtained I pass it to a variable and then I call the select2 where in the dropdownParent I make a combination and put my created variable

<script>
function mandarId(id){
 var id_modal = id;
    $('.selectAdmin').select2({
      width: '100%',
      dropdownParent: $('#select-'+id_modal )
     });
}
</script>

it should be noted that for this to work before our select must have a parent id where we pass the id.

<div class="form-group col-4" id="select-{{$user->id}}"> 
     <label for="name">User:</label><br>
     <select name="entidad_id" class="form-control selectAdmin" style="width:100%">
          <option value=""></option>
    </select>
</div>

that way I managed to get the select2 to work in all my modals.

JL DIAZ0
Related