Jquery DOM ready - doesn't load everytime in Safari on iphone 5 (ios7)

I have a Rails 4 application with Bootstrap 3 and have noticed that the jQuery handler for .ready() is not executed everytime a page loads in the safari browser of my iphone 5 or ipad mini (both ios 7) whereas it is in the chrome browser of both devices. Instead, the handler only executes when the application is initially loaded into Safari on my iOS devices but that's it... it doesn't execute the handler again. In addition, the handler is also executed every time a page loads in Chrome, Firefox, and Safari browsers on my laptop. Can somebody explain how I can get Safari to execute the .ready() handler everytime the page loads on iOS devices. Here's the code:

$(function() {
  alert("DOM is ready");
});

This is obviously a trivial example but I was having problems with jQuery functions not executing consistently and believe this is the cause.

Answers


Jquery and turbolinks don't play well together. On Safari Mobile, the DOM ready event is only fired upon the initial page and doesn't fire again as I click through my website. The reason for this is turbolinks and here's a good article about using page:change event to overcome the problem:

http://geekmonkey.org/articles/28-introducing-turbolinks-for-rails-4-0

Using the solution above, I got some things to work but was also getting multiple bindings for some events when I used the back button on my browser.

A better solution, in my opinion, is to use the jquery.turbolinks gem instead. Here are two good articles about the topic:

http://blog.joshsoftware.com/2013/06/28/troubleshooting-turbolinks-with-rails-4/

https://github.com/kossnocorp/jquery.turbolinks

After installing the gem, I got rid of using the page:change event and everything seems to be working. If you do install the gem, pay close attention to how you configure your Javascript manifest file (application.js). It's all specified in https://github.com/kossnocorp/jquery.turbolinks.

Hope this helps!


It looks like javascript don't execute at all on the page. On iOS it happens when you tap back arrow in the browser. It has a popular solution:

  1. Add to body tag in html onunload attribute like this:

    <body onunload="">
    
  2. Add window.onunload = function () {return true} in your javascript file.

  3. Read this question and its answers for more info.

As for me 1 and 2 help me in my apps.


Need Your Help

Application alarm causing a weird error until I press the back button

java android alarm android-alarms alarms

I have an alarm in my application that notifies me every 10 minutes. It works fine but each time when the alarm notifies me, my application name will show as a box in the middle of the screen, and ...

How to use "Skip navigation" together with the Durandal router

html5 twitter-bootstrap-3 accessibility durandal wcag2.0

I'm currently working on a HTML5 single page application which needs to follow the "WCAG 2.0" guidelines.