Question

I’m developing a mobile site for iPhone using jQuery. I have a hidden div (class .tile-content) that holds some content. Clicking a link with onclick="showContent(this)" calls fadeIn like this:

        function showContent(obj)
        {
            alert($(obj).html());
            $(obj).next('.tile-content').fadeIn();
            return false;
        }

Everything works great until I tap “email us” which has a mailto: link on it, triggering the iPhone’s built in email overlay functionality. I then hit cancel and am returned to the site. Now, if I click a link, my .tile-content div won’t show up. I get the proper alert on the iPhone though. After I press that once, nothing works (which I think means there was a js error?). Having a really hard time debugging on a physical iPhone. Any ideas?

Update: I enabled Safari Mobile’s debug console thanks to a tip from @John Boker below. No errors show up, but I’m still having the same problem.

Answer 1

The problem occurs within the setInterval/setTimeout javascript functions. When launching the mail window within Safari on the iPhone it seems that the internal timer used for these functions is paused. After sending the email (or tapping cancel) the timer is left paused and the setTimeout/setInterval functions will not fire.

This will break any thing that relies on setTimeout/setInterval such as jquery animations and any async ajax calls since jquery uses setInterval to poll until the request returns (I’ve hit this problem myself).

If you tap the url bar then click cancel or push the off button on the phone and go back to safari the functions will kick in and everything will start working. Not really an acceptable workaround.