Reload custom scripts after component reload

Hello,

I have a livewire component and in the component blade file there is custom JS, and I have given a button for just a refresh of the component.

The problem is, when I click on the refresh button it does not execute custom scripts, but this custom script only works on the first page or first component load,

As soon as I click on Refresh, it does not work and comes to the default state.

How can I achieve scripts to execute when the component is loaded?

I tried with @script, document.addEventListener('livewire:initialized', () => { but did not worked.


<div>
  <button type="button" class="btn btn-sm btn-light" wire:click="$refresh">Refresh</button>
</div>
<script>

    function scrollToRow(className) {
        var rowsToScroll = document.getElementsByClassName(className);
        var tableContainer = document.querySelector('.table-container');
        if (rowsToScroll.length > 0 && tableContainer) {
            for (var i = 0; i < rowsToScroll.length; i++) {
                var element = rowsToScroll[i];
                var elementRect = element.getBoundingClientRect();
                var containerRect = tableContainer.getBoundingClientRect();
                var scrollableTop = elementRect.top - containerRect.top + tableContainer.scrollTop;
                var middle = scrollableTop - (containerRect.height / 2) + (elementRect.height / 2);
                tableContainer.scrollTo({
                    top: middle,
                    behavior: 'smooth' // Optionally, to scroll smoothly
                });
            }
        }
    }

...
//Some many JS ...

</script>

Snapey

2 years ago

Level 122

add js to listen to a livewire event, then fire that custom event from your livewire component

LaCoder

2 years ago

Level 1

@Snapey Hello Snapey, It is almost worked, but some issues in dom updates,

I have below code when componentUpdated is fired,

        $wire.on('componentUpdated', () => {
            scrollToRow('row-to-scroll');
            updateCeProgressBar();
            updatePeProgressBar(); // Run once on page load

        });

function updateCeProgressBar() {
    
            var rows = document.querySelectorAll('#OptionChainTable tbody tr');

            //Process CALLs
            var maxTdValueCalls = 0; // Initialize the maximum value to zero
            rows.forEach(function(row, index) {
                var prevRow = rows[index - 1];
                if (prevRow) {
                    // Get the value of the td in the upper row with class "value"
                    var value = getTdValueByClass(prevRow, 'calloi');

                    if (value !== null) { // Check if value is not null
                        maxTdValueCalls = Math.max(maxTdValueCalls,
                            value); // Update the maximum value
                    }
                }
            });

            // Set the width of the line relative to the maximum value
            rows.forEach(function(row, index) {
                var prevRow = rows[index - 1];
                if (prevRow) {
                    var value = getTdValueByClass(prevRow, 'calloi');

                    if (value !== null) {
                        var relativeWidth = Math.round((value / maxTdValueCalls) *
                            100); // Calculate the relative width as a percentage
                        var cebarElement = row.querySelector('.cebar');
                        cebarElement.style.width = relativeWidth +
                            '%'; // Set the width of the current row
                    }
                }
            });
        }

When the initial component loads, it assigns the correct width style to element cebarElement.style.width = relativeWidth

Width applied as below,

<div class="bg-success rounded h-4px cebar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 98%;"></div>

but when the component is reloaded with the livewire event, it removes the style. width and does not apply new width as it does in the initial component load,

after reload,

<div class="bg-success rounded h-4px cebar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>

if I do console.log(relative width) I get all desired values, but for whatever reason, it does not reapply style width to the element, so it looks like DOM manipulation is not working when re-render component, How to fix this?

Please or to participate in this conversation.