Can you help me with this ajax update notifications scenario - Laravel

Pouya
February 26, 2023
191 views
0 votes
2 Answers

I’m working with Laravel 9 to develop a forum project, and I have used database notifications for showing users new notifications such as best answer or etc.

The notifications list works correctly but shows the number of new notifications after the page refreshes. But I need to apply the ajax live update to get real-time applications user experience. So here is the notification-header part, which shows the number of new notifications:

<div class="header__notification-btn" data-dropdown-btn="notification">
    <i class="icon-Notification"></i>
    @if(count(auth()->user()->unreadNotifications) != 0)
        <span id="unreads">{{ digits_persian(count(auth()->user()->unreadNotifications)) }}</span>
    @endif
    <span style="display:none" id="elan"></span>
</div>

Then I tried applying the Ajax part like this:

        notifcount = 0;
        $(document).ready(function() {
            setInterval(function() {
                $.ajax({
                    url: 'new-notifications-exists',
                    method: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if(notifcount == 0){
                            notifcount = response.notifcount;
                        }
                        if(response.notifcount > notifcount){
                            notifcount = response.notifcount;
                            new_notifications_found();
                        }
                    }
                });
            }, 2000);
        });
        function new_notifications_found(){
            $("#unreads").hide();
            $("#elan").show();
            $("#elan").html("+.");
        }

And this is the new-notifications-exists URI handler:

Route::get('/new-notifications-exists', 'ToolsController@count_notifz');

Controller Method:

public function count_notifz()
    {
        if(Auth::check()){
            $notiflist = DB::table('notifications')->where('notifiable_id',auth()->user()->id)->whereNull('read_at')->get();
            $notifcount = $notiflist->count();
            $response = array('notifcount' => $notifcount);
            echo json_encode($response);
        }
    }

So: When I get a new notification, the <span style="display:none" id="elan"></span> must be appeared because of the js function new_question_found() which eventually hide #unreads and show #elan div instead.

But this thing does not work, and I get this error at the Console:

"No query results for model [AppModelsQuestion] new-notifications-exists"**

I don’t know really what’s going wrong here.

So if you have any idea about this or know how to apply ajax properly for these notifications, please let me know…

I would appreciate that.

Answers

- AbdullaNilam
- March 7, 2023 at 12:53 pm
- 0 votes
0
Not sure this will help but this happened to me. The issue is with the route may be. Because error says NotFoundException

Change this
```
Route::get('/new-notifications-exists', 'ToolsController@count_notifz');
```
to this
```
Route::get('/new-notifications-exists', [ToolsController::class, 'count_notifz']);
```
Import your ToolsController in route. use AppHttpControllersToolsController;. (id default path)

And run
```
PHP artisan optimize
```
And use return response()->json($response); instead of echo
Login or Signup to reply.

- Alijvhr
- March 8, 2023 at 9:26 pm
- 0 votes
0
Simply change controller method to this:
```
public function count_notifz()
    {
        if(Auth::check()){
            $notifcount = count(auth()->user()->unreadNotifications);
            return response()->json(['notifcount' => $notifcount]);
        }
    }
```
It works in your header blade then should work everywhere else.

And please put a slash at the beginning of you ajax URL:
```
url: '/new-notifications-exists'
```
Also there is a problem with your ajax:
```
if(notifcount == 0){
    notifcount = response.notifcount;
}
```
If you assign response.notifcount to notifcount then next if will never be true! therefore the new_notifications_found() never executes.

So just simply remove it. The logic will be intact.
```
$.ajax({
    url: '/new-notifications-exists',
    method: 'GET',
    dataType: 'json',
    success: function(response) {
        if(response.notifcount > notifcount){
            notifcount = response.notifcount;
            new_notifications_found();
        }
    }
});
```
Login or Signup to reply.