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.
Related
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.
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
I inherited a Rails 3.1 app, served by passenger/nginx.
I thought I had to upgrade from ActiveAdmin 0.4 to 0.5, but
that caused other problems, so I found a workaround and
downgraded to 0.4.0.
Then Ruby started complaining that the formtastic-bootstrap
gem wasn't checked out. Here's the line in the Gemfile:
gem 'formtastic-bootstrap', :git => "git://github.com/cgunther/formtastic-bootstrap.git", :branch => "bootstrap-2"
And there certainly was a f-b gem in the config, but then
someone on stackoverflow said to run
bundle install --deployment
and after I ran that incantation, the site loaded. Except all the
ActiveAdmin CSS is gone. I can make small mods to the file
assets/active_admin.css and they take effect, but the site otherwise
looks like times roman crap.
So I did something bad during one of the above steps -- I normally
run bundle install as root, but the site is owned by 'web'.
And after Ruby complained that it couldn't find formtastic-bootstrap,
I found two of those gems installed in /home/web/.bundler/ruby/
(or something like that), and because Ruby must have been complaining
about them, I deleted them. There wasn't anything else there.
After running another bundle install,
the site would then load, but the CSS wasn't taking effect.
I loaded up the reference site in a different tab, and compared the HTML
I've generated with the reference HTML. The only difference is in the
two lines that load the JS and CSS. In the reference site:
<link href="/assets/active_admin-e1b0dc3ef3753e264638b07b12174adb.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/active_admin-385197d3f18a204049d4eb22bc9a033e.js" type="text/javascript"></script>
In mine:
<link href="/assets/active_admin.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/active_admin.js" type="text/javascript"></script>
I know the JS and CSS are being loaded, because I see the alert, and other things get
colorized, just not the ActiveAdmin elements. But the DOM inspector shows that the
reference site is pulling all sorts of things out of that CSS file for the body element,
while for my page, it's only pulling generic style rules out of
resource://gre-resources/html.css and a data URI that doesn't need repeating here.
The Error Console is full of the usual jquery and google.maps JS admonitions (it's
a gmap app), but nothing jumps out.
Does this ring a bell for anyone? I gather the reason why I'm seeing untagged
CSS and JS file references is because of that "bundle install --deployment" I
ran, followed by "bundle install --no-deployment" when things got worse. I just
want to set things back to square 1.
So how can I just clear everything? Or better still, is are there a bunch of
magic doodads being cached somewhere?
You could try doing a bundle uninstall
another possibility is to rename the Gemfile.lock and rerunning bundle install, this will force a full re-install.
If you are using version control, such as Git, you could run a diff and see what changes have been made to the code and comparing.
I have installed the twitter bootstrap rails gem and ran all the commands.
I have seen some basic style changes which leads me to some confidence. However with I use the following class
<div class="jumbotron masthead">
<h1>Test Heading</h1>
<p>Find me in app/views/pages/home.html.erb</p>
</div>
It does not do anything. According to the twitter bootstrap homepage and inspecting, this should work.
Am I missing something?
Are you sure the bootstrap gem uses the latest version of Bootstrap? I always include the CSS and JS files manually, so that I can always have the latest version. I haven't used the masthead, but it is included in the Bootstrap CSS files. https://github.com/twitter/bootstrap/blob/master/docs/assets/css/docs.css#L58
The jumbotron masthead was an extra addition on the Bootstrap GitHub doc pages that isn't included in the "proper" release of Bootstrap.
There's nothing to stop you pinching the code from here and adding it to your Rails project yourself though!
I'm a rails newbie trying to follow a howto on how to perform some Ajax calls (after switching to jQuery), but I've run into a problem.
Whenever I trigger the ajax code (new Ajax.Request()), I get "Ajax is not defined" in firebug. Anyone with more skills than me know what's up here?
update:
For anyone else having this problem, the code that was generating the the above code, was a call to remote_function()
What I have done to set things up:
Added "gem 'jquery-rails', '>= 1.0.12'" to my gemfile, and run bundle install
Run rails generate jquery:install
My public/javascripts/ folder thus has the following files:
application.js
jquery.min.js
jquery-ui.min.js
jquery.js
jquery-ui.js
jquery_ujs.js
The scripts included in my HTML look like this:
<script src="/javascripts/jquery.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/jquery_ujs.js?1312911234" type="text/javascript"></script>
<script src="/javascripts/application.js?1312911234" type="text/javascript"></script>
I'd guess that your tutorial uses Prototype as Ajax.Request is for Prototype, you should be using $.ajax with jQuery. And switching to a jQuery based tutorial might be a good idea too.
You say that you're using remote_function but that's Prototype-specific:
Usage
To be able to use these helpers, you must first include the Prototype JavaScript framework in your pages.
Prototype used to be the default JavaScript library for Rails so I suspect that PrototypeHelper is a leftover. You probably want to look at things like the :remote option on link_to and similar for new code.