CODEWITHSUNDEEP
django
Ahmed Wagdi
Ahmed Wagdi

Reputation: 4421

Ajax goes to url instead of changing data Django

I'm using ajax in Django to activate add to favorites button, here are my files

urls

path('<int:pk>/favorite_item/', views.favorite_item, name='favorite_item'),

views.py @login_required

def favorite_item (request, pk):
    favitem = get_object_or_404(Item, pk=pk)
    data = {
        'is_fav': Favorite.objects.filter(user=request.user, item=favitem).exists(),
    }

    if data ['is_fav']:
        Favorite.objects.get(user=request.user, item=favitem).delete()
    else:
        new_entry = Favorite.objects.create(item=favitem, user=request.user)

    return JsonResponse(data)

finally HTML only the part of the script 

{% block javascript %}
  <script>
    $("#add_to_fav").click(function () {
      console.log( $(this).val() );
    });
              $.ajax({
        url: form.attr("data-favorite_item-url"),
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            $('.results').html(data);
        },

      });


  </script>
{% endblock %}

Now when I click the element that should trigger the whole action, the function is already working and the item is removed or added to db, but it takes me to another page which only has 1 sentence ({"is_fav": true}) or ({"is_fav": false})

Upvotes: 0

Views: 18

Answers (1)

voodoo-burger
voodoo-burger

Reputation: 2153

You need to use preventDefault to stop your browser from actually going to the linked page when the link is clicked. You need to change lines 3 and 4 of the code you included like this:

    {% block javascript %}
  <script>
    $("#add_to_fav").click(function (event) {
      event.preventDefault();
      console.log( $(this).val() );
    });
              $.ajax({
        url: form.attr("data-favorite_item-url"),
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            $('.results').html(data);
        },

      });


  </script>
{% endblock %}

Upvotes: 1

Related Questions