use js in the relation manager

hey i create a custom column whick look like this

<div wire:ignore class="h-46 w-64">
    @if($getState() !== null)
        <div class="swiper">
            <div class="swiper-wrapper">
        @foreach($getState() as $image)
            @php
                $extension = pathinfo($image, PATHINFO_EXTENSION);
                $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            @endphp

            @if(in_array(strtolower($extension), $allowedExtensions))
                <div class="swiper-slide w-full h-full">
                    <img src="{{ Storage::disk('public')->url($image) }}" class="h-full w-full object-cover" alt="{{ $image }}">
                </div>
            @endif
        @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    @endif
</div>

@script
<script>
        new Swiper('.swiper', {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            },
        });
</script>
@endscript

<div wire:ignore class="h-46 w-64">
    @if($getState() !== null)
        <div class="swiper">
            <div class="swiper-wrapper">
        @foreach($getState() as $image)
            @php
                $extension = pathinfo($image, PATHINFO_EXTENSION);
                $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
            @endphp

            @if(in_array(strtolower($extension), $allowedExtensions))
                <div class="swiper-slide w-full h-full">
                    <img src="{{ Storage::disk('public')->url($image) }}" class="h-full w-full object-cover" alt="{{ $image }}">
                </div>
            @endif
        @endforeach
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    @endif
</div>

@script
<script>
        new Swiper('.swiper', {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                type: "fraction",
            },
        });
</script>
@endscript

the swiper works on the custom livewire page but not relation manager page no error in javascript/php log

4 Replies

Dennis Koch•3w ago

Is the script added to the footer? And if it is: Isn't it for every row?

Nuxnux•3w ago

yes for every row it works on a Resource table and on a table in a custom page but not in a relation manager

Dennis Koch•3w ago

Maybe because RMs are subcomponents on a page

Nuxnux•3w ago

I just solved it you need to wrap your js around

Alpine.data('test', () => {
// custom js here
    });

Alpine.data('test', () => {
// custom js here
    });

Gaming

Programming

use js in the relation manager