Django Ajax/Jquery Refreshing DIV elements on Timer

Question

I have a Django project that i'm attempting to implement ajax on. The idea is that there are a list of alarms that are in a database (externally updated every 5 seconds or so).

Since The Database is automatically updated, what I'm trying to achieve is a page element that is refreshed every 10 seconds or so to display the new information (rather than refreshing the entire page). This already works with a page refresh or a meta refresh (eww..)

Here is what i have started so far, I've referenced the following Stackoverflow questions that i've used to try help me.

Refresh a div to shows new rating in Django using JQuery and AJAX

Refresh a div in Django using JQuery and AJAX

I've been going round in circles for a few days now without getting anywhere so any help is much appreciated.

index.html

<div id="right">
{% include 'alarmviewer/alarms.html' %}
</div>

alarms.html

Theres alot more in this one, but I didn't include it as it didn't seem necessary. It works without the ajax.
<div class="alarmsheader">.....</div>

urls.py

urlpatterns = patterns('',
    url(r'^$', views.index, name='index'),
    url(r'^alarms/$', views.alarms, name='alarms'),
)

views.py

def alarms(request):
latest_alarm_list = ActiveAlarmsSimple.objects.order_by('severity')[:1000]
active_alarm_list = ActiveAlarmsCount.objects.order_by('-active_alarms')[:1]
return render_to_response('alarmviewer/alarms.html', {'latest_alarm_list':     latest_alarm_list,'active_alarm_list': active_alarm_list,})

script.js

function refresh() {
  $.ajax({
  url: "{% url 'alarmviewer:alarms' %}",
  success: function(data) {
    $('#right').html(data);
  }
 });
};


$(document).ready(function ($) {
  refresh();
  var int = setInterval("refresh()", 3000);

Just a note. This all works fine without ajax implemented. refreshing the page every 5 seconds manually or with a meta tag works. I just get the error when running the server

[19/Jan/2015 11:38:22] "GET /alarmviewer/%7B%%20url%20%27alarmviewer:logical%27%20%%7D HTTP/1.1" 404 2936

Which I assume means there is something wrong with my views.py or my Urls.py as it does not seem to be able to find the alarms.html page it is meant to be refreshing.

Thanks for any help!

What happens when you put "alarms/$" directly into javascript? — Ahmed, Jan 18 '15 at 23:14
Why did you use "{% url 'alarmviewer:alarms' %}" and not "{% url 'alarms' %}"? — Ahmed, Jan 18 '15 at 23:18
I had previously tried that with the same outcome. Will give it another go — Billiam, Jan 18 '15 at 23:24
OK, post both url files, the one inside your app and the one in the project directory. Where is that url file is located? — Ahmed, Jan 18 '15 at 23:25
Can you access /alarmviewer/alarms/ directly from your browser? — Ahmed, Jan 18 '15 at 23:40
Do the following, create an empty p tag with some id like
###"{% url 'alarmviewer:alarms' %}"###
and check what's between these hashes. — Ahmed, Jan 18 '15 at 23:42
Nope, it just times out. I changed the entrly in the Project urls.py, but no luck. Am i defining the Url alright within the app itself? — Billiam, Jan 18 '15 at 23:44
usually wont be more than 80 or so. It wouldnt work if i didn't define a number, so i went for something it would never reach. Thats kind of just limiting how many it would display rather than how much the database would keep — Billiam, Jan 18 '15 at 23:48
Add this http://pastebin.com/9E14NT0c before your return in the same view. — Ahmed, Jan 18 '15 at 23:50
Not the outputs, I mean the error itself. Do you get Django error page? — Ahmed, Jan 19 '15 at 00:02
No the site continues to work, it just 500's when it tries to reload the
with the elements in it. Sorry, i should have been clearer in the initial post — Billiam, Jan 19 '15 at 00:08
Quick question, does it matter that I can't get to "/alarmsviewer/alarms" where the file is being pulled from ? Thought defining that in my views & Url's would work but it doesn't seem to be :) Thanks heaps for your help btw — Billiam, Jan 19 '15 at 00:12

score 2 · Accepted Answer · answered Jan 18 '15 at 23:58

2

You will need the "{% url 'alarmviewer:alarms' %}" somewhere in the HTML document when rendering it with Django, not in the js file.

Try including the javascript between <script>Your script here</script> in the HTML template or define a global variable in the HTML template:

<script> var ALARM_URL = "{% url 'alarmviewer:alarms' %}"; </script>

and then change your ajax call url to url: ALARM_URL. Hope this helps.

answered Jan 18 '15 at 23:58

Geotob

2,847
1
16
26

thanks for the suggestion man! It's HTTP:500 error now instead of 404 which is better. Think there is defiantly just something to do with my Urls.py or Views.py that i need to look into. – Billiam Jan 19 '15 at 00:10
You need to indent the lines in your alarms() function. I also suggest that you set `DEBUG = TRUE` to get a more detailed response in your browser; you can also go to your project's root directory and call `python manage.py shell` to check if alarms view works. – Geotob Jan 19 '15 at 00:21
Ooops didn't pick that up, sorry. You could save yourself some work if you import `from django.shortcuts import render` in your views.py and then use your initial version, but replace `render_to_response()` by `render(request, 'alarmviewer/alarms.html', {yourdict}) – Geotob Jan 19 '15 at 00:34
So i substituted 'render_to_response' with HttpResponse (seen in http://pastebin.com/uXxNzMFP). Is render more beneficial? Thanks. – Billiam Jan 19 '15 at 00:50
Also i'm actually going to mark your answer as correct because that was the major breakthrough for me. – Billiam Jan 19 '15 at 00:50
Your pastebin is working, so it's all fine; I was just pointing out a way to save a couple of lines :) – Geotob Jan 19 '15 at 00:58

score 0 · Answer 2 · answered Jan 19 '15 at 00:20

0

All Fixed. Big thanks to both Ahmed and SirTobi for their help!

Initial issue was that The page was 404'ing when it was trying to be updated. SirTobi's solution worked to get it HTTP:500'ing instead (which is actually a good sign!)

then the views.py needed to be changed to a diffrent format that i have outlined here in this pastebin http://pastebin.com/uXxNzMFP

Hope this can help someone else who has a similar problem

answered Jan 19 '15 at 00:20

Billiam

57
2
8

return render_to_response('alarmviewer/alarms.html', {'latest_alarm_list': latest_alarm_list,'active_alarm_list':active_alarm_list,}), save yourself some time, and create a dictionary at the beginning of your view, and add all the lists you want to add to them. – Ahmed Jan 19 '15 at 12:10

Django Ajax/Jquery Refreshing DIV elements on Timer

2 Answers2