We Keep Coding

Rails and JavaScript: Uncaught TypeError: Cannot set property 'onclick' of undefined at HTMLDocument.<anonymous>

I am very new to combining Rails and JavaScript and I am trying to display error messages in a pop-up window. I am working with devise and my user rgistration form is a multistep form. Users_controller create action looks like this:
def create
#user = User.new(params[:user])
if #user.save
session[:user_id] = #user.id
redirect_to user_steps_path
else
respond_to do |format|
format.js do
render template: 'registrations/failed_modal.js.erb',
layout: false,
locals: { error_messages: #modal.errors }
end
end
end
I have a form in views/devise/registrations/new.html.erb. In this form you can also see, that I already defined my modal window, inkl. the styles in CSS, which, I think, are not relevant here.
<div class="container">
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="modal-body">
// errors will display here with javascript code
</div>
</div>
</div>
<div class="center-items-register">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), remote: true) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="row 1">
<div class="column">
<div class="field">
<%= f.label :first_name, class: 'required' %><br />
<%= f.text_field :first_name, class: 'form-control' %>
</div>
</div>
<div class="column">
<div class="field">
<%= f.label :last_name, class: 'required' %><br />
<%= f.text_field :last_name, class: 'form-control' %>
</div>
</div>
</div>
<div class="row 2">
<div class="column">
<div class="field email">
<%= f.label :email, class: 'required' %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
</div>
</div>
</div>
<div class="row 3">
<div class="column">
<div class="field">
<%= f.label :password, class: 'required' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %>
<%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %><br />
</div>
</div>
<div class="column">
<div class="field">
<%= f.label :password_confirmation, class: 'required' %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control' %>
</div>
</div>
</div>
<div class="row buttons">
<div class="column buttons">
<div class="actions">
<%= f.submit "Sign up", class: 'btn form margin' %>
</div>
</div>
<% end %>
<div class="column buttons">
<% if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
<% end %>
<%= link_to fa_icon("facebook", text: "Sign up with facebook"), user_facebook_omniauth_authorize_path, class: "btn btn-lg btn-social btn-facebook" %>
</div>
</div>
</div>
</div>
In the devise/shared folder I have _error_messages.html.erb.
<% if resource.errors.any? %>
<div id="error_explanation">
<h2>
<%= I18n.t("errors.messages.not_saved",
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
%>
</h2>
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
In the folder views/devise/registrations I have created failed_modal.js.erb, to which I reffer in my Users_Controller with this line:
render template: 'registrations/failed_modal.js.erb',
The failed_modal.js.erb has following content:
var errors = <%= error_messages.to_json.html_safe %>;
var errorForm = document.querySelector('#myModal');
Object.keys(errors).forEach(function(prop) {
var modalBody = error_form.querySelector('.modal-body');
var errElement = document.createElement('div');
errElement.classList.add('alert');
errElement.classList.add('alert-danger');
errElement.innerText = prop + ':' + errors[prop][0];
modalBody.appendChild(errElement)
})
errorForm.style.display = "block";
Also I created a new file in assets/javascripts/new.js and I do have //= require_tree in my application.js. The content of my new.js file as follows:
document.addEventListener("DOMContentLoaded", function() {
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById("myModal");
var modalBody = document.querySelector(".modal-body");
span.onclick = function() {
modal.style.display = "none";
modalBody.innerHTML = "";
};
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modalBody.innerHTML = "";
}
};
});
When I now click on the "sign up"-button in my form I get the error described in the title of the question. What am I doing wrong? This code was created with some copy-paste help and I kind of understand what is happening. There are however some thoughts on this, I have:
locals: { error_messages: #modal.errors }
I tried #user.errors and also resource.errors - seems not to be affecting anything. So I don't know if #modal.errors is right here.
In failed_modal.js.erb there is var errorForm = ... but in the line below the code is
var modalBody = error_form.querySelector('.modal-body');
Could this be a mistake?
When I run this in the browser, console tells me the error is in span.onclick = function() line. But I assume, there are more errors, as nothing happens when I click "sign up" at all.

Update <li> element class with Javascript for rails loop

I'm designing an application to store sport games. Now in my notifications I have a list of games to confirm, in my list I have the read and unread class options and also an action to confirm the game. Now when someone confirms a game I don't want a page refresh, however the class should change in read and the button should disappear.
<ul class="notification-body">
<% #games.each do |game|
#CONTROLE OP VERWIJDERDE USERS
home_user_name = if game.home_user.present?
game.home_user.username
else
t :deleted_user
end
away_user_name = if game.away_user.present?
game.away_user.username
else
t :deleted_user
end
%>
<!-- LOST GAMES -->
<li class="unread">
<span>
<p class="msg">
<% if game.home_user.avatar_url.present? %>
<%= image_tag(game.home_user.avatar_url, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% elsif game.home_user.uid.present? %>
<%= image_tag(game.home_user.largeimage, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% else %>
<%= image_tag(asset_path('picempty.jpg'), class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% end %>
<span class="from"><% if game.loser_user == game.home_user %>Game Won<% else %>Game Lost<% end %> </span>
<time><%= time_ago_in_words(game.created_at) %> ago</time>
<span class="subject"><%= home_user_name %> <% if game.loser_user == game.home_user %> lost <% else %>won <% end %> the game with <%= game.home_score %> - <%= game.away_score %></span>
<span class="msg-body">
<%= link_to game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>
<% end %>
<%= link_to game_conflict_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-warning margin-top-5"> <i class="fa fa-flag" aria-hidden="true"></i> Flag</button>
<% end %>
</span>
</p>
</span>
</li>
<% end %>
</ul>
<% content_for :scripts do %>
<script>
$('li a').click(function () {
// remove existing active class inside li elements
$('li.unread').removeClass('unread');
// add class to current clicked element
$(this).addClass('read');
});
</script>
<% end %>
Could someone help me with this Javascript? I kind of a noob in Javascript so sorry if this is a stupid question.
A little recap:
When
<%= link_to game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>
<% end %>
This button is clicked, it should disappear and also
<li class="unread">
should change to
<li class="read">

You can hide the button, using jQuery hide()
$('li a').on('click', function(e){
e.preventDefault();
$(this).parent('li').removeClass('unread').addClass('read')
$(this).hide();
})
li{
list-style: none;
margin: 10px 0;
padding: 10px 0;
}
.button{
padding: 5px 10px;
border: 1px solid #ccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Buttons</title>
</head>
<body>
<ul>
<li class="unread"><a class="button" href="#">Button</a></li>
<li class="unread">Button</li>
<li class="unread">Button</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

$('body').on('click', '.unread', function() {
$(this).addClass('read');
$(this).removeClass('unread');
});
Thanks

Raty jQuery plugin not working Rails 5

I'm new to RoR and I'm having issues displaying the Raty plugin on my app.
Also, I've noticed that another Js function has stopped working since I've added Raty so I believe there's a conflict between them?
Raty correspondent files have been added: jquery.raty.js // jquery.raty.css // images
All help would be appreciate, thank you!
/models/product.rb
def average_rating
comments.average(:rating).to_f
end
/assets/javascript/application.js
$(document).on('turbolinks:load', function () {
$(".alert").delay(1500).fadeOut("slow");
});
$(document).on('turbolinks:load', function () {
$(".notice").delay(1500).fadeOut("slow");
});
/assets/javascript/site.js
$(document).on('turbolinks:load', function(){
$('.rating').raty( { path: '/assets', scoreName: 'comment[rating]' });
$('.rated').raty({ path: '/assets',
readOnly: true,
score: function() {
return $(this).attr('data-score');
}
});
});
/views/products/_new_comment.erb
<% if signed_in? %>
<h2>Add a review:</h2>
<%= form_for([#product, #product.comments.build]) do |f| %>
<p>
<%= f.label :body, "Comments" %><br>
<%= f.text_area :body %>
</p>
<p>
<%= f.label :rating, "Rating" %><br>
<div class="rating"></div>
</p>
<br>
<p>
<%= f.submit "Submit" %>
</p>
<% end %>
<% end %>
/views/products/_comments.erb
<div class="product-reviews">
<% #comments.each do |comment| %>
<div class="row">
<hr>
<p><%= comment.user.first_name %> <small><em><%= "#{time_ago_in_words(comment.created_at)} ago" %></em></small></p>
<p><div class="rated" data-score="<%= comment.rating %>"></div></p>
<p><%= comment.body %></p>
</div>
<% end %>
</div>
/views/products/show.html.erb
<div class="col-md-12">
<%= render partial:'new_comment' %>
</div>
<div class="col-md-12">
<%= render partial:'comments' %>
</div>

You didn't copy your config/environments/production.rb in your question, but it probably looks like this:
config.assets.compile = false
If you change it to true, it should work:
config.assets.compile = true

How to prepopulate _form with duplicated image?

A user can click on a featured_inspiration to prepopulate a new _form with the data from that featured_inspiration. The data being :text and/or :image. This is so the user can save a preexisting Inspiration to his own list of Inspirations.
:text correctly prepopulates the form, but for some reason :image remains nil.
controller
def new
existing_inspiration = Inspiration.find_by_id params[:inspiration_id]
if existing_inspiration
#inspiration = existing_inspiration.dup
### Attempt at Making It Works. Had No Effect. ###
#inspiration.image_file_name = existing_inspiration.dup.image_file_name
#inspiration.image_content_type = existing_inspiration.dup.image_content_type #Attempt at Making It Works. Had No Effect.
#inspiration.image_file_size = existing_inspiration.dup.image_file_size
#inspiration.image_updated_at = existing_inspiration.dup.image_updated_at
##############
else
#inspiration = current_user.inspirations.build
end
end
Console
[41] pry(main)> Inspiration.last
Inspiration Load (1.7ms) SELECT "inspirations".* FROM "inspirations" ORDER BY "inspirations"."id" DESC LIMIT 1
=> #<Inspiration:0x007fa6d15ec9a8
id: 13,
conceal: false,
user_id: 8,
created_at: Fri, 26 Feb 2016 15:29:52 EST -05:00,
updated_at: Fri, 26 Feb 2016 15:29:52 EST -05:00,
likes: nil,
name: "",
image_file_name: nil, #SHOULD BE: "inspiring-quotes-about-life-6gbwrvxd.jpg",
image_content_type: nil, #SHOULD BE: "image/jpeg",
image_file_size: nil, #SHOULD BE: 83348
image_updated_at: nil> #SHOULD BE: Wed, 24 Feb 2016 15:25:44 EST -05:00>
_form
<%= simple_form_for(#inspiration, html: { data: { modal: true } }) do |f| %>
<%= f.file_field :image %>
<%= f.text_area :text %>
<% end %>
Question that got duplicating text to work.
UPDATE
suggested_inspirations
<% #inspirations.each do |inspiration| %>
<%= link_to inspiration_path(inspiration) do %>
<div class="box panel panel-default" style="width: 175px;">
<% if inspiration.image.present? %>
<div id="box">
<%= link_to new_inspiration_path(inspiration_id: inspiration.id), data: { modal: true } do %>
<div class="inspiration-image-button"><span class="glyphicon glyphicon-plus"></span></div>
<% end %>
<%= link_to image_tag(inspiration.image.url(:medium)), inspiration %> #This is how image is pulled
</div>
<% end %>
<% if inspiration.name.present? %>
<div class="panel-body">
<%= link_to new_inspiration_path(inspiration_id: inspiration.id), data: { modal: true } do %>
<div class="inspiration-button"><span class="glyphicon glyphicon-plus"></span></div>
<% end %>
<%= inspiration.name %>
</div>
<% end %>
</div>
<% end %>
<% end %>

I wonder what you need to do is something like this:
#inspiration = existing_inspiration.dup
#inspiration.image_file_name = existing_inspiration.image_file_name
Leaving out the dupand doing the "deep" copies by hand.
Take a look at What is the easiest way to duplicate an activerecord record?. It is a bit old, but an enlightening discussion as well as pointers to some gems that make "deep" copies.

Why is my index view not working when I implement datepicker in my rails app

Hi I am new to rails and would really appreciate some help, I am using the jQuery datepicker, the show view works however the index view doesn't, i get "undefined method `start_date' for nil:NilClass" in my index.html.erb file. Can you please let me know what is wrong with my index view and how i can fix it. The following are included in my app:
meetups_controller.rb
def show
#meetup = Meetup.find(params[:id])
end
def index
#meetups = Meetup.where('user_id = ?', current_user.id).order('created_at DESC')
end
show.html.erb
<h3>Title: <%= #meetup.title %></h3>
<p>Start date: <%= #meetup.start_date.strftime("%B %e, %Y") %></p>
<p>Start time: <%= #meetup.start_time.strftime("%l:%M %P") %></p>
<p>End date: <%= #meetup.end_date.strftime("%B %e, %Y") %></p>
<p>End time: <%= #meetup.end_time.strftime("%l:%M %P") %></p>
index.html.erb
<% if #meetups.any? %>
<% #meetups.each do |meetup| %>
<h3><%= link_to meetup.title, meetup_path(meetup) %></h3>
<p>Start date: <%= #meetup.start_date.strftime("%B %e, %Y") %></p>
<p>Start time: <%= #meetup.start_time.strftime("%l:%M %P") %></p>
<p>End date: <%= #meetup.end_date.strftime("%B %e, %Y") %></p>
<p>End time: <%= #meetup.end_time.strftime("%l:%M %P") %></p>

undefined method `start_date' for nil:NilClass
You are looping through #meetups as meetup but you are giving #meetup in the loop instead of meetup.So is the error because there is no #meetup initialized in your index action.
This should work
<% #meetups.each do |meetup| %>
<h3><%= link_to meetup.title, meetup_path(meetup) %></h3>
<p>Start date: <%= meetup.start_date.strftime("%B %e,%Y") %></p>
<p>Start time: <%= meetup.start_time.strftime("%l:%M %P") %></p>
<p>End date : <%= meetup.end_date.strftime("%B %e,%Y") %></p>
<p>End time : <%= meetup.end_time.strftime("%l:%M %P") %></p>
<% end %>