0

I'm trying to append a Loading state div before the page is redirected. (https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html)

I have the following link on my page:

<a onclick="showBubble('bubble-placeholder'); return true;" href="http://example.com">Link
</a>

function showBubble(boxClass) {
    $('.' + boxClass).append('<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>');
}

When the link is clicked, showBubble appends a div to the other div on the page . And then there is a redirect to http://example.com

It works perfectly fine in all browsers but NOT in webkit browsers on the Ipad.

I found similar problems here Force DOM redraw/refresh on Chrome/Mac and here http://www.eccesignum.org/blog/solving-display-refreshredrawrepaint-issues-in-webkit-browsers

But none of those solutions work for me. I tried:

$('#parentOfElementToBeRedrawn').hide().show(0);

and

$(window).trigger('resize');

and

var n = document.createTextNode(' ');
$('#myElement').append(n);
setTimeout(function(){n.parentNode.removeChild(n)}, 0);

Also, if I click a back button from "example.com" and come back to the previous page, the bubble is there. So, it seems like a webkit browser chooses not to refresh the page before it leaves it.

Also, instead of appending an element to the box, I tried something easier - like changing the text of one of my buttons. It doesn't work either. The page does not refresh after the link is clicked.

Moreover, if I put alert('123') in the onClick property after my showBubble function, the alert shows up but the page is still not refreshed.

But, if I remove the href property from <a> tag the bubble shows up and everything works. Well, except for that it is not a link anymore :)

I tried to get rid of href and do:

onclick="showBubble('bubble-placeholder'); window.location.replace('www.example.com');"

No success.

Community
  • 1
  • 1
sergei
  • 803
  • 7
  • 12
  • `webkit browser chooses not to refresh the page before it leaves it` AFAIK, this is correct statement regarding webkit behaviour. What you can do is delaying a little the redirection using for example a timeout and preventing default anchor click behaviour. But not sure how you could handle all possibilities here, like e.g if user explecitely choose to open link in new tab/new window using any shortcut keyboard or mouse. – A. Wolff Mar 25 '16 at 13:34
  • @A.Wolff Using a timeout would only work if I get rid of href and do a 'manual' redirection, right? Otherwise, the execution would continue after registering a timeout with setTimeout and the page will get redirected, right? – sergei Mar 25 '16 at 13:38
  • Instead of return true from click handler, you could just return false. This will avoid default behaviour of clicking anchor: `onclick="showBubble('bubble-placeholder'); setTimeout(redirectionMethod, 1000); return false;"` – A. Wolff Mar 25 '16 at 13:40
  • @A.Wolff Thanks a lot! This solution worked. Now I am just curious - is this way (pretty cumbersome) the only way to solve that? Now, instead of plain hrefs everywhere, I will have window.location.replace , which is somewhat inconvenient. And why do webkit browsers have such behavior? Is it on purpose? – sergei Mar 25 '16 at 14:01

0 Answers0