[Answered ]-Empty QueryDict in ajax POST query – Django

2πŸ‘

βœ…

EDIT (2nd: fixing the form markup to match the URL):

Actually, as you have the form complete in your markup, there is a simpler way to do this:

var submitHandler = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var $form = $(this);
    var url = $form.attr( "action" );
    $.post(url, $form.serialize())
        .done(function(data) {
            if (data.following) {
                $('#follow').hide();
                $('#unfollow').show();
            } else {
                $('#follow').show();
                $('#unfollow').hide();
            }
        });
};

$(document).on('submit','#unfollow', submitHandler);
$(document).on('submit','#follow', submitHandler);

Your markup should read:

<form id="unfollow" method="POST" action="{% url 'follow' event_id=event.id %}
      {% if user not in event.users.all %}style="display:none;"{% endif %}>
    {% csrf_token %}
    <input type="hidden" value="remove" name="action">
    <button type="submit" class="btn btn-warning btn-block">{% trans "Remove from My events"%}</button>
</form>

<form id="follow" method="POST" action="{% url 'follow' event_id=event.id %}
      {% if user in event.users.all %}style="display:none;"{% endif %}>
    {% csrf_token %}
    <input type="hidden" value="add" name="action">
    <button type="submit" class="btn btn-primary btn-block">{% trans "Add to My events"%}</button>
</form>

Your Django code:

@require_http_methods(['POST'])
def follow (request, event_id):
    event = get_object_or_404(Event, id=event_id)
    user = request.user
    action = request.POST.get('action', None)
    following = False
    if action == 'add':
        event.users.add(user)
        following = True
    elif action == 'remove':
        event.users.remove(user)
    else:
        return HttpResponseBadRequest('Unknown action: {}'.format(action))
    event.save()
    return JsonResponse({'following': following})

Previous answer:

Depending on your jQuery version, type might not be available anymore. Try using method: "POST" in the AJAX config instead of type: "POST".
http://api.jquery.com/jQuery.ajax/

Also, to make your markup more aligned to what you expect in the view and JS, add method="POST" to your form element.


Side note:

You can handle non existing parameters better by accessing the QueryDict via get() method like this:

request.POST.get('action', None)

This will always work (unless request.POST is None). If the parameter is not present the default is returned or the second parameter (in this case None).

request.POST['action']

This will fail with a KeyError if action is not present.

Leave a comment