How to prevent that page 'jumps to the top' in jQuery? - php

Question

I'm not a jQuery expert, but tried to create a (simple) function where users can simple click on a button to upvote an item. After a lot of failures, I managed to create the following:
jQuery
function vote(_obj) {
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php"
});
}
$('.favorite').click(function() {
vote(this);
});
So every time a user click, the page refresh (and automatically jumps to the top of the page). I tried already do add a e.preventDefault(); but without any results.
HTML/CSS
<i class="fas fa-heart" style="color:#dc3545"></i>
Kind regards!

Answer 1

Just prevent the default action of the click. This would prevent a form submitting or a link from following it's href url or whatever the default of that element is when that event occurs
$('.favorite').click(function(event) {
event.preventDefault();
vote(this);
});

Answer 2

In additional to e.preventDefault() you can use return false; from a jquery event handler.
$('.favorite').click(function() {
vote(this);
return false;
});
Alternatively, semantically this should really be a <button> not an <a>, make it type='button' and it won't do anything other than your code (the default is type=submit so needs the type= specified otherwise will attempt to submit your form). You may need to add some css to stop it looking like a "button".
<button type='button' class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i>
</button>
with your same existing code

Answer 3

Prevent reloading
You can use preventDefault() function like this to prevent your browser from reloading :
In your Javascript :
$('.favorite').click(function(e) {
e.preventDefault();
vote(this);
});
Your a tag doesn't have href value so it looks like reloading page (but it's browsing to the same page).
Update vote value
To update your vote value, you can use success() function of jQuery's Ajax call, and update value as you want (ex: only increase or getting value from the call's response), using selector to update the right value.
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php",
success : function(response){
// update your value here, using selector
// ex: $('.vote-' + $(_obj).attr('id')).val(response.vote)
},
error: function(response) {
// handle error
}
});