CODEWITHSUNDEEP
pythonajaxdjangosubmit
worm2d
worm2d

Reputation: 159

Submit without refresh in django

i have a html form and submit button (It adds or removes relations in manytomanyfield "users"):

{% if user in event.users.all %}
     <form action="/event/{{ event.id }}/" method="GET">
            <input type="hidden" value="{{ event.id }}" name="remove">
            <input type="submit" value="Remove">
      </form>
{% else %}
     <form action="/event/{{ event.id }}/" method="GET">
            <input type="hidden" value="{{ event.id }}" name="add">
            <input type="submit" value="Add">
      </form>

in views.py:

def show_event(request, event_id):
    ...
    event = get_object_or_404(Event, id=event_id)
    user = request.user
    if request.GET.get('add'):
        event.users.add(user)
        event.save()
    if request.GET.get('remove'):
        event.users.remove(user)
        event.save()
    return render(request, 'events/event.html', {'event':event, 'user':user,})

This function works fine, but the page refreshes after submitting form. I need no refresh and i need to change button text just like "Follow" button in Twitter. I tried to use some jquery\ajax but i dont exactly understand how it should work. Can please anyone explain how to do it? Thanks.

Upvotes: 1

Views: 5575

Answers (1)

Curtis Olson
Curtis Olson

Reputation: 967

Here's an extremely basic ajax example. In your form, you can fire your ajax method with:

<a onclick="AjaxFormSubmit()" href="#">Submit</a>

Then your ajax method would be as follows:

function AjaxFormSubmit() {
    $.ajax({
        url : '/event/{{ event.id }}/',
        type : "POST",
        data : { the_post : $('#id-of-your-field').val() }
    }).done(function(returned_data){

        // This is the ajax.done() method, where you can fire events after the ajax method is complete 

        // For instance, you could hide/display your add/remove button here

    });
}

I recommend looking at the Ajax documentation to see all of the Ajax methods available to you.

Also, in your view, you'll need to return (in this example) json data via an HttpResponse. i.e.

return HttpResponse(json.dumps(your_data))
# I like to return success/fail Booleans, personally

*Note, this is untested code.

Upvotes: 3

Related Questions