I'm using select2 for multiselect options. How to update multipleselect from Livewire PHP component while it using wire:ignore

#1

What seems to be the problem:
I’m using select2 for multiselect options. How to update multipleselect from Livewire PHP component based on an other input change while it using wire:ignore. As we know we use wire:ignore to allow select2 to work.

Now If I remove wire:ignore it starts working but select2 styles gone. What could be a possible solution?

Component code
class CreateTeam extends Component
{
public $gameName;

    public function render()
    {
        $favGames = \App\FavGames::where('game_id' , $this->gameName)->get();
        return view('livewire.player.create-team' , compact('games' , 'favGames'));
    }
}

Component blade
<div>
@foreach($games as $game)
@if(\App\FavGames::select('id')->where('user_id',Auth::id())->where('game_id' , $game->id)->exists())
{{ $game->name }}
@endif
@endforeach

                      <div wire:ignore>
                        <select name="invitemembers[]" id="invitemembers"  multiple="multiple" required>
                            @if (isset($favGames))
                                @foreach ($favGames as $favGame)
                                    <option>{{ $favGame->name }}</option>
                                @endforeach
                            @endif
                        </select>
                        </div>
    </div>
Select input with multiple option Not working
#2

I think I experience the same problem:
I use buttons to pre-populate a bootstrap form. I cannot seem to keep the styling or to update the fields. I use chosen to style the multi-select and Bootstrap Toggle to style the checkbox.
When I add wire:ignore and press the button the styling remains, but the select and checkbox are not updated. Without wire:ignore the fields are updated, but I loose the styling.

@abrardev99 how did you fix this or does somebody else has suggestions?

pressButton.php

namespace App\Http\Livewire;

use Livewire\Component;

class pressButton extends Component
{
    public $enabled;
    public $selected;

    protected $listeners = ['populate'];

    public function render()
    {
        return view('livewire.press-button');
    }

    public function populate() {
        $this->enabled = 1;
        $this->selected = ['option_1', 'option_3'];
    }
}

press-button.blade.php

<div>
    <div class="form-group row">
        <select wire:model="selected" class="form-control chosen-select w-100"  multiple>
            <option value="option_1">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
        </select>
    </div>
    <div class="form-group row">
        <input type="checkbox" wire:model="enabled" class="toggle-enable" data-on="yes" data-off="no" data-toggle="toggle">
    </div>
    <div class="form-group row">
        <button id="button" class="btn btn-primary">Press me</button>
    </div>
</div>

@push('javascript')
    <script>
        $(function () {
            $(".chosen-select").chosen({width: '100%'});
        });

        $('#button').on('click', function () {
            window.livewire.emit('populate');
            $(".toggle-enable").prop('checked', (@this.get('enabled'))).change();
            $(".chosen-select").chosen({width: '100%'}).trigger("chosen:updated");
        });
    </script>
@endpush
1 Like
#3

Fixed it to listen to another emit

namespace App\Http\Livewire;

use Livewire\Component;

class pressButton extends Component
{
    public $enabled;
    public $selected;

    protected $listeners = ['populate', 'populated'];

    public function render()
    {
        return view('livewire.press-button');
    }

    public function populate() {
        $this->enabled = 1;
        $this->selected = ['option_1', 'option_3'];
    }

    public function populated() {
        return true;
    }
}

<div>
    <div class="form-group row">
        <select wire:model="selected" class="form-control chosen-select w-100"  multiple>
            <option value="option_1">Option 1</option>
            <option value="option_2">Option 2</option>
            <option value="option_3">Option 3</option>
        </select>
    </div>
    <div class="form-group row">
        <input type="checkbox" wire:model="enabled" class="toggle-enable" data-on="yes" data-off="no" data-toggle="toggle">
    </div>
    <div class="form-group row">
        <button id="button" wire:click="emit('populate')" class="btn btn-primary">Press me</button>
    </div>
</div>

@push('javascript')
    <script>
        document.addEventListener('livewire:load', () => {
            window.livewire.on('populated', column => {
                $(".toggle-enable").prop('checked', (@this.get('enabled'))).change();
                $(".chosen-select").chosen({width: '100%'}).trigger("chosen:updated");
            });
        });
    </script>
@endpush
1 Like
#4

Thanks for comperhensive reply. I got fixed my issue.

1 Like
#5

Hey brother how solve this can you share here, I’m on same problem.