2

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?

Community
  • 1
  • 1
Tolgay Toklar
  • 4,151
  • 8
  • 43
  • 73
  • 1
    `onclick` attribute is out of date long ago. Use jquery's [`.on`](http://api.jquery.com/on/) instead. – hindmost Nov 10 '15 at 15:34

2 Answers2

3

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);
    });
  });
});
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • I tried your code. Still same. Could you look at this? http://ribony.com/aytuncordu please press the "Kişiler" button and repeat it. http://prntscr.com/917izu – Tolgay Toklar Nov 10 '15 at 15:42
  • I just found this: Double click the "Kişiler" button this is sending to top too. – Tolgay Toklar Nov 10 '15 at 15:45
  • 1
    I did notice the issue only surfacing if you rapidly double click the button, maybe you should disable the button while loading? Also it is a good idea to keep tract if your request is still running and abort it to let the other request go or visa versa. – Dirk-Jan Nov 10 '15 at 15:45
  • I disabled the button while loading. (You can check in source code Refresh() function ) but problem doesn't disappeared. Could you check again? – Tolgay Toklar Nov 10 '15 at 15:57
  • I do not see the jumping anymore. I also do not see the loading. Perhaps it failed loading and the code stays disabled. A $.ajax with a `.done` might be better – mplungjan Nov 10 '15 at 16:04
1

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);
    });
}
Dirk-Jan
  • 1,109
  • 10
  • 21