Fetch Django view data with AJAX

Question

Currently I am building an app which update the main page's data via AJAX. Based on this question I used (see code/1/ below) ajax to refresh my page. My other aim is to catch just certain variable from the view and use as a JS variable. If I use only Django template variable in the AJAX request my variable not refreshig.

First attempt:

Django view:

def fetch_data (request):

    query_1=Objects.all()
    query_2=Objects.all()

    #From these  queries I colect data and push  them to lists.

    context= {
                'variable_1': variable_1,
                'variable_2': variable_2,
                'time_variable': time_variable #changing in every minute
           }

    return render(request, 'app/index.html', context)

AJAX:

Here I use the AJAX request. I run it in every minute to realod my page my page. My problem is that I want to load just let's say the time_variable to use it again within AJAX. If I use it like a single template variable ({{time_variale|safe}}) when the AJAX reloading I get the same variable again and again and not a new one because of the refreshing. How gen I catch the Django variable?

setInterval(function(){
    if(new Date().getSeconds() === 0) {     
        $.ajax({
        url:'{% url 'fetch_data' %}',
        success: function (data){
              $('body').html(data); #This working, the data refreshing
              var="{{time_variable|safe}}"; #Here I always get the same in every minutes despite the variable get new value in every minute in the view.
           }
        });
  }
},1000)

I can't understand why you would think that a hard-coded value inside the JS itself would change as a result of the Ajax call. — Daniel Roseman, Apr 26 '18 at 09:16
This just was an idea and I shared it, I realized that, it not working. Do you know any suggestion? — , Apr 26 '18 at 09:24
`{{time_variable|safe}}` is calculated when the page is rendered, not when the javascript is run. You need to pass the new time variable back with your json — HenryM, Apr 26 '18 at 09:35
You are calling AJAX request to refresh only a body of your html template, but it doesn't refresh your variable. In order to refresh variable as well, you can create another view that will return your variable in a JSON format. And then in your javascript part, you can create another AJAX request that will call JSON-view and get value of variable from it. — Olzhas Arystanov, Apr 26 '18 at 09:37

Vinay P · Accepted Answer · 2018-04-26T10:28:49.583

Solution 1

Fetch data from the server in JSON format and update the variable and HTML. A new view is needed to provide data to AJAX request.

    setInterval(function(){
    if(new Date().getSeconds() === 0) {     
        $.ajax({
        url:'{% url 'fetch_data' %}',
        success: function (data){
              response_json = JSON.parse(data)

              $('body').html(response_json.html_data); #This working, the data refreshing
              var=response_json.variable_value; #Here I always get the same in every minutes despite the variable get new value in every minute in the view.
           }
        });
    }
   },1000)

Solution 2

Reload the page in intervals, this not a recommended suggestion though as it just degrades performance of back-end and inefficient.

Fetch Django view data with AJAX

1 Answers1