I'm not sure if this is a bug or what, but the notice messages are not disappearing and I have looked at a bunch of other examples, none of them explain my case:
like these:
Why flash message won't disappear?
rails 4 -- flash notice
Rails flash notice won't go away in Safari?
devise gem flash messages
I used the Rails_Composer and I promised myself not to use it again, because it just caused me a nightmare
This is what I have loaded in my files:
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require wiselinks
//= require_tree .
application.css.scss
/*
*= require_tree .
*= require_self
*/
framework_and_overrides.css.scss
#import "bootstrap.min";
and as the Rails_Composer generates the files, this is what we have in the layout:
_messages.html.eb
<%# Rails flash messages styled for Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
any idea how to fix this mess ?
Related
Im trying to add toast messages on login/logout, but i get no toast.
Thank u for any advice!
gemfile
gem 'devise'
gem 'toastr-rails'
app\javascript\packs\application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
toastr = require("toastr")
import "bootstrap"
import "../stylesheets/custom.css"
app\assets\stylesheets\application.css
*= require bootstrap
*= require_tree
*= require toastr
*= require_self
app\assets\stylesheets\custom.css.scss
#import 'bootstrap/dist/css/bootstrap';
#import 'toastr';
app\views\shared_message.html.erb
<% unless flash.empty? %>
<script type="text/javascript">
<% flash.each do |key, value| %>
<% type = key.to_s.gsub('alert','error').gsub('notice', 'success') %>
toastr['<%= type %>'] ('<%= value %>')
<% end %>
</script>
<% end %>
app\views\layouts\application.html.erb
<%= render 'shared/message' %>
In your shared_message.html.erb you are already substituting alert with error and notice with success. So you're doing this correct. But you should name your file _message.html.erb inside the shared folder.
In application.js you should also //= require toastr and then, make sure you are in your project folder in terminal and run bundle install
Make sure in you gem file to indicate at least 1. Like this
gem 'toastr-rails', '~> 1.0'
Go to your views in devise/sessions/new.html.erb and devise/registrations/new.html.erb and edit.html.erb and make sure you still have this here
<%= render "devise/shared/error_messages", resource: resource %>
For the error messages above in your views, you will need to add extra work to make it show with toastr.
Go to application.html.erb and ensure you add your partial shared message above the yield, like this:
and ensure you replace this - Notice how you named the file?
<%= render 'shared/message' %>
<%= yield %>
with this - Notice how you must declare the correct file name?
<%= render 'shared/shared_message' %>
<%= yield %>
Above in your question, you named and you created your file in the shared folder as shared_message.html.erb which is wrong.
So please better name it _message.html.erb it's a partial file, you need to put under score. Also for simplicity just name it _message.html.erb
I'm a Ruby on Rails beginner, following through the Pinterest clone guide by John Elder and I'm stuck on trying to apply masonry-rails and jquery.
I'm operating on c9.io and I have installed the required gems and used bundle install.
The problem I am having is that the display of my pins are still vertical and not responsive even though there are no errors displayed in loading.
What am I doing wrong?
Here is my code:
application.css
*= require 'masonry/transitions'
*= require_tree .
*= require_self
*/
pins.js.coffee
$ ->
$('#pins') .imagesLoaded ->
$('#pins') .masonry
itemSelector: '.box'
isFitWidth: true
pins.css.scss
#pins {
margin: 0 auto;
}
.box {
margin: 5px;
width: 214px;
}
.box img {
width: 100%;
}
index.html.erb
<div id="pins" class="transitions-enabled masonry">
<% #pins.each do |pin| %>
<div class="box">
<div class= "panel panel-default">
<%= link_to image_tag pin.image.url (:medium) %><br/>
<div class="panel-body">
<%= pin.description %><br/>
</div>
<% if pin.user == current_user %>
<dsv class="panel-footer">
<%= link_to 'Edit', edit_pin_path(pin) %><br/>
<%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require masonry/jquery.masonry
//= require_tree .
I finally managed to find a solution to the problem!
I just tried adding the additional lines to the application.css file:
*= require 'masonry/basic'
Adding this in is said to be optional in the textbook but they are in fact very necessary to ensure the displays work properly (in my opinion...I'm a beginner).
I am trying out react and Rails. I have a very simple rails app with one Model called "Story".
I installed the react-rails gem:
gem 'react-rails', '~> 1.0'
and followed the suggested installation procedure.
I have scaffolded the story model and made the the 'new' method to root in my routes.rb file. All works fine.
I have added a #stories instance to my 'new' method in storiescontroller that holds all records from the database:
# GET /stories/new -- file: stories_controller.rb
def new
#stories = Story.all
#story = Story.new
end
and in my view I added this line of code
# -- file: new.html.erb
<%= react_component('Story', { :data => #stories }) %>
and in my javascript file I have this code:
# -- file:assets/javascripts/components/story.js.jsx
var Story = React.createClass({
displayName: 'Story',
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.node
},
render: function() {
return (
<div>
<div>Title: {this.props.title}</div>
<div>Description: {this.props.description}</div>
</div>
);
}
});
I thought this should work. But it don't. When I replace the code in the view page with this:
<%= react_component('Story', { :title => "my title", :description=> "my description" }) %>
Then both the 'title' and 'description' are rendered correctly.
It seems that the #stories instance from my view is not parsed correctly to the react component. Then I tried the old-fashion way with
<% #stories.each do |story| %>
<div class="panel">
<h3><%= story.title %></h3>
<p><%= story.description %></p>
</div>
<% end %>
and that works OK. So no problems with the #stories instance. It holds all records and is accessible form the new.htm.erb file.
I am loading the react files after turbolinks in application.js. And settled with this code
# -- file: application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .
$(function(){ $(document).foundation(); });
I can't find the answer on the internet so i hope someone can help me with my first attempt to get react running in my rails environment.
If #stories is an array and passed like this
<%= react_component('Story', { :data => #stories }) %>
then that array will be available on a prop named data, ie., this.props.data will be the array of stories. There is no magic unpacking going on here which will allow you to access each storys properties.
<% #stories.each do |story| %>
<%= react_component('Story', { :story => story }) %>
<% end %>
will allow you to access your data like so this.props.story.title and also render a div for each story you have in your array
I am following the rails cast 263 on client side valuation. I have the code in place, though it is not validating the errors live for me. The errors only show after submitting the form.
application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag :defaults, "rails.validations" %>
<%= csrf_meta_tags %>
client_side_validations.rb:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
unless html_tag =~ /^<label/
%{<div class="field_with_errors">#{html_tag}<label for="#{instance.send(:tag_id)}" class="message">#{instance.error_message.first}</label></div>}.html_safe
else
%{<div class="field_with_errors">#{html_tag}</div>}.html_safe
end
end
form.html.erb:
<%= form_for #user, :validate => true do |f| %>
<% if #user.errors.any? %>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<% #user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %><br/>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %><br/>
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :username %><br/>
<%= f.text_field :username %>
<div class="field">
<%= f.label :zip_code %><br/>
<%= f.text_field :zip_code %>
</div>
</div>
application.js:
//= require jquery
//= require jquery.ui.all
//= require jquery_ujs
//= require jquery.magnific-popup.js
//= require jquery.purr
//= require rails.validations
//= require best_in_place
//= require_tree .
Original Suggestion: Link to JS in application.js.
Rather than linking to the rails.validations.js from application.html.erb:
<%= javascript_include_tag :defaults, "rails.validations" %>
You may want to do this in your app/assets/javascripts/application.js file:
//= require rails.validations
That's how I connect into additional JavaScript files.
I don't know much about Rails 2, but I think that there was a shift in Rails 3 so that now application.html.erb is used to link to application.js and then all other JS files are linked to from there. It looks like :default might not work how it used to. RailsCasts are super helpful but some of the episodes that were created a few years ago have code samples that have changed in recent versions of Rails.
Edit 1: Make sure rails.validations.js was installed into app/assets/javascripts.
In the RailsCast the rails g client_side_validations:install command puts rails.validations.js into the project. Apparently this doesn't always work and you can call rails g client_side_validations:copy_assets to get it dropped into app/assets/javascripts (See: Can't include js file for client slide validation).
Edit 2: In Rails 4, fix compatibility bugs.
It looks like client_side_validations doesn't work in Rails 4 and the gem is no longer maintained (See: https://github.com/bcardarella/client_side_validations).
In Rails 3, in action_view\helpers\form_helper.rb, the apply_form_for_options! method is:
def apply_form_for_options!(object_or_array, options)
In Rails 4, it is:
def apply_form_for_options!(record, object, options)
If you look at the client_side_validations code, its version is:
def apply_form_for_options!(object_or_array, options)
super
options[:html][:validate] = true if options[:validate]
end
That matches the Rails 3 definition. We only get two arguments but then we call super which blows up because Rails 4 expects three arguments.
If you are feeling brave, you could fork the client_side_validations gem and work through these Rails-4-compatibility issues. But I would suspect that there might be quite a few pieces to update since this gem had to be so tightly integrated with the FormHelper.
Sorry that doesn't immediately solve your problem. Good luck!
I'm using the assets pipeline from Rails 3.1 and I want to include some javascript files only if it's the development environment.
Example:
//= require application/jquery
//= require application/jquery_ujs
// next ones only for development environment
//= require application/badglobals
//= require application/consul
Its there a standar way of doing this? Any suggestions?
Update
Looking at the Sprockets current documentation, seems like there is not a way to do this.
Why not just require these in the view? Is it important that they are loaded in the asset? To load them in the view:
<% if Rails.env.development? %>
<%= javascript_include_tag "application/badglobals" %>
<%= javascript_include_tag "application/consul" %>
<% end %>
If you rename your application.js file (or whichever file you're calling //= require ... in) to application.js.erb, you can take advantage of require_asset. i.e:
//= require application/jquery
//= require application/jquery_ujs
<% if Rails.env.development? %>
<%= require_asset 'application/badglobals' %>
<%= require_asset 'application/consul' %>
<% end %>
Source: https://github.com/sstephenson/sprockets/issues/90