Cbwire and Bootstrap modal

Box Modules CBWIRE
1

Hi,

I’m trying to put a button with wire:click.prevent action inside a bootstrap modal but it’s not working: The modal shows but it seems that the click doesn’t fire the xhr request and doesn’t say nothing in console.

If I put the button outside the modal, it works.

There is any known issue with modal bootstrap?

Thanks for the great work in cbwire !

2

@David_Sedeno Dang, apologies I’m just now seeing this.

Yes, it definitely should work with the Bootstrap modal. I double checked just now to make sure.

The only thing I can think of why it might not work is if your template had more than one outer element.

Like this:

<div>
    <!--- Wire template here --->
</div>
<!--- Modal div here --->
<div>
    ...
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button wire:click.prevent="save" type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

CBWIRE requires for there to be a single outer element and will do some weird stuff otherwise.

3

yes, later I see an error in console about “double root” and figured out about the outer element issue.

I have create a PR for your cbwire-examples repo with a working bootstrap modal demo.

Thanks @gcopley

1 Like