Problem with many select2 components on a page

desyashasyi commented 1 year ago

Brother, how to add more than one select2 component on a page?

I have a problem like this:

And what is this function? data-component-id="{{$this->id}}"

MoamenEltouny commented 1 year ago

@desyashasyi i think it's your code issue so can you please share your code with me? data-component-id="{{$this->id}}" allows the plugin to detect which component this input related to.

RobinPijnappelsAvans commented 1 year ago

I am also having this problem... @MoamenEltouny My code is like this.

Top Livewire component 1: `

<select id="users_id" data-pharaonic="select2" data-component-id="{{ $this->id }}" wire:model="selected">

                    @foreach ($users as $u)
                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                    @endforeach
                </select>
            </div>`

and inside this component i have a Livewire component nested that has the following select2: `

<select id="routine_id" data-pharaonic="select2" data-component-id="{{ $this->id }}" wire:model="selected_routine">

                    @foreach ($routines as $r)
                        <option value="{{ $r->id }}">{{ $r->name }}</option>
                    @endforeach
                </select>
            </div>`

I don't know what im doing wrong... could you help me? Thanks in advance!

MoamenEltouny commented 1 year ago

@RobinPijnappelsAvans i just tested that and works very well with me but i detect that there is an issue with components that haven't class attribute so i will work on it today

MoamenEltouny commented 1 year ago

@RobinPijnappelsAvans if you have any error in the console that says you have error in select2 try to get the latest version

masadi commented 1 year ago

html code `

Tingkat Kelas

    <div class="col-sm-9" wire:ignore>
        <select id="tingkat" class="form-select" wire:model="tingkat" data-pharaonic="select2" data-component-id="{{ $this->id }}" data-placeholder="== Pilih Tingkat Kelas ==" data-search-off="true" wire:change="changeTingkat">
            <option value="">== Pilih Tingkat Kelas ==</option>
            <option value="10">Kelas 10</option>
            <option value="11">Kelas 11</option>
            <option value="12">Kelas 12</option>
            <option value="13">Kelas 13</option>
        </select>
    </div>
</div>
<div class="row mb-2">
    <label for="jenis_rombel" class="col-sm-3 col-form-label">Jenis Rombongan Belajar</label>
    <div class="col-sm-9" wire:ignore>
        <select id="jenis_rombel" class="form-select" wire:model="jenis_rombel" data-pharaonic="select2" data-component-id="{{ $this->id }}" data-placeholder="== Pilih Jenis Rombongan Belajar ==" data-search-off="true" wire:change="changeTingkat">
            <option value="">== Pilih Jenis Rombongan Belajar ==</option>
            <option value="1">Reguler</option>
            <option value="16">Matpel Pilihan</option>
        </select>
    </div>
</div>
<div class="row mb-2" wire:ignore>
    <label for="rombongan_belajar_id" class="col-sm-3 col-form-label">Rombongan Belajar</label>
    <div class="col-sm-9">
        <select id="rombongan_belajar_id" class="form-select" wire:model="rombongan_belajar_id" data-pharaonic="select2" data-component-id="{{ $this->id }}" data-placeholder="== Pilih Rombongan Belajar ==" wire:change="changeRombel">
            <option value="">== Pilih Rombongan Belajar ==</option>
        </select>
    </div>
</div>
<div class="row mb-2" wire:ignore>
    <label for="mata_pelajaran_id" class="col-sm-3 col-form-label">Mata Pelajaran</label>
    <div class="col-sm-9">
        <select id="mata_pelajaran_id" class="form-select" wire:model="mata_pelajaran_id" data-pharaonic="select2" data-component-id="{{ $this->id }}" data-placeholder="== Pilih Mata Pelajaran ==" wire:change="changePembelajaran">
            <option value="">== Pilih Mata Pelajaran ==</option>
        </select>
    </div>
</div>`

Javascript code `@push('scripts')

@endpush`

