Using Rails 4.2.4
I generated a scaffold in rails to test out filepicker. Everything seems to be working well except when I hit refresh on the page that has the file picker button, 3 buttons display on the page instead of the original 1. This happens on both Safari and Chrome. Can anyone tell me how to fix this?
When the page first loads, one button:
On refresh:
application.html.erb source:
<!DOCTYPE html>
<html>
<head>
<title>FilepickerTest</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<%= filepicker_js_include_tag %>
<%= yield %>
</body>
</html>
_form.html.erb source:
...
<div class="field">
<%= f.label :filepicker_url %><br>
<%= f.filepicker_field :filepicker_url, :button_text => "Select Image", :button_class => "btn btn-default", :onchange => 'onImageUpload(event)' %>
</div>
<div class="actions">
<%= f.submit 'Upload Image' %>
</div>
...
The problem was related to turbolinks and was fixed by removing the javascript call in the application.html.erb file.
Related
I've come across a really strange (at least to me) issue. When I type the url by hand the map load just fine, however, when I use a link (either rails or a href) the map won't load until I hit refresh.
Any ideas?
routes.rb
Rails.application.routes.draw do
root 'page#map'
end
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>LeafletTest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
map.html.erb
<%= link_to("reload page (rails)", root_path) %><br />
reload page (a href)<br />
<div id="mapid"></>
page.scss
#mapid {
width: 100%;
height: 600px;
}
page.coffee
$ ->
map = L.map('mapid').setView([
51.505
-0.09
], 13)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap contributors').addTo map
I was able to fix this issue by ensuring a new TileLayer was created every time the map was rendered, i.e. when turbolinks:load is fired.
With the help of some other posts, I finally discovered that this was due to Turbolinks, and the way it calls a page load. Adding the data: { turbolinks: false} attribute to my rails link helped clear it up. I imagine it would work (with the correct formatting) for a non-rails link.
I am currently developing a redmine Plugin,
so far it went well. But since I integrated the plugin into a project i cant use form_for to create an edit view.
Edit View:
Formular
<div class="box tabular">
<div class="splitcontent">
<div class="splitcontentleft">
<%= form_for (#customer) do |f| %>
<div class="splitcontent">
<div class="splitcontentleft field_name">Name </div>
<div class="splitcontentright"><%= f.text_field :name, :size => 20, required: true %></div>
</div>
</div>
<hr />
<%= render :partial => '/inventory_customers/form_custom_fields' %>
<div></div>
</div>
<div><%= f.submit submit_text %></div>
<% end %>
Controller
before_filter :find_project
...
def edit
#customer = InventoryCustomer.find(params[:id])
end
...
private
def find_project
# #project variable must be set before calling the authorize filter
#project = Project.find(params[:project_id])
end
def customer_params
params.require(:inventory_customer).permit(:name, :sap_id, :sap_name, :address, :partner, :partner_text, :active)
end
Error Message
Started GET "/redmine/projects/inventory development/prototyp/inventory_customers/3/edit" for 172.20.1.197 at 2016-08-03 16:07:45 +0200
Processing by InventoryCustomersController#edit as HTML
Parameters: {"project_id"=>"inventory-development", "id"=>"3"}
Current user: COAH (id=38)
Rendered plugins/prototyp/app/views/_inventory_menu.html.erb (0.7ms)
Rendered plugins/prototyp/app/views/inventory_customers/_form.html.erb (1.6ms)
Rendered plugins/prototyp/app/views/inventory_customers/edit.html.erb within layouts/base (2.9ms)
Completed 500 Internal Server Error in 7ms (ActiveRecord: 0.3ms)
ActionView::Template::Error (No route matches {:action=>"show", :controller=>"inventory_customers", :id=>nil, :project_id=>#<InventoryCustomer id: 3, name: "blub", partner: false, sap_name: "asdasd", address: "sadasd", active: true, sap_id: "">} missing required keys: [:id]):
2: <div class="box tabular">
3: <div class="splitcontent">
4: <div class="splitcontentleft">
5: <%= form_for (#customer) do |f| %>
6: <div class="splitcontent">
7: <div class="splitcontentleft field_name">Name </div>
8: <div class="splitcontentright"><%= f.text_field :name, :size => 20, required: true %></div>
lib/redmine/sudo_mode.rb:63:in `sudo_mode'
If i remove the form_for i can load the edit view but then i dont see a way to edit the object.
Since i just started with rails and redmine i have absolutly no idea how to fix the error or how i can do a work arround.
Use form_tag(path, :method=> 'put', :multipart => true ) do instead of form_for
path is something like customer_path.
Make sure to use another path for editing (singular) than for creating (plural, no id needed)
I am using devise and simple form with rails. I can't figure out why a field with errors div or any div for that matter is not being created when there is a failed validation. I have tried deleting everything after f.input :first_name and still no new divs. Let me know what other info you might need to help me figure out my problem.
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div id="sign-up" class="row">
<div class="col-md-6 col-md-offset-3">
<%= render 'shared/error_messages' %>
<%= simple_form_for(resource, :as => resource_name,
:url => registration_path(resource_name),
html: {class: "well"}) do |f| %>
<ul class="inline-layout">
<li>
<%= f.input :first_name, required: false,
placeholder: 'First name',
label: false,
error: false,
input_html: {class: 'form-control inherit-width'} %>
</li>
Here is the error_messages partial:
<% if #user.errors.any? %>
<div id="error_explanation">
<div class="alert alert-danger">
The form contains <%= pluralize(#user.errors.count, "error") %>.
</div>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
Edit:
Looks like I am getting a new div class 'error' but I want it to be 'field_with_errors' I tried changing all instances of 'error' in the simple_form.rb file but it didn't change anything. I'll just have to change my css.
My local version runs CKEditor fine.
Edit: Local version does the same thing.
It's runs on heroku as well, but when I first load my create blog post page, the cktext_area simply shows up as a normal text_area box. When I refresh the page, the ck_textarea shows up like it is supposed to.
I'm not sure why this is happening.
This is using rails 4.
Here's my application layout
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
Here's my application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require ckeditor/init
//= require_tree .
And my blog create form
<%= form_for #article do |f| %>
<% if #article.errors.any? %>
<div id="error_explanation">
<h2>
<%= pluralize(#article.errors.count, "error") %> prohibited
this article from being saved:
</h2>
<ul>
<% #article.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title, :size=>'50' %>
</p>
<p>
<%= f.label :text %><br>
<%= f.cktext_area :text %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
I know I'm late to the party, but may be it will help someone.
The problem is that ckeditor isn't initialized after visiting a turbolinks link. So the solution is to reinitialize ckeditor every time turbolinks loads pages.
This could be done using turbolinks callback turbolinks:load (page:load for old versions)
The second problem is that turbolinks:load fires every time even on document ready event. So I have to check somehow if ckeditor is initializes or I'll get The editor instance ... is already attached to the provided element.
The final code will be:
$(document).on('turbolinks:load', function() {
$('.ckeditor:visible').each(function() {
var id = $(this).attr('id');
if (!CKEDITOR.instances[id]) {
CKEDITOR.replace(id);
}});
});
OK. Well. This isn't a complete solution, but removing turbolinks solves this issue. I certainly don't need turbolinks for my project, but it would eventually be nice to find a solution that works including turbolinks.
removed //= require turbolinks from application.js
It would seem CKEditor doesn't play nice with turbolinks. Instead of disabling turbolinks, I simply added a data: { 'no-turbolink' => true } to any link that contained a ckeditor.
For example, in my header I had a link to create a new blog post:
<%= link_to "Create New Blog Post", new_article_path, data: { 'no-turbolink'=>true} %>
This solved it for me, without completely removing turbolinks.
In my Rails app, the labels for the fields on the login page are way too close to the fields themselves, making it look cramped. I want to add space between them, but am not sure how.
I have Rails 4 with simple_form, bootstrap 3, and devise installed.
This is my app/views/devise/sessions/new.html.erb code:
<div class="row">
<div class="col-xs-4">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email %>
<%= f.input :password %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<div class="col-xs-8">
<h2>Signing in is easy and secure</h2>
</div>
</div>
And here is the entire github repo: https://github.com/yamilethmedina/wheels_registration
I've been looking in my bootstrap.css file and can't find relevant classes. What do you think I should do next?
You could add your own label with space after the custom label.
<%= f.input :email, label: 'Email ' %>
<%= f.input :password, label: 'Password ' %>
Or you could use tools like chrome dev tools to inspect the label element to see what class the labels are given and then add some custom css. example .label-class { margin-right: 10px; }