Laravel js DataTable: how do I assign a value from js back to the .blade?

Question

I have these rows:

each row is being outputted by the DataTable plugin within app.js

my target is this particular value, ${row.category_id}

let TABLE = $('#categoryList').DataTable({
              { data: 'id', name: 'id', width: '10%', orderable: false, searchable: false,
                render: (data, type, row) =>{
                    let html = "";
                    if(row.category_name && row.category_name.toUpperCase() !== "GENERAL"){

                        html += `<ul class="list-inline no-margin">`;
                            html += `<li class="list-inline-item">
                                        <button type="button" value="${row.category_id}" class="edit_category btn btn-outline-secondary"><i class="fas fa-edit" aria-hidden="true"></i> Edit</button>
                                     </li>`;
                        html += `</ul>`;
                    }
                    return html;
                }
            }
});

now I have this blade file, index.blade.php that is connected to app.js using:

<script src="{{asset('/modules/bbr-category-configuration/js/app.js')}}"></script>

What I need to resolve is the constant below:

@section('scripts')
    <script type="text/javascript">
        const SELECTED_CATEGORY_ID = 1;
    </script>
@endsection

by default it is set as 1 , but this needs to changed each time the 'Edit' button is clicked (refer to the screenshot). Once the button is clicked, I need to get ${row.category_id} and assign it to the const SELECTED_CATEGORY_ID . What is the correct way of doing this?

TLDR: how do I pass a value from .js back to .blade.php ?

What I tried:

my first obstacle is to get the value from ${row.category_id} on click, but here is where I got stuck

$(document).on('click', '.edit_category', function () {
    console.log(${row.category_id});
});

I cannot console.log (to test if I got the correct variable) outside the DataTable because it cannot be read, or do it inside toe columns because it is not the right syntax.

please feel free to ask for any clarifications.

Answer 1

First of all, if your variable's data will change during the process then it is not const it should be declared as let . You should know the difference between var let and const .

And you can use data-* attributes in the edit button so you can easily fetch the category_id when that button is clicked eg:

 <button type="button" data-category=`${row.category_id}`class="edit_category">Edit</button>

Then on click event, you can get that data using

$('.edit_category').click(function (e) {
  SELECTED_CATEGORY_ID = $(this).data('category');
});

You can fetch the value attribute of the button too using jquery. But generally, I don't use that. Or I haven't seen much usage of that too. You can try it like this too

$('.edit_category').click(function (e) {
  SELECTED_CATEGORY_ID = $(this).value;
});