how to remove reloading the page?

Question

How to get votes data from database without reloading the page?

my models.py

from django.db import models
from django.contrib.auth.models import User
from django.db.models.signals import post_save


class Post(models.Model):
    post = models.CharField(max_length=500)
    user = models.ForeignKey(User)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)
    post_img = models.ImageField(upload_to='posts_img/')
    votes = models.IntegerField(default=0) 

my views.py

def upvote(request, post_id):
    vote = Post.objects.get(pk=post_id)
    vote.votes += 1
    vote.save()
    return redirect('home:home')

my home.html

                {% if post.post_img %}
                    <img class="post-img" src="{{ post.post_img.url }}">
                    <a href="upvote/{{ post.id }}"> vote </a>{{ post.votes }}
                {% endif %}
                <p><i>Posted on <b class="date">{{ post.created }}</b></i</p>

my urls.py

from django.conf.urls import url
from . import views

urlpatterns = [

    url(r'^upvote/(?P<post_id>[0-9]+)/$', views.upvote, name='upvote'),

]

If I click vote link in the home page, page will reloaded and will get votes result,

How do i stop reloading page.???

I need your help please!.

Answer 1

You tagged this question AJAX but I do not see any of your code? Based off of what you are asking I think that this previously asked question should be able to help you resolve this problem. Particularly the html using django templates and tags and the js section

HTML

 <table id="_appendHere" class="table table-striped table-condensed">
      <tr>
        <th>Reg.nr.</th>
        <th>M&auml;rke</th>
        <th>Modell</th>
      </tr>
      {% for i in order %}
        {% if i.order_booked %}
        <tr class="success">
        {% else %}
        <tr>                    
        {% endif %}

         <td>{{ i.regnr|upper }}</td>
         <td>{{ i.brand|capfirst }}</td>
         <td>{{ i.brand_model|capfirst }}</td>
      </tr>
      {% endfor %}
    </table>

JS

<script>
    var append_increment = 0;
    setInterval(function() {
        $.ajax({
            type: "GET",
            url: {% url 'get_more_tables' %},  // URL to your view that serves new info
            data: {'append_increment': append_increment}
        })
        .done(function(response) {
            $('#_appendHere').append(response);
            append_increment += 10;
        });
    }, 10000)
</script>

Answer 2

what I understand from your post, is you need to post data through upvote then display or reloading the current voting results from database without redirecting or reloading the page again. if I understood correctly do the following, otherwise leave a comment or update your question.

In home.html

...
...
<a href="#" class="upvote" data-action="/upvote/{{ post.id }}"> vote </a> 
<span class="votes">
{{ post.votes }}
</span>
...
...
<script>
$(".upvote").click(function(e){
  e.preventDefault();
  var $this = $(this);
  var url = $(this).data("action");
  $.post(url, function(response){
   if(response && response.success==true)
      $this.next(".votes").text(response.votes);
  });
});
</script>

In views.py, don't redirect to home, instead return your response in JSON

from django.utils import simplejson
#use the following instead as you use Django 1.11 
from django.core.serializers import serialize

def upvote(request, post_id):
   ...
   ...
   #get votes from database and assign to variable 
   vote = Post.objects.get(pk=post_id)
   votes_from_database = vote.votes
   response_data_to_dump = {
      'success': true,
      'votes': votes_from_database,
   }

   data = simplejson.dumps(response_data_to_dump)
   # use the following instead for Django 1.11 
   data = serialize('json', response_data_to_dump)
   return HttpResponse(data, content_type='application/json')
   #use the following fro Django 1.6 
   #return HttpResponse(data, mimetype='application/json')