select2 stops working in a multiple modal-CodePudding

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

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

<!-- Button trigger modal -->
<button type="button"   data-toggle="modal" data- 
  target="#examplemodal-{{$user->id}}">
    <i ></i>
 </button> 
<!-- Modal -->
<div  id="examplemodal-{{$user->id}}" tabindex="-1" aria- 
  labelledby="exampleModalLabel" aria-hidden="true">
<div >
    <div >
        <div > 
            <div >
                {!! Form::open(['url' => '/date','files'=>'true']) !!}
                    {{Form::token()}} 
                    <div >
                        <div  id="select"> 
                            <label for="name">Users:</label><br>
                            <select name="entidad_id"  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'
    });
});

CodePudding user response：

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

CodePudding user response：

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}})'  title="Crear orden de compra" data-toggle="modal" data- 
target="#TareAddModalOrdenAdm-{{$user->id}}">
   <i ></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  id="select-{{$user->id}}"> 
     <label for="name">User:</label><br>
     <select name="entidad_id"  style="width:100%">
          <option value=""></option>
    </select>
</div>

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