Ajax request scrolling to top in chrome

Question

I am refreshing a div inside the web page with ajax call. But sometimes page is scrolling to top in chrome.

I think it is same issue: How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?

But putting return false didn't resolve my problem. My code:

<span class="current" id="tab-kisiler"><a class="peoples" onclick="Refresh(); return false;">Refresh</a></span>

function Refresh() {
        $.post('socket/get_online_users', {city: city}, function (data) {
            $('#random_users').html(data);
        });
}

How can I resolve this problem?

Answer 1

Try this

$(function() {
  $(".peoples").on("click",function(e) {
     e.preventDefault();
     $.post('socket/get_online_users', {city: $(this).data("city") }, function (data) {
        $('#random_users').html(data);
    });
  });
});

using

<span class="current" id="tab-kisiler"><a class="peoples" data-city="Chicago">Refresh</a></span>

and assuming there is no event handler on .current or #tab-kisiler

Also when the data is loaded into the random_users, the page may move

To stop the double click from messing up try this (not tested):

$(function() {
  $(".peoples").on("click",function(e) {
     e.preventDefault();
     if ($(this).data("active")) return;
     $(this).data("active",true);
     $.post('socket/get_online_users', {city: $(this).data("city") }, function (data) {
        $('#random_users').html(data);
        $(this).data("active",false);
    });
  });
});

Answer 2

Could you try the following?

<span class="current" id="tab-kisiler"><a class="peoples">Refresh</a></span>

$('.peoples').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $.post('socket/get_online_users', {city: city}, function (data) {
        $('#random_users').html(data);
    });
}