jQuery Mobile on Ruby on Rails 4 Returning Blank Pages - jquery-mobile

For some reason, jQuery Mobile is returning blank pages sometimes when I use the back/forward button on my web browser.
So I searched around and a lot of people say to turn off AJAX, and your back/forward buttons will work better.
So I added the following code to my program:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
This way, each web page loads in its own URL.
So I put this in, but some pages still give me a blank page when I click on the link.
The URL hits the browser, so I know AJAX is disabled.
Pressing "Refresh" on the browser loads the page properly.
Perhaps there is a conflict with the Rails Turbolinks? That's the only idea I can muster for the cause of the problem.
I am using jQuery 1.4.5 on Ruby on Rails 4.1.7.

I figured out the solution to the problem. In rails 4, when you load jquery, you have to add the gem "jquery-turbolinks" to your Gemfile. Then load:
//= require jquery.turbolinks
in your application.js file. This line has to come AFTER "//= require jquery" and BEFORE "//= require turbolinks". After that, jquery-mobile works fine in rails 4

Related

Rails 5 Turbolinks appears to reload page

I am still new to Turbolinks and unsure whether it is working correctly. I have a new rails app that I've created with Turbolinks enabled by default. I am using the link_to rails helper to build some links. When I click on one of the links the page reloads in the browser. I was under the impression that this should not occur as only the body should be swapped using AJAX. Is there any additional attributes I need to add to my link or additional configuration I need to set up?
Make sure that you have the Turbolinks js loaded in the page. If you are using webpacker and removed the default application js that used the asset pipeline you will probably need to use Turbolinks from npm, import it and then call Turbolinks.start() in your entry file.

How do I use Turbolinks and local_time together?

I've noticed recently, probably since installing Rails 5 that the local_time gem doesn't work properly on pages where the link was internal (through turbolinks). If the link to the page was external or the browser refreshed, or turbolinks is disabled, local_time works properly.
Does anyone know how to use these together?
I needed to initialize the local time on TurboLinks load. This event provides a chance to do those things that would have run at document ready. The JavaScript is:
document.addEventListener("turbolinks:load", function() {
LocalTime.run();
});

Rails needs page refresh to render correctly bootstrap markdown

I am developing an app using Ruby on Rails. In a specific view I have a textarea that uses Bootstrap Markdown.
The problem is that each time I visit that view, the textarea is rendered completely plain, without the Markdown functionality. Hitting F5 (refresh) renders the form correctly.
I tried to clear my browsers cache etc, but no luck. I always have to hit refresh to see the page correctly.
What may cause that?
Edit:
I am using this Markdown Plugin
I have also included the js files as stated in this question.
The turbolinks gem has been known to interfere with other javascript files and it's recommended that you remove it completely unless you really need it.
As Mohammad AbuShady said in his comment, you'll need to edit the part of the javascript files for your markdown that tells the page to start rendering. In your case this involves adding
$("#some-textarea").markdown({autofocus:false,savable:false})
inside page:load on the relevant pages.
In case you need turbolinks still, I found this very helpful: JQuery gets loaded only on page refresh in Rails 4 application
I had the same issue and adding jquery-turbolinks gem allowed the bootstrap-markdown editor to load perfectly for me.

Foundation 5's accordion not working with Rails 4

Foundation 5's accordion works great when I use it as per the documentation and open that page directly. However, if I click to another link on my site and then click to the page with the accordion, then the accordion doesn't expand when I click on the headings :(. I figured maybe it's the turbolinks JavaScript messing with Foundation's accordion. So we added this to the link to the page with the accordion:
<li data-no-turbolink><%= link_to 'My accordion page', accordion_page_path %></li>
Now it works better, but not perfect. If I go to my accordion page from another page, the accordion works. But then when I navigate away and click the back button on my browser, stops working :(.
This must be an extremely common problem as Foundation and Rails are very popular. Any way to get this to work?
Yes, turbolinks can cause many issues with RoR.
The reason turbolinks breaks your javascript is that document.ready events won't trigger properly. You need to do it on change instead.
Option 1. Revise all of the Javascript (Not easy or recommend)
var on_load = function() {
}
$(document).ready(on_load)
$(window).bind('page:change', on_load)
Option 2. Use the Jquery-Turbolinks gem.
The jquery turbolinks gem is designed to get around this problem. However, you need to read the docs, and make sure to install it properly. (It's a tricky beast.)
Option 3. Remove Turbolinks
If it's causing you to much trouble, you can just remove it. Delete it from the gemfile, remove turbolinks-tracked: true from your assets in the application layout, and wave turbolinks goodbye. I will admit, I have done this several of times. :\

Rails form not working after link_to

When I click on a link and move to a new page, my form doesn't submit.
It works normally if I refresh though. It also works normally after disabling Turbolinks.
How can I resolve this and keep using Turbolinks?
jquery.turobolinks gem sorted out a similar issue i was having. Just make sure you include it directly after jquery.
It just makes all your js bindings etc still work with turbolinks

Resources