Some links don't work when I use jquery-mobile with rails and I don't know why. All I get is a blank page. The URL changes, and if I press "refresh" on my browser, the target web page comes up ok. But the web page appears blank when I first click the link.
of the first page:
<div data-role="page">
<div data-role="ui-content">
Click me
</div>
</div>
of "/sample_controller/new"
<div data-role="page">
<div data-role="ui-content">
Got here
</div>
</div>
I checked the html headers and the jquery-mobile.js file seems to be loading and it's valid. Same with the stylesheet. No javascript errors come up in my console. Two hints:
1) I checked the DOM in my chrome browser and it says "display: none;" for [data-role=page]. So for some reason jquery-mobile is setting it to be invisible, even though I didn't specify that.
2) I tried the exact same code with straight HTML (not rails) and the link works fine. So i suspect something in the rails engine is screwing it up.
I tried every avenue including stack overflow. Does anyone know the common reasons why jquery-mobile gives a blank page? Are there any error logs or something in jquery-mobile so I can check to see what's going on?
I am using rails 4.1.7. and jquery-mobile-rails (loaded in the gemfile) is 3.1.2
I see what went wrong. Omar, in the comments section, was right. I needed to let rails handle navigation not JQM. Apparently, straight "a" links won't work with jquery-mobile within rails, I have to use the "link_to" helper for jquery-mobile to recognize it.
Also, it worked when I installed the jquery_mobile_rails gem directly. before I manually put the jquery_mobile in the assets directory and linked manually. So installing jquery_mobile_rails gem fixed the problem.
Related
At the point in Ch. 5 of the Hartl tutorial where he's showing off CSS/SCSS/Bootstrap styling for the first time (ch. 5.1.2), you're supposed to see the page transformed from an unstyled HTML page to a nifty styled page. But I wasn't seeing the change. It stayed unstyled.
I typed in the listings carefully (and even copied and pasted them from the website, just to be sure, after encountering this problem), tried switching to different gem version numbers (as other advice on similar problems said to do), etc.
Then I decided to insert in my application.html.erb layout the <link> to the Bootstrap CDN, as well as <div class="bootstrap-fluid"> (which I'm glad I learned from FreeCodeCamp) and that fixed the problem:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
...
</div>
</body>
Apparently I had done nothing wrong otherwise...my guess is that the bootstrap-sass gem (or some other gem) was not supplying this information correctly.
I'm concerned that if I've put this code in my layout, stuff might break later on. Like, it's supposed to work without what I added, right? Any ideas how to make it work the way Hartl wants it to work?
UPDATE: Ugh. Typo! It turns out that I had misnamed custom.css.scss to custom.css.cscc. Well, that'll do it!
The only reason the Bootstrap CDN link helped was that my layout made use of some Bootstrap. When I started adding custom CSS to custom.css.cscc (sic!) I knew the file wasn't even being read. Lesson learned...type even more carefully.
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 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. :\
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
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