Toasts notifications not displaying on rails - ruby-on-rails

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

Related

how to manually include remotipart js?

I need to conditionally use the remotipart gem. The [docs][1] say just add it to application.js:
//= require jquery.remotipart
But I don't want it to be included with every single view, instead I want to conditionally include it, however when I try:
<%= javascript_include_tag "jquery.remotipart" %>
I get an error. How do i reference a js included as part of a gem generically, and remotipart js specifically?
Thanks,
Kevin
But I don't want it to be included with every single view, instead I want to conditionally include it, however when I try:
What means conditionally in this context? The most simplest way would be
<%= javascript_include_tag "jquery.remotipart" if condition %>
Also you could use content_for like this on the views where you want to include it:
# in your view
<% content_for :js do %>
<%= javascript_include_tag "jquery.remotipart" %>
<% end %>
# in your layout.html.erb
<%= yield :script %>
https://apidock.com/rails/ActionView/Helpers/CaptureHelper/content_for
If you meant that you get an error that the JS file can't be found, please update your question with what library (webpacker, sprockets) and Rails version you use.

Rails In line edit

How can I edit the following below in the index page? I would like to be able to inline edit and update the following the view has the index action
<% #request.each do |s| %>
<%= s.message %>
<%= s.date %>
<% end %>
Tried the gem best in place but i doesnt seem to work so whenever i tried
<%= best_in_place #request, :message %> it throws an error of unknown method :message. Isnt this <%= best_in_place #request, :message %> the same with this <%= s.message %>
Does best in place work in rails version 5.1.4 and how can I make the inline edit to work ?
Does best in place work in rails version 5.1.4 and how can I make the
inline edit to work ?
Yes, it works, you need jQuery and to add the gem and JS libraries.
For jQuery:
$ yarn add jquery
Then in your application.js file:
//= require jquery
For best_in_place, add the gem in the Gemfile:
gem 'best_in_place', '~> 3.0.1'
Then the library in your application.js file:
//= require jquery
//= require best_in_place
...
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
You see the best_in_place js right after jquery, and the initialization in the same file - you must add //= require_tree . for initializing in the same file.
Then in your view you need to pass the object and the attribute:
<% #request.each do |request| %>
<%= best_in_place request, :message %>
...
<% end %>

React component is not rendering activerecord relation in Rails view

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

Rails strong order of assets require

here is mobile.js
//= require jquery
//= require iui
//= require faye-updater
//= require anonymous-chat
//= require anonymous-vote
//= require_self
here is how i include scripts
<%= content_for :head do %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
<%= javascript_include_tag "mobile" %>
<% end %>
and what i get after recompiling assets: mobile....js starts from
function launch_faye_updater....
this is function from the faye-updater.js and it must be included after jquery and iui. And it does not work because of wrong inclusion order. How to make Rails include assets in right order ?
UPD: This is in production mode Rails 3.2.8
Where is launch_faye_updater being called from?
I'm guessing you can fix this problem by moving this line:
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
Down below the other include, like so:
<%= javascript_include_tag "mobile" %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
(You may also want to consider creating a new compiled JS file with these two files in it.)
I had the same problem with my jquery, bootstrap and application dependencies. You can deliver all your JS modules in preferred order in Rails 3.1+. In your example you want to have jquery.js included before mobile.js.
First, remove jquery from your mobile.js file.
Then you need to add following line of code to your application.rb:
config.assets.precompile += ['mobile.js', 'jquery.js', 'jquery_ujs.js']
At this moment you have everything precompiled and ready to use. Your mobile.js doesn't include jquery, so you can include it in your preferred order:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "mobile" %>
And that's it!

Rails PJAX not working

I have added the pjax javascript.
In my view I have:
<div data-pjax-container>
<%= yield %>
</div>
But still onclick the hole page updates.
Be sure you have included this line in app/assets/javascript/applications.js:
//= require jquery.pjax
Add an id attribute to the div:
<div id="target_pjax_container" data-pjax-container>
<%= yield %>
</div>
And make an explicit call to a pjax div from a link in your views:
<%= link_to 'user', user_path, :'data-pjax' => '#target_pjax_container' %>
Note:
The gem used is 'pjax_rails'. Always check that javascript isn't broken (with firebug or equivalent - You can also use it to sniff the network and view the pjax request).
Maybe you forget to add the line:
//= require pjax
to app/assets/application.js?

Resources