Laravel Notification markasread does no update the notification table - laravel

Question

If I missed an easy part of whole thing forgive.
I am observing a strange behavior of Laravel Notifications between my local development and my server on Bluehost. On my PC it runs version 5.5 and Bluehost 5.4
I set the database notification and successfully can get them as expected.
<ul class="dropdown-menu list-unstyled msg_list" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No notification</strong>
#endforelse
</li>
</ul>
Then when the user click it triggers a javascript to get the route to update the read_at column in my notification table in the database.
<script type="text/javascript" >
function markPostAsRead(countofNotification){
if(countofNotification !== '0')
$.get('/markasread');
}
</script>
Following is the route
Route::get('/markasread',function(){
auth()->user()->unreadNotifications->first()->markAsRead();
});
Everything went as expected on my local environment.
Once uploaded with all migrations in place, the notifications are shown as expected. However when the user clicks the notification the table does not update.
I checked that the js is working with some alerts on both server and local environment. But I do not understand why the table does not update on my server side.
If you could give me one hint it will really help me.
The notification html is a follows
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li role="presentation" class="dropdown" >
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-globe"></i>
<span class="badge bg-green">{{count(auth()->user()->unreadNotifications)}}</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" id="notification" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No Unread Notification</strong>
#endforelse
</li>
</ul>
</li>.
</ul>
</nav>
</div>
</div>
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
$('#notification').on('click', function(e){
e.preventDefault();
var href = this.href;
if(mynotificationcount !== '0') {
$.get('/markasread');
} else {
window.location.href = href;
}
});
</script>
Thanks,

Answer 1

The redirection of the page is faster than the Ajax request to update the table.
you should make the click event trigger the ajax.
<script type="text/javascript" >
$('#notification a').on('click', function(e){
if(countofNotification !== '0') {
$.get('/markasread');
}
});
</script>
if that doesnt work, you will need something more complicated like
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
if(countofNotification !== '0') {
$.get('/markasread')->always(function(){window.location.href = href;});
} else {
window.location.href = href;
}
});
</script>

Answer 2

#N69S
Thank you very much.
I updated the java script a little bit to get around. I named the route and set as follows
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
</script>
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
var url = "{{route('markasread')}}";
if(mynotificationcount !== '0') {
$.get(url).always(function(){window.location.href = href;});
// window.location.href="{{ route('markasread') }}";
} else {
window.location.href = href;
}
});
</script>