Multiple tables on the same page

Is there a way to have multiple tables on the same page (not inside a panel)? I have a fullpage livewire component, where I display 2 tables and a button. Something like this:

<div>
    <button type="submit" wire:click.prevent="submit" class="float-right btn">Button</button>

    @livewire("table1")
    @livewire("table2")
</div>

<div>
    <button type="submit" wire:click.prevent="submit" class="float-right btn">Button</button>

    @livewire("table1")
    @livewire("table2")
</div>

Where the

submit

submit

method does nothing atm (but gets called - tested it with dd):

public function submit(): void
{
  //dd(1);
}

public function submit(): void
{
  //dd(1);
}

This works - both tables are rendered correctly.

But when I click the "Button" button, I get the following error in the JS console:

index.js:34 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint')

index.js:34 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint')

The index.js is just the combined js from livewire, where the error code looks like:

...
constructor(el, connection) {
        el.__livewire = this
        this.el = el
        this.lastFreshHtml = this.el.outerHTML
        this.id = this.el.getAttribute('wire:id')
        this.checkForMultipleRootElements()
        this.connection = connection
        const initialData = JSON.parse(this.el.getAttribute('wire:initial-data'))
        this.el.removeAttribute('wire:initial-data')
        this.fingerprint = initialData.fingerprint // <- Error line

...
constructor(el, connection) {
        el.__livewire = this
        this.el = el
        this.lastFreshHtml = this.el.outerHTML
        this.id = this.el.getAttribute('wire:id')
        this.checkForMultipleRootElements()
        this.connection = connection
        const initialData = JSON.parse(this.el.getAttribute('wire:initial-data'))
        this.el.removeAttribute('wire:initial-data')
        this.fingerprint = initialData.fingerprint // <- Error line

Furthermore, the two tables also swap positions (table2 is now the first table, table1 the second).

When removing one of the table (doesn't matter which one), the error doesn't occure.

Any ideas?

PS: All the table functionalities, like paging, are working.

Multiple tables on the same page

Is there a way to have multiple tables on the same page (not inside a panel)? I have a fullpage livewire component, where I display 2 tables and a button. Something like this:

<div>
    <button type="submit" wire:click.prevent="submit" class="float-right btn">Button</button>

    @livewire("table1")
    @livewire("table2")
</div>

<div>
    <button type="submit" wire:click.prevent="submit" class="float-right btn">Button</button>

    @livewire("table1")
    @livewire("table2")
</div>

Where the

submit

submit

method does nothing atm (but gets called - tested it with dd):

public function submit(): void
{
  //dd(1);
}

public function submit(): void
{
  //dd(1);
}

This works - both tables are rendered correctly.

But when I click the "Button" button, I get the following error in the JS console:

index.js:34 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint')

index.js:34 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint')

The index.js is just the combined js from livewire, where the error code looks like:

...
constructor(el, connection) {
        el.__livewire = this
        this.el = el
        this.lastFreshHtml = this.el.outerHTML
        this.id = this.el.getAttribute('wire:id')
        this.checkForMultipleRootElements()
        this.connection = connection
        const initialData = JSON.parse(this.el.getAttribute('wire:initial-data'))
        this.el.removeAttribute('wire:initial-data')
        this.fingerprint = initialData.fingerprint // <- Error line

...
constructor(el, connection) {
        el.__livewire = this
        this.el = el
        this.lastFreshHtml = this.el.outerHTML
        this.id = this.el.getAttribute('wire:id')
        this.checkForMultipleRootElements()
        this.connection = connection
        const initialData = JSON.parse(this.el.getAttribute('wire:initial-data'))
        this.el.removeAttribute('wire:initial-data')
        this.fingerprint = initialData.fingerprint // <- Error line

Multiple tables on the same page

Similar Threads

Multiple tables on the same page

Similar Threads

Similar Threads

Similar Threads