Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lara262588's avatar

Need Help with Inline JavaScript Execution in Nested Livewire Components

I'm facing a challenging issue with executing inline JavaScript within a child component of a main component. I have a custom scenario where I'm using a Livewire component to render a wizard (using Filament 3). Specifically, at the second step of the wizard, I want to load another Livewire component dedicated to handling graphs. Ideally, I would like these graph components to be reusable, with each maintaining its own JavaScript logic.

Livewire Parent Component:

class ParentComponent extends Component implements HasForms, HasActions
{
    use InteractsWithActions;

    use InteractsWithForms;

    public ?array $data = [];
    public $importoMultilinea;
    public $allocazione = [];
    public $libera = false;
    public $obbligazionaria;
    public $prudente;
    public $moderata;
    public $azionaria;
    public $tasselli;
    public $repeater;
    public $rating;



    /**
     * Definire le regole di validazione.
     *
     * @return array
     */
    /* public function rules()
    {
        $rules = [
            'importoMultilinea' => 'required',

        ];

        return $rules;
    } */

    public function render()
    {
        return view('livewire.parent-component');
    }

    public function mount()
    {
        $this->form->fill();
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()->schema([
                    Wizard::make($this->getSteps())
                        ->submitAction(new HtmlString(Blade::render(<<<BLADE
                        <x-filament::button
                            type="submit"
                            size="sm"
                        >
                            Submit
                        </x-filament::button>
                    BLADE)))
                ]),


            ]);
    }

In the Step 2 im trying to:

Section::make([
Livewire::make(GraphComponent::class)->lazy(),

 ]),

My child component:

class GraphComponent extends Component
{
    public function render()
    {
        return view('graph');
    }

    public function placeholder()
    {
        return <<<'HTML'
        <div>
            <!-- Loading spinner... -->
            <svg>...</svg>
        </div>
        HTML;
    }
}

With his relative view:

<div>
    <div class="flex flex-wrap" wire:ignore x-init="graph();">
        <!-- Left Block (Block 1) -->
        <span>test</span>
        <div id="container"></div>

    </div>

</div>

<script type="text/javascript">
    async function graph() {
    console.log('Sto eseguendo il js');
    const data = await fetch(
        'http://128.0.10.228:81/graph.json'
    ).then(response => response.json());

    // Create the chart
    Highcharts.stockChart('container', {
        accessibility: {
            typeDescription: `Stock chart with a line series and a flags series
indicating key events.`
        },

        title: {
            text: 'Bitcoin Historical Price and Halvings'
        },

        xAxis: {
            overscroll: 2678400000 // 1 month
        },

        rangeSelector: {
            selected: 3,
            buttons: [{
                type: 'month',
                count: 3,
                text: '3m',
                title: 'View 3 months'
            }, {
                type: 'month',
                count: 6,
                text: '6m',
                title: 'View 6 months'
            }, {
                type: 'ytd',
                text: 'YTD',
                title: 'View year to date'
            }, {
                type: 'year',
                count: 1,
                text: '1y',
                title: 'View 1 year'
            }, {
                type: 'all',
                text: 'All',
                title: 'View all'
            }]
        },

        series: [{
            name: 'Bitcoin Price',
            color: '#ffbf00',
            data: data,
            id: 'dataseries',
            tooltip: {
                valueDecimals: 2,
                valuePrefix: '$'
            }

            // the event marker flags
        }, {
            type: 'flags',
            color: '#fb922c',
            onSeries: 'dataseries',
            shape: 'squarepin',
            showInNavigator: true,
            navigatorOptions: {
                type: 'flags',
                onSeries: undefined,
                data: [{
                        x: Date.UTC(2016, 6, 9),
                        title: '2nd'
                    },
                    {
                        x: Date.UTC(2020, 4, 11),
                        title: '3rd'
                    }
                ]
            },
            accessibility: {
                exposeAsGroupOnly: true,
                description: 'Bitcoin Halving Events'
            },
            data: [{
                    x: Date.UTC(2016, 6, 9),
                    title: '2nd Halving',
                    text: 'Reward down: 25 BTC to 12.5 BTC per block'
                },
                {
                    x: Date.UTC(2020, 4, 11),
                    title: '3rd Halving',
                    text: 'Reward down: 12.5 BTC to 6.25 BTC per block'
                }
            ]
        }, {
            type: 'flags',
            color: '#fb922c',
            shape: 'squarepin',
            showInNavigator: true,
            navigatorOptions: {
                type: 'flags',
                data: [{
                    x: Date.UTC(2024, 3, 19),
                    title: '4th'
                }]
            },
            accessibility: {
                exposeAsGroupOnly: true,
                description: 'Bitcoin Halving Events'
            },
            data: [{
                x: Date.UTC(2024, 3, 19),
                title: '4th Halving',
                text: 'Reward down: 6.25 BTC to 3.125 BTC per block'
            }]
        }]
    });
}
    //Highcharts.setOptions(Highcharts.theme);
</script>

</html>

Unfortunately, I've been struggling for two days with Livewire because the inline JavaScript code does not seem to execute when I invoke these components within the wizard, although it works fine when the Livewire component is called directly on its own route, indeed im getting an error from alpine "graph() is undefined". I'm fairly certain the issue stems from nesting components...

However, I believe this functionality should be feasible; it seems unlikely that it isn't possible. Has anyone else encountered this issue or can offer some insights on how to resolve it?

Thank you in advance for your help!

0 likes
0 replies

Please or to participate in this conversation.