Power-Components / livewire-powergrid

⚡ PowerGrid generates modern, powerful and easy-to-customize data tables using Laravel Livewire.

Home Page:https://livewire-powergrid.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issue with Dynamically Loading JSON Data in View Files

arkdev1 opened this issue · comments

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

No, this error is not related to views.

Is there an error in the console?

No

PHP Version

8.2.16

PowerGrid

5.4

Laravel

10.48

Livewire

3.4

Alpine JS

3.13.5

Theme

Tailwind 3.x, Tailwind 3.x with tailwind/forms

Describe the bug.

I am encountering an issue when attempting to dynamically load JSON data into a view file using the package Powergrid and mohsen1/json-formatter-js. Specifically, the JSON data is supposed to be rendered inside a div element identified by a class that includes the row ID (e.g., json-{{$row->id}}). The expected behavior is for the JSON data to be parsed and formatted using JSONFormatter and then appended to the corresponding div element.

problem.mov

To Reproduce...

No response

Extra information

Detail::make()
    ->view('tables.details.raw-data-json')
    ->params(['tablename' => 'pg:eventRefresh-'.$this->tableName])
    ->showCollapseIcon()
    ->collapseOthers(),


```html
<div class="p-2 bg-white border border-slate-200">
    <div class="json-{{$row->id}}"></div>
    @script
    <script>
        setTimeout(() => {
            const myJSON = JSON.parse(@js($row->json));
            const formatter = new window.JSONFormatter(myJSON);
            document.getElementsByClassName('json-{{$row->id}}')[0].appendChild(formatter.render());
        }, 50);
    </script>
    @endscript
</div>

I've tried with and without @script, same results.

This could work if you created an element with alpinejs instead of sending it via @script. I don't believe it's a bug or lack of wire:key