Bootstrap select not working after Laravel livewire render

user_1833562 0
Viewed 6561

I have a Bootstrap selectpicker element that works fine on the first render. It's initialized with:

$(document).ready(function () {
    $('select').selectpicker();
});

But after livewire's render function is called the <select> element is not rendered as Bootstrap selectpicker anymore.

Going through both the docs (relevant sections here and here), I figured that the code below should fix it:

<script>
    document.addEventListener("livewire:load", function(event) {
        window.livewire.hook('afterDomUpdate', () => {
            $('select').selectpicker('refresh');
        });
    });
</script>

But this doesn't work. I've also tried:

$('select').selectpicker();

and

$('select').selectpicker('render');

both within afterDomUpdate, that doesn't work as well. If I call all these functions from the console the DOM doesn't update the <select> element, so indeed these functions do not seem to work.

laravel-livewire laravel javascript
5 Answers

in case anyone else gets stuck with this here is how you do it.

<div wire:ignore id="for-bootstrap-select">
     <select class="form-control" data-container="#for-bootstrap-select">
         @foreach($data as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
         @endforeach
     </select>
</div>

Reason from the creator of livewire himself: Caleb!

user_139437540

Just add wire:ignore on your html input/select tag

user_99863510

If some one still seeking form answer. adding wire:ignore is a bad idea, because then you cannot dynamicly change options, for example having select country, and then dynamicly change select city according to country. To get rid of wir:ignore, you can use this out side your component.

<script>
document.addEventListener("DOMContentLoaded", () => {
    Livewire.hook('message.received', (message, component) => {
        $('select').selectpicker('destroy');
    })
});

window.addEventListener('contentChanged', event => {
    $('select').selectpicker();
});</script>

and

$this->dispatchBrowserEvent('contentChanged');

on your component.

selectpicker cannot be rendered on the same select, that why 'refresh' or 'render' doesn`t work even in console. You need to destroy it firest.

user_135208420

I think, you are reinitializing your selectpicker everytime you update the dom. that is why whenever you are using

 $('select').selectpicker('refresh');

inside your livewire hook, its basically refreshing the fresh initialized selectpicker in your dom. I'm guessing it, because as per your code and statement above it should work unless behind the scene something wrong happen like I mentioned.

I dont know if I make sense. please check either you are reinitializing it before refreshing. let me know

user_108044090

Try

$('.selectpicker').selectpicker('refresh');

I know this is practically the same as yours but in my case, not all selects were bootstrap-selects, so targeting just the class of .selectpicker seemed to have the desired effect. Could be a red herring, but worked for me.

user_41890320
Related