I just switched to rails and started on my first application. Im struggling a bit with the forms and bootstrap however!
It says my form is rendering and Im not receiving any errors, but none of my form code is showing.
Im running rails 4.2.5 with the latest bootstrap-sass and simple_form versions.
Im not sure whether my bootstrap css is actually working at all either, it doesnt appear to be. Been trying different versions, installing and uninstalling and changing the code for hours but canẗ seem to get it working. Would be immensely grateful for help!
Kind regards,
Jens
Form (_form.html.erb) code;
<%= simple_form_for #book, html: ({ cĺass:'form-horizontal'}) do |f| %>
<div class = "field">
<%= f.input :title, label: "Book Title" %>
<%= f.input :description %>
<%= f.input :author %>
<%= f.button :submit %>
<% end %>
I renamed my application.css to .scss, it now contains only;
#import "bootstrap-sprockets";
#import "bootstrap";
application.js contains:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
your code is a partial so where are you calling it from? It needs to be rendered inside of another file like index.html.erb.
Whenever the name starts with a _ it means its a partial not a full page, its to be rendered inside another page.
Also there's a div that doesn't end in your code but why even use a div for a class when you can pass that in through Rails ? class: "field" or something along those lines.
Try viewing the resulting html source and looking for one of the inputs to make sure that it's really getting rendered. If it is than the problem may be that you're missing a closing div for your <div class = "field">.
If not then I would suggest you take a look at your new.html.erb (or wherever your rendering your partial and making sure you have something like:
<%= render 'form' %>
Notice that the = is important here. If you're missing this it could be the cause of your issue.
#app/views/books/new.html.erb
<%= render "form", locals: { book: #book } %>
#app/views/books/_form.html.erb
<%= simple_form_for book, html: ({ cĺass:'form-horizontal'}) do |f| %>
<%= f.input :title, label: "Book Title" %>
<%= f.input :description %>
<%= f.input :author %>
<%= f.submit %>
<% end %>
The above should make sure you're outputting a valid form (HTML).
If you're still not seeing the form appear, it will likely be a CSS issue. The difference being that CSS gives styling definition to HTML.
As mention in other answers, the solution to this lies in the classes you're giving to your HTML elements. Since you're using bootstrap, it means you have to first ensure you have bootstrap installed and loaded.
You can use rails-assets to pull from the bootstrap repo directly:
#Gemfile
source "https://rails-assets.org"
source "https://rubygems.org"
gem 'rails-assets-bootstrap', ">= 4.0.0.alpha"
#app/assets/stylesheets/application.sass
#import bootstrap
--
If you wanted to test your HTML/CSS directly, you need to remove the class: "form-horizontal" class from your HTML. If this shows the form, it means your CSS is incorrect, in which case I'd recommend you post back on here with it.
Thanks a lot guys! I got it to work, I had simply forgotten the "=" before render! The other oddities were just last minute tired scrabbling in an attempt to make it work. :P Again, thanks a ton for your help guys!
Related
I have a Ruby on Rails project that uses the material-saas gem. I recently noticed that text field animations have stopped working. More specifically, when a text field is active, the label does not move up on the page and whatever the user types in the input field writes over the label text and looks awful. Here (https://github.com/Dogfalo/materialize/issues/682) is an example of the style issue I'm encountering. In addition to the label text not moving correctly, the form also has a file field that is not working. When a user selects a file to upload, the file name does not appear in the form, which is the intended behavior.
I recently ran rake assets:clobber and rake assets:precompile and I wonder if that has something to do with this issue.
I did some research and in the Material CSS docs they say:
You can also call the function Materialize.updateTextFields(); to
reinitialize all the Materialize labels on the page if you are
dynamically adding inputs.
I attempted this fix, but I get Uncaught TypeError: Materialize.updateTextFields is not a function in my console when I load the page.
Here is my form view:
<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for #photo, multiple: true do |f| %>
<div class="input-field">
<%= f.label :title %>
<%= f.text_field :title %>
</div>
<div class="input-field">
<%= f.label :caption %>
<%= f.text_area :caption, class: "materialize-textarea" %>
</div>
<%= f.label :date %>
<%= f.date_field :date, class: "datepicker"%>
<div class="file-field input-field">
<div class="btn waves-effect waves-light yellow accent-4 white-text">
<span>File</span>
<%= f.file_field :image %>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
<div class="input-field center-align">
<%= f.submit "Upload", class: "btn-large waves-effect waves-light" %>
</div>
<% end %>
Here is my assets/application.js
//= require jquery
//= require materialize-sprockets
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .
Here is my assets/custom.js
$(document).ready(function() {
Materialize.updateTextFields();
});
This is all really strange because I know the form style animations were working. I did not change the code for my form. The only thing I can think of is the clobber / precompile command, which I needed to run to get some ui improvements up onto production.
Thanks for taking the time to look this one over and I appreciate the assistance!
Looks like a few issues to me:
Rails is magic, and it does something called "turbolinks." Basically, pages are dynamically replaced instead of actually changing pages. It makes your site faster, but doesn't always issue the same Javascript events.
You'll also need JQuery 2 (I've updated my answer after advice from Dmitry).
Change the first few lines of your application JS to:
//= require jquery2
//= require turbolinks
//= require materialize-sprockets
Secondly, I found a second bug that exists in the materialize library. Basically, it wouldn't define updateTextFields() until turbo links loaded a page. To fix this, I've submitted a PR, but in the meantime, I would money-patch this by copy/pasting the method from the source to your code (inside $(document).ready). Use something like this to let your code get updated once they fix the bug (pretty much a polyfill).
Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js
You are using jQuery 1.x.
Try using jQuery 2.x or 3.x.
Source: https://github.com/Dogfalo/materialize/issues/4593
E: The way to do this in your setup would be to change the line //= require jquery to //= require jquery2.
I need to find a way my tasks could be edited in such a manner without updating a page. Maybe somebody know how to do it? I know it applies to Angularjs. But I really haven't found any information for my purpose.
When you click on some task, you can edit its content.
Can anybody help?
I would use the gem 'best_in_place' you can follow implementing it from the In-Place Editing rails cast
what you have to do is in
app/assets/javascripts/application.js add the following files
//= require jquery.purr
//= require best_in_place
app/assets/javascripts/model_name.js.coffee
jQuery ->
$('.best_in_place').best_in_place()
lastly on model/show.html.erb
<p>
<b>Field Name:</b>
<%= best_in_place #model, :field_name %>
</p>
<p>
<b>Email:</b>
<%= best_in_place #model, :email %>
</p>
That should be all you kneed.
Happy coding
I'm a new to Formtastic here. How do I go about styling Formtastic elements? By default, the labels beside my form elements are colored white. Is this normal or is it because I don't have a formtastic.css in my stylesheets folder?
I was able to figure it out myself.
In my zsh shell in the directory for my Rails app, I ran rails generate formtastic:install.
I also put in the requisite requires in my application.css.scss file:
*= require formtastic
*= require my_formtastic_changes
Following this, I just created a my_formtastic_changes.css.scss file in my stylesheets directory and implemented the following bit.
<%= semantic_form_for #section do |f| %>
<%= f.inputs do %>
<div id="section-details">
<%= f.input :name %>
<%= f.input :category %>
<%= f.input :description %>
<%= f.input :filepath %>
<%= f.input :site_section_id %>
</div>
<% end %>
I just then styled it in the my_formtastic_changes.scss with this:
#section-details label {
color: #000;
}
There is hardly anything special about styling Formtastic elements. You have to identify them in some CSS (or preferably SCSS nowadays) file and style it to your likings. Your favorite browsers Element info context menu will be very helpful in figuring out why an element is formatted the way it is.
If you desire a more specifc answer you should post the code of your Formtastic form together with the resulting HTML and a description of the label format you desire.
I'm having a rather weird problem using Rails 4, Turbolinks and a remote form. I have a form looking like:
<%= form_for [object], remote: true do |f| %>
<td><%= f.text_field :name, class: 'form-control' %></td>
<td><%= f.email_field :email, class: 'form-control' %></td>
<td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td>
<% end %>
This form adds (creates) a new object. It does however not always work:
When I load the page directly using the URL or a refresh; it works
When I navigate from my app to this page; it fails
When disabling Turbolinks for this link, the page worked perfectly.
I have two questions:
Why doesn't this work? Is this because the remote handlers aren't attached to the button because of a JQuery/Turbolinks problem?
How can I work around this problem?
Thanks in advance.
Solution
Thanks to #rich-peck, the solution was to add a piece of javascript that manually submits the form upon clicking the button:
<%= javascript_tag do %>
var id = "#<%= dom_id(f.object) %>";
var inputs = $(id).parent().find('input');
console.log(inputs);
$(id).parent().find('button').on('click', function(e) {
e.preventDefault();
$(id).append(inputs.clone());
$(id).submit();
});
<% end %>
This code adds javascript to the form table row, getting the inputs, appending them to the ID and submitting the form. The preventDefault(); prevents the query from getting sent twice when the page is refreshed and the form actually works.
Turbolinks
As mentioned, the problem with Turbolinks is that it reloads the <body> part of the DOM with an ajax call - meaning JS is not reloaded, as it's in the head
The typical way around this issue is to delegate your JS from the document, like this:
$(document).on("click", "#your_element", function() {
//your code here
});
Because document is always going to be present, it will trigger the JS continuously
Remote
With your issue, it's slightly more tricky
The problem is you're relying on the JQuery UJS (unobtrusive JavaScript) engine of Rails, which is difficult to remedy on its own
We've never had this issue & we use Turbolinks all the time - so I suppose the problem could be with how you're constructing your form / handling the request. This GitHub seemed to recreate the issue, and it was to do with the table
Maybe you could try:
<%= form_for [object], remote: true do |f| %>
<%= f.text_field :name, class: 'form-control' %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.submit button_name, class: 'btn btn-sm btn-primary' %>
<% end %>
Turbolinks don't fully reload your page, but only part of it. This is what makes them so fast, however if you have JavaScript requiring a full page reload you will run into trouble. The reason it does work with a refresh is because now you force the page to fully reload.
Edit: This gem might be worth trying out: https://github.com/kossnocorp/jquery.turbolinks
For a little bit of extra information about the inner workings of turbolinks: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
Or: https://github.com/rails/turbolinks
P.s. Also make sure the javascript_include_tag is within the head tag (and not in the body)
I'm using the gem nested_form in a Rails 3.1 application. The problem is that when I click on the link generated by "link_to_add", it displays the partial twice, whereas it should display it just once. There you go some code:
Form:
<%= nested_form_for #product, :html => {:multipart => true} do |f| %>
<%= f.fields_for :safety_info_files %>
# adds a link for displaying the template
<%= f.link_to_add "Add file", :safety_info_files %>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Template:
<div class="fields">
<%= f.link_to_remove "remove" %><br />
<%= f.label :doc, "File" %>
<%= f.file_field :doc %><br />
</div>
Did anybody else have the same problem?
EDIT:
Silly mistake, silly me. Sorry if I made some of you wasting time, the problem was that I was loading "nested_form.js" twice, so it called the function that appended the partial the same number of times.
Sorry again.
Silly mistake, silly me. Sorry if I made some of you wasting time, the problem was that I was loading "nested_form.js" twice, so it called the function that appended the partial the same number of times.
For those having this issue using rails 4 / turbolinks and not finding nested_form.js included twice, try removing turbolinks from application.js. Once I did this and bounced the server this issue was resolved.
Credit here: https://github.com/ryanb/nested_form/issues/307
I was facing same issue.
I had included nested_form.js in my application layout file.
And I haven't changed my app/assets/javascripts/application.js file, it is as it is, when it was created at time of creating rails application.
When I removed entry from my application layout, problem was solved.