Forcing refresh/reload of url in one browser when url in second browser window is updated

Question

I have a website written using django that has text entry, voting, and a table display of the entries sorted by age and votes, all on one page: http://www.highscore.a2hosted.com/index/

Now I would like to have separate entry, voting, and table pages, and I have started with the voting page. This works well, and votes are added to entries in the underlying sqlite3 database, but I have to refresh the table page (index) manually.

Is there an easy way to force update, or at a last resort, reload of the table data in the table (index) url from actions in the voting url or views.py?

I include code snippets below:

views.py

def index(request):   
  context = {
   'latest_entry_list': Entry.objects.order_by('-pub_date')[:10],
   'high_entry_list': Entry.objects.order_by('-score','-pub_date')[:10],
   'high_entry': Entry.objects.order_by('-score','-pub_date')[:1],
   'low_entry_list': Entry.objects.order_by('score','-pub_date')[:10],
   'voting_entry_list': Entry.objects.unvoted_or_random(),
  }
  return render(request, 'entries/index.html', context);

def voteup(request):
  voting_id = request.GET.get('voteid')
  if request.method=='GET':
    v = Entry.objects.get(pk=voting_id)
    v.score +=1
    v.voted=True
    v.save()
  else:
    pass
  return HttpResponse('done')

voting.html

 <div id="Vote" class = "high">
<div style="text-align: center">
  {% for entry in voting_entry_list %} 
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp{{ entry.score }}</a></li>
    <p>
    <input type="submit" id="voteid" name='voteid' value="{{ entry.id }}" autofocus value="" onfocus="this.value = this.value;" class = "transparent"/>
          <script>
            $(document).ready(function() {
              $("#voteid").bind("keydown", function(e) { //input type=id above
                if (e.keyCode == 38) {
                  var text = $("#voteid").val();        
                  var args = {'voteid':text};       
                  $.get("/voteup/", args).done(function(data) {
                    console.log("message: " + data);
                    location.reload();
                  });
                return false;
                }       
               });
             });        
          </script>
  {% endfor %}
</div>

---

EDIT for code based on accepted answer;

Thanks, I took your first option and I did this on the tables page:

 <script>
  setTimeout(function() {
  $.ajax({      
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
   });
  }, 1000);
 </script>

Answer 1

Is there an easy way to force update, or at a last resort, reload of the table data in the table (index) url from actions in the voting url or views.py?

What you are looking for is a way to let the browser automatically check for updates from the back end, and then update itself without "refreshing".

It is similar to how notifications work on StackOverflow. If you get a new message or a change in your reputation, the top bar updates itself without you having to refresh.

To accomplish this, you have two options:

1. You can poll the database every x seconds from your front end, and then trigger an update. This is basically an automated way to hit "F5".

2. You can open a socket so that your front end is updated when the backend is updated.

Either way will require you to add some front end logic. For option #2, you can use django-socketio an app that uses the socket.io library to implement the WebSocket protocol which is a way to open sockets (think of it like a permanent connection), between the browser and the backend.

On the back end you would create a channel, on which you would transmit messages. The browser will subscribe to these channels and listen. As soon as the message is transmitted from your backend, the browser can trigger an update (for example, add a new row to a table, popup a warning, etc.)

Answer 2

try to do this :

from django.core.urlresolvers import reverse

def voteup(request):
    voting_id = request.GET.get('voteid')
    if request.method=='GET':
        v = Entry.objects.get(pk=voting_id)
        v.score +=1
        v.voted=True
        v.save()
        return redirect(reverse('index'))
    #redirect to you index and refrech the data

    else:
       pass