1

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.

Vee
  • 1,821
  • 3
  • 36
  • 60

2 Answers2

1

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!

Vee
  • 1,821
  • 3
  • 36
  • 60
0

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.

Community
  • 1
  • 1
Alex
  • 11,115
  • 12
  • 51
  • 64
  • Pinal - thanks for the article. I actually found a great solution which is to add the jquery.turbolinks gem. See above for the accepted solution. – Vee Feb 21 '14 at 19:53