使用Ajax添加朋友-Django

Question

I'm using Django-Friends

I'm trying to have it so when a user clicks on the add friend, the button disappears(or ideally says Request sent). However, when I click the button, it doesn't disappears. I am new at Django and Ajax, so I'm assuming that this is an error on my part. Most likely the HttpResponse.

That part actually confuses me a lot. The HttpResponse, render, render_to_response, etc. I know that I can use render or render_to_response when I want to load a template. But what if I don't want to load up a new template or go to a new page? Like I want to be able to complete an action like add a friend, or add a page, etc; all on one page. I know you can use ajax to do it, but I don't know the django technical aspect of it.

Anyway, here's my code. Right now, nothing happens. The button doesn't disappear, and there is no friendships request sent.

profile.html

    <div class="text-center">
      <div>
        "{{currUserprofile.tagline}}"
      </div>
      {{currUser.profile.city}}, {{currUser.profile.state}}
      {{currUser.id}}
    </div>
    <!-- <button id="addfriend" data-profileid="{{currUser.id}}" class="btn btn-primary" type="button"> <span class="glyphicon glyphicon-plus"></span>
Request Friend</button>
 -->    <!--Find a way to signify looking or not looking to mentor -->

      <button id="addfriend" data-profileid="{{currUser.id}}" class="btn btn-primary" type="button"> <span class="glyphicon glyphicon-plus"></span>
Request Friend</button>

ajax.js

    $(document).ready(function () {
    $('#addfriend').click(function () {
        var profile_id = $(this).data("profileid");
        $.get('/myapp/addfriend/id=' + profile_id, function (data) {
            $('#addfriend').fadeOut();
        });
    });
})

views.py

@login_required
def profile(request, id):
    context = RequestContext(request)
    currUser = User.objects.get(pk = id)
    profile = UserProfile.objects.filter(user = currUser)
    return render_to_response('myapp/profile.html', {'currUser': currUser, 'UserProfile': UserProfile}, context)


@login_required
def addfriend(request, id):

    context = RequestContext(request)
    other_user = User.objects.get(pk=id)
    new_relationship = Friend.objects.add_friend(request.user, other_user)
    profile = UserProfile.objects.filter(user = other_user)

    return HttpResponse(new_relationship)

Answer 1

Here is a working JSFiddle, but you can't post data {profile_id: profile_id}with a getyou should use a postor add the data as params, as I did:

HTML:

<button id="addfriend" data-profileid="{{currUser.id}}" class="btn btn-primary" type="button"> <span class="glyphicon glyphicon-plus"></span>
Request Friend</button>

JS:

$(document).ready(function () {
    $('#addfriend').click(function () {
        var profile_id = $(this).data("profileid");
        $.get('/myapp/addfriend/?profile_id=' + profile_id, function (data) {
            $('#addfriend').fadeOut();
        });
    });
});