Ajax goes to url instead of changing data Django

Question

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})

Possible duplicate of [preventDefault() on an tag](https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag) — user234461, Jun 11 '18 at 12:38

score 1 · Accepted Answer · answered Jun 11 '18 at 12:41

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 %}

Ajax goes to url instead of changing data Django

1 Answers1