javascript - Have to refresh the page before my ajax request happens to text in django -

i have follow button works using ajax {{ total_followers }} works increasing or decreasing upon click follow , unfollow buttons change when refresh whole page not want

my views

@ajax_required @require_post @login_required def user_follow(request):     user_id = request.post.get('id')     action = request.post.get('action')     if user_id , action:         try:             user = user.objects.get(id=user_id)             if action == 'follow':                 contact.objects.get_or_create(user_from=request.user,user_to=user)             else:                 contact.objects.filter(user_from=request.user,user_to=user).delete()             return jsonresponse({'status':'ok'})         except user.doesnotexist:             return jsonresponse({'status':'ok'})     return jsonresponse({'status':'ok'}) 

my html

{% extends 'base.html' %} {% load thumbnail %}  {% block title %}{{ user.get_full_name }}{% endblock %}  {% block content %} <h1>{{ user.get_full_name }}</h1> <div class="profile-info">     {% thumbnail user.profile.photo '180x180' crop='100%' im %}     <img src="{{ im.url }}" alt="profile photo">     {% endthumbnail %} </div> {% total_followers=user.followers.count %} <span class="count">     <span class="total">{{ total_followers }}</span>     follower{{ total_followers|pluralize }} </span>  <a href="#" data-id='{{ user.id }}' data-action='{%  if request.user in user.followers.all %}un{% endif %}follow' class="follow button">     {% if request.user not in user.followers.all %}     follow     {% else %}     unfollow     {% endif %} </a>  <div id="image-list" class="image-container">     {% include "images/image/list_ajax.html" images=user.images_created.all %} </div> {% endwith %} {% endblock %}  {% block domready %} $('a.follow').click(function(e){ e.preventdefault(); $.post('{% url "user_follow" %}', { id: $(this).data('id'), action: $(this).data('action') }, function(data){ if (data['status'] == 'ok') { var previous_action = $('a.follow').data('action'); // toggle data-action $('a.follow').data('action', previous_action == 'follow' ? 'unfollow' : 'follow');  // update total followers var previous_followers = parseint( $('span.count .total').text()); $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1); } } ); }); {% endblock %} 

you need return html template code dynamically view when called ajax , replace html previous current html in success() method of ajax.

follow answer return json response using django template system

edit:

make template should have html code want change when ajax request called.

html = render_to_string("yourtemplate.html", context_object) return jsonresponse({'status':'ok', 'html':html}) 

template:

   new_html = data['html']    $selector = $('#id of block');    $selector.html(new_html);