Safari iOS - jQuery popup after clicking on link

Question

I am using iOS 8.2

I have a div with class .loading-screen and a link which, when clicked, prompts a controller to do something which takes a few seconds at least (a file is generated), and then the page refreshes. After the link .generate-button is clicked, I want to display a popup to the user which basically says "Your file is generating - please wait."

Here is my code, trimmed to show the basics:

jQuery

jQuery(document).ready(function() {

    jQuery(".generate-button").click(function (e) {
        alert('generating - click!');
        jQuery(".loading-screen#generating").addClass('show');
    });

});

HTML

<a href="http://example.com/link/generate/id/101/" class="button generate-button">Generate file</a>

....

<div class="loading-screen" style="display: none" id="generating">
    <p>Your file is generating!</p>
</div>

CSS

.loading-screen {
    z-index: 5000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.loading-screen.show {
    display: block !important;
}

On Chrome and Firefox this is working fine. I am having some issues with Safari, particularly on iOS.

I have read that other posts stating the click event on Safari is not working - jQuery click events not working in iOS - my confusion is that, with my code, the alert is showing when the link is clicked, but the popup is not showing.

I have tried using jQuery(".generate-button").hover(...) instead and this does generate the popup, but then (obviously) does not navigate to the link.

Is it to do with Safari realising that the page is being navigated away from, so not rendering any further changes on the page? This is my only theory at present.

In Safari on a Mac the behaviour is that the page is navigated away from (to the URL given in the link), which is different to Chrome/Firefox, but that is not such an issue for me at the moment.

Help or ideas appreciated. Thanks.

score 1 · Accepted Answer · answered Sep 08 '15 at 09:10

I found a workaround, maybe it will help someone else:

Change links to buttons:

<button onclick="generateFile('http://example.com/link/generate/id/101/')" class="button generate-button">Generate file</button>

Add JS function:

function generateFile(url) {
    jQuery(".loading-screen#generating").addClass('show');
    // 10ms delay so popup shows before page is navigated away from
    setTimeout(function() {
        window.location = url;
    }, 10);
}

The setTimeout maybe could be done a better way but it works for me; it tries to make sure the addClass has finished and been rendered before window.location is called.

I'll accept my answer when I can (tomorrow).

just switching from `a` to `button` make it works, so apparently links `onclick` isn't working — brauliobo, Dec 13 '16 at 14:18

score 0 · Answer 2 · answered Sep 07 '15 at 14:27

0

IOS don't work well for click events. You should modify your code for that:

jQuery(".generate-button").on("click tap", function (e) {
        alert('generating - click!');
        jQuery(".loading-screen#generating").addClass('show');
    });

answered Sep 07 '15 at 14:27

Víctor

3,029
3
28
43

I've changed it to this, but it hasn't made any difference (I've flushed my cache). – Sarah Sep 07 '15 at 14:48
Try using only "tap", without click – Víctor Sep 07 '15 at 14:54
This was having no effect and I think it's because I would need to load jQuery mobile. I found a workaround for my issue (see my answer); thank you for your help though. – Sarah Sep 08 '15 at 09:10
No, I work with jQuery (non-mobile), in IOS apps, and I am doing it like this. Maybe I have some libraries, like fastclick, which helps to do that – Víctor Sep 08 '15 at 09:16

Safari iOS - jQuery popup after clicking on link

2 Answers2