View column javascript

Any good pointers for using Javascript / Livewire inside a view column?

ie. this:

Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

Vanilla JS to keep it simple:

<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

This works on the first page, but when you navigate to second page in your listing, it will not have the function defined and it won't work. Any pointers from here?

Solution

I ended up solving this in the following way:
this to table definition:

 ->header(fn () => self::getToggler())

 ->header(fn () => self::getToggler())

This as a separate function:

public static function getToggler(){
        $html = \Illuminate\Support\Facades\View::make('tables.candidate-header')->render();
        return new HtmlString($html);
    }

public static function getToggler(){
        $html = \Illuminate\Support\Facades\View::make('tables.candidate-header')->render();
        return new HtmlString($html);
    }

And inside the view file I have just plain vanilla JS.

    <script>
        function toggle_visibility(id) {
            var short = document.getElementById("short_summary"+id);
            var long = document.getElementById("long_summary"+id);

            if (short.style.display == 'block') {
                short.style.display = 'none';
                long.style.display = 'block';
            } else {
                short.style.display = 'block';
                long.style.display = 'none';
            }
        }
    </script>

    <script>
        function toggle_visibility(id) {
            var short = document.getElementById("short_summary"+id);
            var long = document.getElementById("long_summary"+id);

            if (short.style.display == 'block') {
                short.style.display = 'none';
                long.style.display = 'block';
            } else {
                short.style.display = 'block';
                long.style.display = 'none';
            }
        }
    </script>

I still wonder though whether there is a more elegant way to handle this, but at least this works.

Jump to solution

View column javascript

Any good pointers for using Javascript / Livewire inside a view column?

ie. this:

Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

Tables\Columns\ViewColumn::make('info')->view('tables.columns.profile'),

Vanilla JS to keep it simple:

<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

<script>
        function expand{{$data->id}}() {
            var short = document.getElementById("short_summary{{$data->id}}");
            var long = document.getElementById("long_summary{{$data->id}}");
            short.style.display = 'none';
            long.style.display = 'block';
        }
    </script>

    <div id="short_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Short summary
    </div>

    <div id="long_summary{{$data->id}}" onclick="toggle_visibility{{$data->id}}()" style="display:block">
        Long summary
    </div>

This works on the first page, but when you navigate to second page in your listing, it will not have the function defined and it won't work. Any pointers from here?

Solution

I ended up solving this in the following way:
this to table definition:

 ->header(fn () => self::getToggler())

 ->header(fn () => self::getToggler())

This as a separate function:

public static function getToggler(){
        $html = \Illuminate\Support\Facades\View::make('tables.candidate-header')->render();
        return new HtmlString($html);
    }

public static function getToggler(){
        $html = \Illuminate\Support\Facades\View::make('tables.candidate-header')->render();
        return new HtmlString($html);
    }

And inside the view file I have just plain vanilla JS.

    <script>
        function toggle_visibility(id) {
            var short = document.getElementById("short_summary"+id);
            var long = document.getElementById("long_summary"+id);

            if (short.style.display == 'block') {
                short.style.display = 'none';
                long.style.display = 'block';
            } else {
                short.style.display = 'block';
                long.style.display = 'none';
            }
        }
    </script>

    <script>
        function toggle_visibility(id) {
            var short = document.getElementById("short_summary"+id);
            var long = document.getElementById("long_summary"+id);

            if (short.style.display == 'block') {
                short.style.display = 'none';
                long.style.display = 'block';
            } else {
                short.style.display = 'block';
                long.style.display = 'none';
            }
        }
    </script>

I still wonder though whether there is a more elegant way to handle this, but at least this works.

Jump to solution

View column javascript

View column javascript

Similar Threads

Similar Threads

Similar Threads