No browser loading bar - ruby-on-rails

I can't seem to find a similar issue
On my website I am running into an issue where the browser progress bar will not show until the page is completely rendered.
This is particularly bad on a very slow page (which I am working on). It makes it look like the link may have been broken instead of just taking a little while.
Looking at the network
There is a GET method on the current page which returns a 304, this runs for about 3-5 seconds.
Once that finishes the new website will load with a near instant progress bar.
I am not sure what code I can share since this is happening everywhere on my site, it is just more noticeable on certain pages.
To see it at its worse go to http://www.swtorconquest.com/conquestweeks and click either "The Trade Emporium" or "Clash in Hyperspace".
I am having this issue both when testing locally and when the site is deployed.
I am using ruby 2.1.2 and rails 4.1.5

Do one thing, in application.html.erb, in body tag add this, it will solve your problem
<body data-no-turbolink>

The problem will almost certainly be Turbolinks, although this is just a guess. Lacking any other answers, I'll hopefully be able to give you some ideas:
When you load a page with Turbolinks, it will actually load the <body> tag of the page through Ajax, leading the <head> intact.
This causes a lot of problems if not handled correctly, one of which (we've found) being that your browser can no longer determine how quickly the page is loading. This is likely what your problem is.
Although I don't have an outright fix, I do have a test.
You can try removing any references to Turbolinks throughout the various pages in this part of your application. This can be done by using the following:
#app/views/layouts/application.html.erb
<%= javascript_include_tag "application" %> => remove the turbolinks reference
<%= stylesheet_link_tag "application" %> => remove the turbolinks reference
Also, you need to remove Turbolinks from your Gemfile & your application.js:
#app/assets/javascripts/application.js
//= require turbolinks => remove this line
This will give you the ability to gauge whether it's turbolinks which is preventing the status bar from loading correctly. If it is, then you'll have to work around this (I don't have any remedies off hand)
It must be noted that this test will not speed up the load time - it will merely show whether the status bar issue is caused by Turbolinks or not

Related

Content not being showed correctly

I do not know what is going on with my application. I already cleared server cache, browser cache, I think I already cleared all the cache possible.
I am running my ruby on rails application in linux distribution, but the content not always appears correctly. For instance, I go to the page and I see this:
Basically it does not care about some of the page information like if user is logged in or not. But if I click F5 to refresh the page it shows up correctly:
Any idea what is going wrong?
Possible this error is connected with js libraries, that you use. If you want simple solution, you can try remove turoblinks, but this can make your app slow.
if you can remove turoblinks:
Remove the gem 'turbolinks' line from your Gemfile.
Remove the //= require turbolinks from your
app/assets/javascripts/application.js.
Remove the two "data-turbolinks-track" => true
from your app/views/layouts/application.html.erb.

What is turbolinks in rails 5.0?

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.

Turning on turbolink

After I've precompiled assets and uploaded them to CDN I decided to turn on turbolinks. They were kind of turned on before when I were precompiling assets, that is I had gem turbolinks in Gemfile and require turbolinks in application.js but in application.html I had data-no-turbolink instead of data-turbolinks-track" => true.
Now I change it to data-no-turbolink to data-turbolinks-track" => true and expect them to work in production on the my local machine but it seems they aren't. Visually it seems they aren't working and "initiator" in the browser isn't turbolinks.
I don't want to recompile the assets if it's not really needed because reuploading them to CDN takes a lot of time.
So do I have to recompile them? Or perhaps I just don't notice that they are really working already?
data-turbolinks-track is only for asset tracking (to make sure the loaded assets file is the latest). It does not affect whether Turbolinks is used for a particular link.
If turbolinks is installed, any internal link without data-no-turbolink will be loaded using Turbolinks UJS.
The following code will fire an alert if Turbolinks is running.
$(document).on('page:load', function(){ alert("Turbolinks is active"); });
Not easy with the sparse information you provide. But here are some notes worth considering:
About Turbolinks:
With Turbolinks pages will change without a full reload, so you can't
rely on DOMContentLoaded or jQuery.ready() to trigger your code.
Instead Turbolinks fires events on document to provide hooks into the
lifecycle of the page.
You probably use jQuery? Read above link to understand. A good solution is this one: jQuery.turbolinks
...
But if you have a large codebase with lots of $(el).bind(...)
Turbolinks will surprise you. Most part of your JavaScripts will stop
working in usual way. It's because the nodes on which you bind events
no longer exist.
...

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.

ruby on rails jquery.js and application.js both fire a request per ajax button

Firefox is firing off two requests when I click on the following button (and all other ajax forms on the page):
<%= form_tag(action_object_path, :remote => true) do -%>
<div><%= submit_tag "run process" %></div>
<% end -%>
I do not want this behavior. I pulled up firebug and can see that there are two requests made:
POST http://localhost:3000/object/1/action jquery.js?body=1 (line 8527)
POST http://localhost:3000/object/1/action application.js?body=1 (line 8527)
How do I fix this to only fire one request when I click my button?
One thing I remember that may help diagnose this problem. I know they are both javascript assets and can vaguely remember modifying something with my assets immediately after I started building my app because rails server barked at me and told me to precompile (I at least think it was precompile) my assets. I don't remember what I did and so dont' know how to reverse it.
I also read somewhere that firefox's cache may cause it to fire two requests, so I have tried clearing my cache and that does not work.
Thanks
To explain the problem a bit more clearly than the comments indicate:
The jquery-ujs javascript library adds event bindings to change events for elements that would normally generate standard HTTP requests (and are flagged as :remote) into AJAX requests. In Rails you would typically have the jquery-rails gem installed and then have the jquery_ujs.js file render in one of several ways:
add a require jquery_ujs line in your application.js manifest
add a javascript_include_tag :jquery_ujs line to your application layout file
copy the jquery_ujs file to your assets and rely on some line in the application.js manifest to pull it in (e.g. require_tree .)
Choosing more than one of these methods will cause the library to be linked twice - and will result in the symptoms described.

Resources