Load Table But another response is undefined - php

Question

I am using Codeigniter 4 with csrf active.
I have tried to make Search form with the table will load without loading on page.
It is success on first attempt, but another response--which is token_value get undefined. And if I tried to search for the second time it get error 403 Forbidden.
Here is my jquery looks like:
$("#btnSearch").click(function(){
$.post("vendor/search",
{
"searchByCode":$("input[name='searchByCode']").val(),
"<?= csrf_token() ?>" : "<?= csrf_hash() ?>"
},
function(data, status){
alert(data.token_value);
$("#table_vendors").html(data);
});
});
and this is my related Controller looks like
public function search()
{
$result = $this->vendors;
if ($this->request->getPost('searchByCode')) {
$result->like('code', $this->request->getPost('searchByCode'));
};
$data = [
'vendors' => $result->paginate(10, 'vendors'),
'page' => $result->pager,
'token_value' => csrf_hash()
];
return view('vendors/_vendors', $data);
}
This is what happen when I click search for a second time.
I wish I could do re-search with my code above without refreshing page.

Answer 1

Try this in your JS:
// Courtesy of W3Schools :o)
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
function resetCSRF(){
$('input[name="csrf_cookie_name"]').val(getCookie('csrf_cookie_name'));
}
Assuming your cookie name is csrf_cookie_name then call resetCSRF() after each form submit. This code will get the latest Cookie value and set it in the form and should allow you to resubmit without refreshing.