Using Ajax to update a table on a page in django

Question

I am trying to the table in my all-reviews whenever someone checks one of the filters at the top using ajax. However, when a filter is checked it is getting the entire page back including things like the navbar and then updating the table with the entire page data instead of just the filtered reviews. The issue I believe is with my view since its rendering the all-reviews.html page but I cannot figure out how to do it properly where the returned data doesn't include the navbar and other unneeded information that is imported into my base.html. Lastly, I am trying to make it so that if they click a filter, it loads the new data, but then if they uncheck the filter, or check a different one the data is refreshed again. Currently after the first time a filter is checked nothing happens if subsequent filters are checked or unchecked.

base.html

{% load static %}




    
    
    
    
    {% block title %}{% endblock %}

    
    
    
    {% block css_files %}{% endblock %}


    {% include "./includes/navigation.html" %}
    {% block content %}
    {% endblock %}

    
    
    
    
    
    
    {% block js_files %}{% endblock %}

all-reviews.html

{% extends "base.html" %}
{% load static %}

{% block title %}
    All Reviews
{% endblock %}

{% block css_files %}
    
{% endblock %}

{% block content %}


    
        
            
            MACD
            
            RSI
        
    
    
            {% for review in reviews %}
                {% include "trading_log/includes/review.html" %}
            {% endfor %}
        
        
            
                Review #
                Associated Trade
                
                
                
                
                
                
                
                
                
                
                
            
        
        
    


{% endblock %}

{% block js_files %}
    
{% endblock %}

review.html

{% if review %}

    {{ review.id }}
    {{ review.trade_id.id }}
    
    
    
    
    
    
    
    
    
    


    
        
            {% include "trading_log/includes/review-card.html" %}
        
    

{% endif %}

filters.js

function triggerFilterFormSubmit() {
    $.ajax({
        type: "GET",
        url: $('#filters_form').attr('action'),
        data: $('#filters_form').serialize(),
        success: function(data){
            $("#page").html(data)
            console.log(data)
        }
    });
};

views.py

class AllReviewsView(ListView):
    model = Review
        
    def get(self, request):
        user_id = request.user.id
        filters = request.GET.getlist("filters")
        filtered_reviews = []
        reviews = Review.objects.filter(user_id=user_id)
        if filters: 
            for filter in filters:
                for review in reviews:
                    if review.nine_min_potential_macd_div:
                        filtered_reviews.append(review)
        else:
            filtered_reviews = self.get_queryset().filter(user_id=user_id)
        context = {
            "reviews": filtered_reviews
        }
        return render(request, "trading_log/all-reviews.html", context)

user_1901391 · Answer

Don't use .load() in jquery. There is a better way using django's built in render_to_string method along with jquery ajax. Unlike .load() it's incredibly fast.

Consider the following very simple example to inject or refresh part of your page with django/ajax/jquery. Building on this simple example you can create some complex and robust ajax interactions.

views.py

from django.http import JsonResponse
from django.template.loader import render_to_string

def inject_some_content(request):
    data = dict()
    context = {'my_context': 'some_context'}
    data['my_content'] = render_to_string('app_name/injected_content.html',
        context, request=request)
    return JsonResponse(data)

urls.py

from django.urls import path

from .views import inject_some_content

urlpatterns = [
    path('inject-some-html/', inject_some_content, name='inject_some_content'),
[

your_page.html

injected_content.html

Hello World!!  I just got put here by Ajax!  Here is {{my_context}}!

Lastly, as long as you are using the ajax method in Jquery, avoid including the minified version of the jquery library, which for some unexplained reason drops the ajax method.

user_15071244 · Answer

You need to use load(). Manage your code with if statements.

(logic is if (filter_2.clicked){ $('#colTwo').load(your_page_url + ' #colTwo');})

Filter.js:

function triggerFilterFormSubmit() {
    $.ajax({
        type: "GET",
        url: $('#filters_form').attr('action'),
        data: $('#filters_form').serialize(),
        success: function(data){
            $("#page").html(data)
            $('#filter_result').load(your_page_url + '#filter_result');
            console.log(data)
        }
    });
};

Using Ajax to update a table on a page in django

2 Answers