Issue
I am trying to implement live search bar. The live search is working but it however outputs the output content twice, which is annoying. Could you please have a look where the problem is? Thanks.
Here is my code for the search function.
public function search(Request $request)
{
if ($request->ajax()) {
$output = "";
$projects = Project::where('title', 'LIKE', '%' . $request->search . '%')
->where('module_code',$request->module_code)
->get();
$count = count($projects);
// $projects = array_unique($projects);
if ($projects) {
foreach ($projects as $project) {
$output .= '<tr>' .
'<td>' . $project->team_number . '</td>' .
// '<td>' . $count . '</td>' .
'<td>' . $project->lab . '</td>' .
'<td>' . '<a href="/projects/' . $project->id . '" style="display:block;"><b>' . $project->title . '</b></a>' . '</td>' .
'<td>' . $project-> latest_state. '</td>' .
'<td>' . $project->team_member_1 . '</td>' .
'<td>' . $project->latest_team_member_1_state . '</td>' .
'<td>' . $project->team_member_1 . '</td>' .
'<td>' . $project->latest_team_member_1_state . '</td>' .
'<td>' . $project->team_member_1 . '</td>' .
'<td>' . $project->latest_team_member_1_state . '</td>' .
'<td>' . $project->ta . '</td>' .
'<td>' . $project->created_at . '</td>' .
'<td>' .
'<button class="btn-sm btn-info pull-left" onclick="location.href = \'/projects/' . $project->id . '\'">Project Details</button> ' .
'</td>' .
'</tr>';
}
return Response($output);
}
}
}
Here is the script for live search in php blade:
<script type="text/javascript">
const getQueryParams = (params, url)=>{
let href = url;
let regexp = new RegExp('[?&]' + params + '=([^&#]*)', 'i');
let qString = regexp.exec(href);
return qString ? qString[1] : null;
}
$('#search').on('keyup',function(){
$value = $(this).val();
//alert($value);
$qString = getQueryParams('module', window.location.href);
$queryString =
$.ajax({
type : 'get',
url : '{{URL::to('search')}}',
data : {'search':$value, 'module_code', $qString},
success:function (data) {
//console.log(data);
//alert(data);
$('tbody').html(data);
}
});
})
</script>
Here is the code for search bar in php blade
<div class="col-sm-5">
<input type="text" class="form-control" id="search" name="search" placeholder="Search..."/>
</div>
Solution
Damn, I just found out what's causing the problem. It's kind of silly. The original code is here: https://onecompiler.com/posts/3xy39rm78/php-blade-for-staff, the bug is still up there. The problem was that, I added an additional tag that is unnecessary. The output is placed wherever there is a tag as the script was:
$('#search').on('keyup',function(){
$value = $(this).val();
$qString = getQueryParams('module', window.location.href);
$queryString =
$.ajax({
type : 'get',
url : '{{URL::to('search')}}',
data : {'search':$value, 'module_code': $qString},
// data : {'search':$value},
success:function (data) {
//console.log(data);
// alert(data);
$('tbody').html(data);
}
});
})
At the very last bit of the code, it tells html to print result at the tag(I'm not sure if this is right). By deleting the additional tbody tag, the problem was solved.
Answered By - JPPPPP Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.