Django AJAX reload part of the HTML

Question

I have a problem rendering the HTML element 'live'.

This is my idea, I have a topbar which is included(not extending anything) in the 'base.html' like this :

...
base.html


        
        
            
            {% include 'topbar.html' %}
...

And this is the 'topbar.html' itself :

topbar.html


{% load static %}
{% load custom_tags %}
{% notification_tag as notifications %}
{% current_time as current_time %}
{% events as all_events %}

    ...
    
        
        
            
                
                
                {% if notifications %}
                    {% for notif in notifications %}
                        {% if notif.date_to_remind <= current_time %}
                            {{ notifications.count }}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            
            
            
                
                    Obaveštenja
                
                {% for n in notifications %}
                    {% if not n.viewed %}
                        
                            
                                
                                    
                                
                            
                            
                                {{ n.eluid_posla }}
                                {{ n.message|slice:"25" }}
                            
                        
                    {% endif %}
                {% endfor %}
                Prikaži
                    sva obaveštenja
            
        
    ...

The idea is, when there is a notification at the exact time, the notification alert show's up (simple red dot from span element) - but without refreshing the page. I managed to show the notification alert but only after the manual refresh, so the logic for showing notifications and stuff is good. I just need some help for writing the Ajax call.

I am pulling the data from a custom template tag so there is no urls for this :

custom_tags.py

@register.simple_tag(name='notification_tag')
def all_notifications():
    current = timezone.now() + timezone.timedelta(hours=settings.ADD_HOURS)

    notification = Notifications.objects.all().filter(viewed=False, date_to_remind__lte=current)
    return notification


@register.simple_tag(name='events')
def all_events():
    events = Events.objects.all()
    return events


@register.simple_tag(name='current_time')
def now():
    current = timezone.now() + timezone.timedelta(hours=settings.ADD_HOURS)
    return current

How should I approach this? Where should I put the Ajax code block? Should I write Ajax request inside the custom_tags.py or the views?

I will copy my views.py also, but those functions aren't rendered directly in the topbar. Im using views for another template, which is working properly, and there's no need to go with Ajax there.

views.py

@method_decorator(login_required, name='dispatch')
class AllNotifications(ListView):
    model = Notifications
    template_name = 'notifications/all.html'
    context_object_name = 'notificaion_list'
    paginate_by = 5

    def get_context_data(self, **kwargs):
        context = super(AllNotifications, self).get_context_data(**kwargs)
        notifications = self.get_queryset().order_by('date_to_remind')
        page = self.request.GET.get('page')
        paginator = Paginator(notifications, self.paginate_by)

        try:
            notifications = paginator.page(page)
        except PageNotAnInteger:
            notifications = paginator.page(1)
        except EmptyPage:
            notifications = paginator.page(paginator.num_pages)

        context['notification_list'] = notifications

        return context

    def post(self, request):
        if request.is_ajax():
            data = {'notifs': self.get_queryset()}
            return JsonResponse(data)


@method_decorator(login_required, name='dispatch')
class Notification(DetailView):
    model = Notifications
    template_name = 'notifications/notification_details.html'
    context_object_name = 'notification_details'

    def get_context_data(self, **kwargs):
        context = super(Notification, self).get_context_data(**kwargs)
        self.object.viewed = True
        self.object.save()
        return context


@method_decorator(login_required, name='dispatch')
class NotificationCreate(CreateView):
    model = Notifications


@method_decorator(login_required, name='dispatch')
class NotificationDelete(DeleteView):
    model = Notifications

    def get_success_url(self):
        return reverse('notifications_all')

And this is my base.html :

base.html

{% load static %}




    
    
    
    
    
    
    
    Teledirekt | {% block title %}{% endblock title %}
    


    
    
    
    

    
    
    

    
    
    

    {# Include Bootstrap 4 and jQuery #}
    

    





    
    {% include 'sidebar.html' %}
    
    
        
        
            
            {% include 'topbar.html' %}
            
            
                
                
                    {% block content_row %}

                    {% endblock content_row %}
                
            
        
        
        {% include 'footer.html' %}
        
    




    
        
            
                Da li želite da izađete?
                
            
            Klikom na "Izlaz" prekidate Vašu sesiju.
            
                
                Izlaz
                
                    {% csrf_token %}

So one more time, I just need the "badge danger" from span element to appear when the notification time hits the current time, without manual refreshing.

user_2351696 · Answer

The below code is a basic example to check notification by ajax request to server every 10 seconds.

create an url:

path('ajax_notification/', NotificationCheck.as_view()),

create a view for ajax response:

from django.views import View
from django.http import HttpResponse
@method_decorator(login_required, name='dispatch')
class NotificationCheck(View):
    def get(self, request):
        return HttpResponse(Notifications.objects.filter(viewed=False).count())

Your base.html file:



  
    Notification check
    
    
  
      
    
      Navbar
      
               
          
             
            Messages (current)

Django AJAX reload part of the HTML

1 Answers