Recently, I've started working with Laravel 7 and AJAX. One of the features I want to implement is a 'product's name' navbar that displays product details in a div without refreshing the page when clicked. I came across a demo showcasing this functionality in PHP ( ), but I aim to achieve this in Laravel.
Here is a snippet of the blade part:
<ul class="nav navbar-nav">
<?php
$group = DB::table('package')->where('group_id', 5)->get();
?>
@foreach ($group as $item)
<li id="{{ $item->package_id }}"><a href="#">{{$item->package_name }}</a></li>
@endforeach
</ul>
<span id="page_details"></span>
And here is the script part for the AJAX on the blade file:
<script>
$(document).ready(function () {
function load_page_details(id) {
$.ajax({
type: 'POST',
url: '/getmsg',
data: '_token = <?php echo csrf_token() ?>',
data: {id: id},
success: function (data) {
$('#page_details').html(data);
}
});
}
load_page_details(1);
$('.nav li').click(function () {
var page_id = $(this).attr("id");
load_page_details(page_id);
});
});
</script>
Defined route:
Route::post('/getmsg','AjaxController@index');
And the corresponding controller method:
public function index(Request $request)
{
$pack_id=$request->id;
$msg = DB::table('package')->where('package_id',$pack_id);
$output .= '
<h1>'.$msg->package_id.'</h1>
';
return $output;
}
I would appreciate any assistance in creating a similar dynamic content loading feature in Laravel like the one demonstrated here ( ).