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 %>
Related
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.
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 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
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!
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