Livewire v3 loading script

I'm facing a problem with loading JS after re-render. I have a livewire component:

<div>
other divs for charts
</div>
@script('charts')
<script>
</script>
@endscirpt

So for first load everything works, the charts (google charts) are filled up with data from the component class, and rendered. I have a form, where the customer can set the dates, from-to. After sending the data I'm calling the same method for loading data from DB, as in mount method. It re-renders the component, because the binding is working, but after the charts are not loaded, because the script is not loaded.

So my question is, what would be a good approach for this to make it work after submitting the form?

LaryAI

2 years ago

Level 58

To ensure that your JavaScript code runs after Livewire re-renders your component, you can use Livewire's JavaScript hooks. Specifically, you can use the livewire:load event to reinitialize your charts whenever the component is updated.

Here's how you can modify your Livewire component to include the JavaScript necessary for reinitializing the charts after a Livewire update:

<div>
    <!-- other divs for charts -->
    <div id="chart-div"><!-- Chart will be rendered here --></div>
</div>

@push('scripts')
<script>
    function initCharts() {
        // Your chart initialization code here
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // Your chart drawing code here
            var data = google.visualization.arrayToDataTable([
                // Your data array
            ]);

            var options = {
                // Your chart options
            };

            var chart = new google.visualization.PieChart(document.getElementById('chart-div'));
            chart.draw(data, options);
        }
    }

    document.addEventListener('livewire:load', function () {
        initCharts();
    });

    Livewire.hook('message.processed', (message, component) => {
        initCharts();
    });
</script>
@endpush

Explanation:

We define a JavaScript function initCharts() that contains the code to initialize and draw the charts using Google Charts.
We listen for the livewire:load event, which is fired after the Livewire component is initially loaded on the page. When this event is triggered, we call initCharts() to initialize the charts.
We use Livewire.hook('message.processed', ...) to listen for any updates to the Livewire component. After any Livewire update (such as form submission), once the DOM has been updated, we call initCharts() again to reinitialize the charts.

Make sure to replace the placeholder comments with your actual chart initialization and drawing code. Also, ensure that you have the @stack('scripts') directive in your main layout file where you want these scripts to be pushed.

By using this approach, your charts should be properly initialized both on the initial page load and after any subsequent Livewire updates.