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.
Related
I see in my application.js file //= require turbolinks. I was wondering what turbolinks does in rails 5.0 because it is somehow getting in the way of my bootstrap buttons. Can someone please explain what turbolinks is and how i can fix my bootstrap problem?
Turbolinks is a gem that speeds up your app and makes it behave like a SPA (Single Page App), it does this by loading only the content between your body tags (using javascript) basically by making and AJAX request to the server, waiting the answer, deleting the old content and replacing it with the new content, handling the URL and browsing history.
For more info check https://github.com/turbolinks/turbolinks
Simple Explanation By Analagy:
Imagine you have a yellow page directory (a physical book directory). Every now and then, one or two phone numbers require updating. Rather than simply ordering an entirely new directory, you simply edit, within the directory itself, the phone numbers that need to be edited.
It's a LOT faster, and less expensive.
How do you know what numbers need to be edited? Well you'd make a phone call (AJAX request) and the yellow pages people will simply tell you that what certain few numbers need changing.
In other words, only the parts of the page which need changing will be changed with turbolinks. The problem with turbolinks is that it might not always be compatible with other javascript libraries out there.
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. :\
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
Rails 3 offer application.html.erb as a layout template. However, whenever you send request to access a controller view, the content of application.html.erb will be loaded again. This seems not efficient, since header, navigation, footer only need to be loaded once.
In addition, when you need to have a javascript code executed in $(window).load for application.html.erb and another js method executed in $(window).load for <controller>.html.erb, this will mess up. I think the reason is that $(window).load can only execute once for each page.
So I wonder what's the best Layout practice for Rails 3.
Thanks
Rails 4 includes Turbolinks, which will only reload the body of your website when a link is clicked, instead of reloading all of the assets like javascript and CSS. If you want to fine tune what gets loaded further, you can take a look at pjax, but I think for most applications Turbolinks will be sufficient.
I'm trying to get pjax to work on a Rails app but none of the links are being annotated with pjax. I think pjax isn't really being loaded. I'm using pjax_rails and am basically following the railscast instructions but using //= require jquery.pjax instead of just pjax. I'm also using it with bootstrap which may cause an issue but I'm not sure. My other thought is that is that the pjax javascript isn't being loaded and I need to run something like $('a').pjax('[data-pjax-container]')
To be clear the main problem is that pjax isn't being loaded client side and thus when I make requests the X-PJAX header is not being set.
Finally got it working. First problem was that the unbeknownst to me the assests pipeline was turned off so the pjax javascript file wasn't being included. Instead I went with the pjax rack gem and dumped it into the public directory. Then I created a new javascript file with $('a').pjax('[data-pjax-container]') and it works! Although I'm not sure why I need to manually call that javascript when all the documentation seems to point to the fact that it should be already there.