Livewire componen code `public function updatedTingkat(){ $this->reset(['jenis_rombel', 'show', 'merdeka', 'rombongan_belajar_id', 'pembelajaran_id', 'mata_pelajaran_id', 'data_siswa', 'data_tp', 'data_kd', 'tp_dicapai', 'tp_belum_dicapai', 'kd_dicapai', 'kd_belum_dicapai', 'nilai']); $this->dispatchBrowserEvent('tingkat', ['tingkat' => 'tingkat']); }

public function updatedJenisRombel(){ $this->reset(['show', 'merdeka', 'rombongan_belajar_id', 'pembelajaran_id', 'mata_pelajaran_id', 'data_siswa', 'data_tp', 'data_kd', 'tp_dicapai', 'tp_belum_dicapai', 'kd_dicapai', 'kd_belum_dicapai', 'nilai']); if($this->jenis_rombel){ $data_rombongan_belajar = Rombongan_belajar::select('rombongan_belajar_id', 'nama')->where(function($query){ $query->where('tingkat', $this->tingkat); $query->where('semester_id', session('semester_aktif')); $query->where('sekolah_id', session('sekolah_id')); $query->where('jenis_rombel', $this->jenis_rombel); $query->whereHas('pembelajaran', $this->kondisi()); })->get(); $this->dispatchBrowserEvent('data_rombongan_belajar', ['data_rombongan_belajar' => $data_rombongan_belajar]); } }

public function updatedRombonganBelajarId(){ $this->reset(['show', 'merdeka', 'mata_pelajaran_id', 'pembelajaran_id', 'data_siswa', 'data_tp', 'data_kd', 'tp_dicapai', 'tp_belum_dicapai', 'kd_dicapai', 'kd_belum_dicapai', 'nilai']); if($this->rombongan_belajar_id){ $rombel = Rombongan_belajar::find($this->rombongan_belajar_id); $this->merdeka = Str::contains($rombel->kurikulum->nama_kurikulum, 'Merdeka'); $data_pembelajaran = Pembelajaran::where($this->kondisi())->orderBy('mata_pelajaran_id', 'asc')->get(); $this->dispatchBrowserEvent('data_pembelajaran', ['data_pembelajaran' => $data_pembelajaran]); } } public function updatedMataPelajaranId(){ $this->reset(['show', 'pembelajaran_id', 'data_siswa', 'data_tp', 'data_kd', 'tp_dicapai', 'tp_belum_dicapai', 'kd_dicapai', 'kd_belum_dicapai', 'nilai']); if($this->mata_pelajaran_id){ $pembelajaran = Pembelajaran::where(function($query){ $query->where('rombongan_belajar_id', $this->rombongan_belajar_id); $query->where('mata_pelajaran_id', $this->mata_pelajaran_id); $query->whereNotNull('kelompok_id'); $query->whereNotNull('no_urut'); })->first(); $this->pembelajaran_id = $pembelajaran->pembelajaran_id; $this->getSiswa(); $this->show = TRUE; foreach($this->data_siswa as $siswa){ foreach($siswa->anggota_rombel->tp_kompeten as $tp_kompeten){ $this->tp_dicapai[$siswa->anggota_rombel->anggota_rombel_id][$tp_kompeten->tp_id] = $tp_kompeten->tp_id; } foreach($siswa->anggota_rombel->tp_inkompeten as $tp_inkompeten){ $this->tp_belum_dicapai[$siswa->anggota_rombel->anggota_rombel_id][$tp_inkompeten->tp_id] = $tp_inkompeten->tp_id; } $this->nilai[$siswa->anggota_rombel->anggota_rombel_id] = ($siswa->anggota_rombel->nilai_akhir_mapel) ? $siswa->anggota_rombel->nilai_akhir_mapel->nilai : ''; } $this->dispatchBrowserEvent('data_siswa', ['data_siswa' => 'data_siswa']); } }`

Pharaonic / livewire-select2

Problem with many select2 components on a page #6