Bootstrap 5 modal with dynamic content, collection properties don't work

Hi i have a html table, and every row in the table has other content. Every record has a button that opens a bootstrap modal with more info. I noticed i can't use collections in this, and i don't understand why and how to solve it properly. If i pass a normal variable it seems to work fine, this however doesn't work with an one to many relation.

What causes this and how to solve this or should i just put modals in the foreach?

The button:

@foreach ($transactions as $transaction)
<button type="button" class="btn btn-primary btn-sm"
wire:click.prevent="transactionMenu({{ $transaction->id }})">view
</button>
@endforeach

The livewire class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Transaction;
use Livewire\WithPagination;



class TransactionList extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    
    public $selectedTransaction;
    public $transactionItemName;
    public $transactionListing;
    public $transactionMerchant;
    public $transactionCustomer;
    public $transactionEnchants;


    public function render()
    {
        $transactions = Transaction::orderBy('id','DESC')->get();
        return view('livewire.transaction-list',
        [
            'transactions' => $transactions,
        ]);
    }

    public function transactionMenu(Transaction $selectedTransaction) 
    {
        $this->selectedTransaction = $selectedTransaction;
        $this->transactionItemName = $this->selectedTransaction->listing->item->displayName;
        $this->transactionListing = $this->selectedTransaction->listing;
        $this->transactionEnchants = $this->selectedTransaction->listingEnchants; //does not work (one to many)

        $this->dispatchBrowserEvent('showTransactionModal');
    }
}

It has this javascript:

    <script>
        window.addEventListener('showTransactionModal', event => {
            $('#transactionModal').modal('show');
        }) 
  
        window.addEventListener('hideTransactionModal', event => {
            $('#transactionModal').modal('hide');
        }) 
    </script>

This modal works:

    <div class="modal fade" tabindex="-1" id="transactionModal">
        <div class="modal-dialog" wire:ignore.self>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" wire:model.defer="transactions">
                        {{ $transactionItemName}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="itemattribute">
                        <div class="attributetitle">Enchants:</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

This does not work, "Attempt to read property "listing" on null" . Without property, $selectedTransaction will show all the data :

    <div class="modal fade" tabindex="-1" id="transactionModal">
        <div class="modal-dialog" wire:ignore.self>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" wire:model.defer="transactions">
                        {{ $selectedTransaction->listing->item->displayName}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="itemattribute">
                        <div class="attributetitle">Enchants:</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Vinciepincie

4 years ago

Best Answer

Level 1

I found the solution to the problem, i need to check if its null otherwise it won't work. Perhaps this is because when nothing is clicked $selectedTransaction has the value null and livewire will immediately try to load it even though it can't ask the property of null.

Here it will check if $transactionItemName->displayName is not null, if it isn't it will display if it is it will return null.

$transactionItemName->displayName ?? null

Edit: i found a better solution: I just put the modal in this and this works fine:

@if ($selectedTransaction)
//modal
@endif

Please or to participate in this conversation.