2017-05-29 9 views
1

ないと私はボタンが押されるたびに私のウェブサイトの更新のこの部分を作るためにしようとしてきた:私のテンプレートでジャンゴ:更新ページの情報のリフレッシュ

Coins

、私は{{ request.user.profile.coins }}を通じてこの情報にアクセス:

<span class="status">Balance:&nbsp;{{ request.user.profile.coins }} 
    <img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"> 
</span> 

私はプロセスに探していたと私は、このビューを呼び出すためにAJAX機能を使用しようとしました:

@login_required(login_url='users/login') 

def coin_increase(request): 
    """ 
    Function based view for increasing a user's coin balance 
    """ 
    if request.is_ajax(): 
     try: 
      user = request.user 
     except User.DoesNotExist: 
      raise Http404("No user matches the given query.") 
     user.profile.coins += 5 
     user.save() 
     return render(request, 'home.html', {'home': home}) 
    else: 
     raise Http404 

次のようにAJAX機能は次のとおりです。

function update_coins() { 
    $.ajax({ 
     method: "POST", 
     url: "/coins", 
     data: {}, 
     success: function(data) { 
     alert("test"); 
     } 
    }) 
    }; 

私はこれが動作するように取得できますか?

+0

、テンプレートを置きますhtmlコードも。 –

答えて

1

home.htmlは、興味のある部分が含まれているページ全体のテンプレートですね。

問題はここにある:

return render(request, 'home.html', {'home': home}) 

あなたはちょうどその部分を更新するためにページ全体をレンダリングする必要はありません。 user.profile.coinsの新しい値を知る必要があります。 最もよく使われる方法は、そのデータをjavascriptで理解できる形式にシリアル化することです。JSON。ジャンゴのバージョンが何であるかわからない

、多分これは動作します:次に

from django.http import JsonResponse 
return JsonResponse({'coins':user.profile.coins}) 

:あなたはDOMの内容を更新throublesがある場合

function update_coins() { 
    $.ajax({ 
     method: "POST", 
     url: "/coins", 
     data: {}, 
     success: function(data) { 
     console.log(data) // check out how data is structured 

     // Update the coin amount 
     $('.status').contents()[0].textContent = 'Balance&nbsp'+data.coins 
     } 
    }) 
    }; 
+0

コンソールで 'Object {coins:6725}'を取得しました – iFengo

+0

Good :) jqueryを使用して、コイン額を含むDOM要素を選択し、 'data.coins'で更新します。 jqueryセレクタに慣れていない場合は、htmlを投稿してください。 –

+0

HTMLは次のようになります。 '残高:  {{request.user.profile.coins}} iFengo