Is there a way to reinitialise 'virgin' render?

kazo

// Datatables
            $('#UserProgressTable').DataTable({
                oLanguage: {
                    sUrl: "{{ asset('assets/plugins/DataTables/pl.json') }}"
                },

                drawCallback: function(settings) {
                    $(".delete-button").each(function(index) {
                        $(this).on("click", function(event) {
                            event.preventDefault();

                            let urlToReplace = "{{ route('actions.progress-delete', ['id' => '__ID__']) }}";
                            let URL = urlToReplace.replace('__ID__', $(this).val());

                            $.ajax({
                                type: 'DELETE',
                                url: URL,
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    id: $(this).val(),
                                },
                                success: function(response){
                                    if ( response.result.success ) {
                                        toastr.success(response.result.message);
                                        $('#UserProgressTable').DataTable().ajax.reload();
                                    }
                                },
                            });
                        });
                    });

                    $(".select-button").each(function(index) {
                        $(this).on("click", function(event) {
                            event.preventDefault();

                            let urlToReplace = "{{ route('actions.progress-select', ['id' => '__ID__']) }}";
                            let URL = urlToReplace.replace('__ID__', $(this).val());

                            // $('#UserProgressTable').DataTable().ajax.reload();


                            $.ajax({
                                type: 'POST',
                                url: URL,
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    id: $(this).val(),
                                },
                                success: function(response){
                                    if ( response.result.success ) {
                                        toastr.success(response.result.message);
                                        $('#UserProgressTable').DataTable().column( 'Ustaw' ).cells().invalidate();
                                        console.log('invalidate');
                                        $('#UserProgressTable').DataTable().ajax.reload();
                                        $('#UserProgressTable').DataTable().draw();
                                        console.log('reload');

                                        // $('#UserProgressTable').load(location.href + " #UserProgressTable");
                                        // $('#UserProgressTable').DataTable().rows(0).invalidate().draw();

                                        // $('#your_table').DataTable()
                                        // .rows().invalidate('data')
                                        // .draw(false);
                                    }
                                },
                            });
                        });
                    });

                },


                order: [[ 2, 'desc' ]],
                lengthChange: false,
                info: false,
                serverSide: false,
                ajax: {
                    url: "{{ route('actions.progress-show') }}",
                    type: "GET",
                    datatype: "json",
                    contentType: "application/json",
                },
                columns: [
                    {
                        data: "",
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        title: 'Nazwa pliku',
                        data: 'filename'
                    },
                    {
                        title: 'Data dodania',
                        data: 'date'
                    },
                    {
                        title: 'Usuń',
                        data: 'id',
                        render: function(data) {
                            return `<button name="id" value="`+data+`" class="delete-button btn btn-danger btn-sm border border-2 border-dark">
                                        <i class="bi bi-trash-fill text-dark"></i>
                                    </button>`;

                        }
                    },
                    {
                        title: 'Ustaw',
                        data: 'id',
                        render: function(data) {
                            // $(".select-button").each(function(index) {
                            //     let value = "{{ Auth::user()->user_game_data_id }}";
                            //     if (value.length >= 1 && value == $(this).val()) {
                            //         $(this).prop('checked');
                            //     }
                            // });
                            let value = "{{ Auth::user()->user_game_data_id }}";
                            let checked = "";
                            if (value.length >= 1 && value == data) {
                                checked = "checked";
                            }
                            return `<input type="radio" name="selectedProgress" `+checked+` value="`+data+`" class="select-button form-check-input">`;
                        }
                    },

                ]
            });

Is there a way to reinitialise 'virgin' render? I mean I don't really know if this is the problem but after doing ajax things onclick on radio button it doesn't make clicked. I mean previous radio button is still triggered after clicking different one.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

I'm not clear what the issue is, sorry. columns.render is called when the cell is first drawn, and not again. If you want to change the cell on each draw, you could use rowCallback.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin