CODEWITHSUNDEEP
pythondjango
senergo
senergo

Reputation: 13

Submit without refresh - Django

i have a "follow" button on my web-site just like in Twitter. But this button is html-only without any js. I know nothing about js/jquery/ajax. Can anyone help me, what sholud i do to submit this form without page refresh? Thank you.

template 'event.html':

{% if user in event.users.all %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="remove">
        <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
        </form>
{% else %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="add">
        <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
        </form>
{% endif %}

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}

Upvotes: 1

Views: 3262

Answers (2)

anjaneyulubatta505
anjaneyulubatta505

Reputation: 11665

First learn Javascript and Jquery and Ajax to understand more clearly. http://www.tutorialspoint.com/jquery/
http://www.w3schools.com/jquery/

template 'event.html':

{% if user in event.users.all %}
    <form action="/event/{{ event.id }}/" method="GET" id="event">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="remove">
    <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
    </form>
{% else %}
    <form action="/event/{{ event.id }}/" method="GET">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="add">
    <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
    </form>
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$('#event').submit(function(e){
    e.preventDefault();
    url = $(this).attr('action') # to get url
    data = $(this).serialize(); # for sending form data 
    $.post(url, data, function(response){
          # do whatever you want with response(data)
    })
})
</script>

Upvotes: 2

Miguel Jim&#233;nez
Miguel Jim&#233;nez

Reputation: 514

It is impossible, Python is a server side language and if you want to process data, you need send the information to the server.

The first time that i did this, i saw this video in YouTube: https://www.youtube.com/watch?v=KgnPSmrQrXI

Upvotes: 0

Related Questions