Use button inside controller - ajax

Question

I am trying to search users in a panel with ajax. But along with that, I also want to edit the selected user.
I have created the button inside the controller to achieve this but the button isn't working.
Here is my controller code:
public function searchTeacher(Request $request){
if($request->ajax()){
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = DB::table('users')->where('name', $query)->get();
}else{
$data = DB::table('users')->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>'.$row->email.'</td>
<td>'.$row->teacherId.'</td>
<td>'.$row->subject.'</td>
<td> <button href={{route(update-teacher-view), '.$row->id.'}}> Edit</button> </td>
</tr>
';
}
}
else
{
$output = '
<tr>
<td align="center" colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row
);
echo json_encode($data);
}
}
Here is the ajax for search method-
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
console.log(query)
$.ajax({
url:"{{ route('search-teacher') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
Here is my html-
<section class="panel">
<table class="table table-striped">
<thead class="team-list chat-list-side info border-less-list">
<th>Teacher Name</th>
<th>Email</th>
<th>Teacher Id</th>
<th>Subject</th>
</thead>
<tbody>
</tbody>
</table>
</section>
A solution will be appreciated.
Thanks in advance.

Answer 1

Maybe it's a wrong string interpolation? Should be like this:
<?php
$output .= '
<tr>
<td>'.$row->name.'</td>
<td>'.$row->email.'</td>
<td>'.$row->teacherId.'</td>
<td>'.$row->subject.'</td>
<td> <button href='.route('update-teacher-view', $row->id).'> Edit</button> </td>
</tr>
';
Also instead of echo-ing, just return the value, it will be automatically converted to JSON response:
// echo json_encode($data); // Change this line to below
return $data;

Answer 2

Render the blade file with the data this is the best solution.
In controller
return View::make('ajaxFilter',compact('data'))->render();
On ajaxFilter.blade.php
<section class="panel">
<table class="table table-striped">
<thead class="team-list chat-list-side info border-less-list">
<th>Teacher Name</th>
<th>Email</th>
<th>Teacher Id</th>
<th>Subject</th>
</thead>
<tbody>
#if($data->count() > 0)
#foreach($data as $row)
<tr>
<td>{{ $row->name }}</td>
<td>{{ $row->email }}</td>
<td>{{ $row->teacherId }}</td>
<td>{{ $row->subject }}</td>
<td>
Edit //button design
</td>
</tr>
#endforeach
#else
No data Found
#endif
</tbody>
</table>
</section>
On ajax response, you can append HTML data something like that
$('#div_or_section_id').html(data);