I am using Rails-6, with Bootstrap-4.
I am using Bootstrap Card to display my form.
The form is simple with a lable,text field, file upload and submit button.
here is the outout
Here is code for my form:
<%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>
<div class="card text-center">
<div class="card-header">
Add New Photo
</div>
<div class="card-body">
<%= form_for #photo do |f| %>
<%= render "shared/errors", object: #photo %>
<%= f.hidden_field :image, value: #photo.cached_image_data %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.label :image %>
<%= f.file_field :image %>
<% if #photo.image_data? %>
<%= image_tag #photo.image_url(:medium) %>
Remove attachment: <%= f.check_box :remove_image %>
<% end %>
<%= f.submit %>
<% end %>
</div>
<div class="card-footer text-muted">
</div>
</div>
In my Javascript pack I have intercepted form submit event by using the javascript.
$(document).ready(function(){
function processForm(e) {
if (e.preventDefault) e.preventDefault();
alert('intercepted form submission');
/* do what you want with the form */
// You must return false to prevent the default form behavior
return false;
}
var form = document.getElementById('new_photo');
if (form.attachEvent) {
form.attachEvent("submit", processForm);
alert('attachEvent');
} else {
form.addEventListener("submit", processForm);
alert("addEventListener");
}
});
I noticed that when I put my complete form in Bootstrap-Card-Body (as in above code)then the event works as desired and the attached function executes on clicking submit button.
But when I put the Form-Submit button in Bootstrap-Card-Footer (as per code below) then on clicking the submit button the attached function does not execute.
<%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>
<div class="card text-center">
<div class="card-header">
Add New Photo
</div>
<div class="card-body">
<%= form_for #photo do |f| %>
<%= render "shared/errors", object: #photo %>
<%= f.hidden_field :image, value: #photo.cached_image_data %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.label :image %>
<%= f.file_field :image %>
<% if #photo.image_data? %>
<%= image_tag #photo.image_url(:medium) %>
Remove attachment: <%= f.check_box :remove_image %>
<% end %>
</div>
<div class="card-footer text-muted">
<%= f.submit %>
<% end %>
</div>
</div>
here is what it looks like.
moved form submit button in card-body
Why it happen? What concept I am missing? How do I make the attached event listner to fire when I Click Submit button placed in Card-Footer?
In this part of your example:
<div class="card-body">
<%= form_for #photo do |f| %>
<%= render "shared/errors", object: #photo %>
<%= f.hidden_field :image, value: #photo.cached_image_data %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.label :image %>
<%= f.file_field :image %>
<% if #photo.image_data? %>
<%= image_tag #photo.image_url(:medium) %>
Remove attachment: <%= f.check_box :remove_image %>
<% end %>
</div>
<div class="card-footer text-muted">
<%= f.submit %>
<% end %>
</div>
After Rails done compiling your view template to html it will look (roughly) like below:
<div class="card-body">
<form method="post" action="/photos" ...>
<input ... />
<input ... />
</div>
<div class="card-footer text-muted">
<input type="submit" ... />
</form>
</div>
It will not be a valid HTML at all. The first div (.card-body) lacks the closing </form> tag. But the second div (.card-footer) has an unexpected closing </form> tag. Browsers still gracefully handle this by closing the <form> tag before the first </div> for you, but the <input type="submit" ... /> button will be outside the form and so the submit button won't work anymore.
I recommend you to change your code like below. Just let the <form> tag surround your whole card:
<%= javascript_pack_tag 'photo', 'data-turbolinks-track': 'reload' %>
<div class="card text-center">
<%= form_for #photo do |f| %>
<div class="card-header">
Add New Photo
</div>
<div class="card-body">
<%= render "shared/errors", object: #photo %>
<%= f.hidden_field :image, value: #photo.cached_image_data %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.label :image %>
<%= f.file_field :image %>
<% if #photo.image_data? %>
<%= image_tag #photo.image_url(:medium) %>
Remove attachment: <%= f.check_box :remove_image %>
<% end %>
</div>
<div class="card-footer text-muted">
<%= f.submit %>
</div>
<% end %>
</div>
Related
From my homepage I go to the register page by clicking "register" button, I will end up by a registration form. There, if mandatory fields are not filled out correctly, a modal would pop up and list the errors. Problem is, that the first try to register causes the modal like this :
However, if I refresh the page, modal works perfectly as supposed to. This is only happening when redirected through a register-button from a home page.
Here is my code: devise/registrations/new.html.erb
<div class="container">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn btn-secondary dismiss-close" data-dismiss="modal">Close</button>
</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" %>
<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', data: { toggle: "modal", target: "#myModal" } %>
</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>
Here is devise/registrations/failed_modal.js.erb
var errors = <%= error_messages.to_json.html_safe %>;
var errorForm = document.querySelector('#myModal');
var modalBody = errorForm.querySelector('.modal-body');
var alertElement = document.createElement('div')
alertElement.id = "alertElement";
alertElement.classList.add('alert');
alertElement.classList.add('alert-danger');
modalBody.appendChild(alertElement);
var errList = document.createElement('ul');
alertElement.appendChild(errList)
errors.forEach(function(error) {
var errElement = document.createElement('li');
errElement.innerText = error;
errList.appendChild(errElement)
})
errorForm.style.display = "block";
And assets/javascripts/new.js
document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById("myModal");
if (!modal) return;
var close = modal.querySelector(".dismiss-close");
var modalBody = modal.querySelector(".modal-body");
var modalContent = modal.querySelector(".modal-content");
window.onclick = function(event) {
if (event.target == modal) {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
modalBody.removeChild(modalBody.querySelector('#alertElement'));
}
}
function closeModal() {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
modalBody.removeChild(modalBody.querySelector('#alertElement'));
}
modalContent.addEventListener("click", function(event) {
event.stopPropagation();
});
close.addEventListener("click", closeModal);
modal.addEventListener("click", closeModal);
});
Before I had the problem, that "close" button in my modal disappeared : here. Also backround didn't disappear, this is why I added this jQuery bit in my code:
function closeModal() {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
In the console I only see the error related to autocomplete with "Algolia Places", but it should't even be here, as I actually use this autocomplete function on the next page. Here is my application.html.erb just in case. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :meta %>
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'autocomplete' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= yield :css %>
</head>
<body>
<% if #user.nil? %>
<%= render 'layouts/header' %>
<% elsif user_signed_in? && #user.street.nil? %>
<%= render partial: "layouts/header_address" %>
<% else %>
<%= render 'layouts/header_rest' %>
<% end %>
<%= render 'layouts/flash' %>
<div id="main">
</div>
</body>
</html>
I need help, I have tried in many ways (several of them are in the forum and nothing)
In the index I have a link_to where I open the modal and below is the div with the id of the modal.
index.html.erb
<%= link_to 'Nuevo equipo', new_team_path, {class:"btn btn-success",:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window-new' } %>
...
<div id="modal-window-new" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
new.js.erb
<% #tipo = 'Nuevo Equipo'
js = escape_javascript(
render(partial: 'teams/form', locals: { team: #team })
) %>
$("#modal-window-new").html("<%= js %>");
_form.html.erb
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" ><%= #tipo %></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</div>
<%= form_for team, remote: true do |form| %>
<div class="modal-body">
<%= form.label "Obligatorio (*)", class: "col-form-label" %>
<div class="modal-body">
<% if team.errors.any? %>
<div class="form-group">
<strong><%= pluralize(team.errors.count, "error/es") %> antes de agregar un equipo:</strong><br>
<% team.errors.full_messages.each do |message| %>
<%= message %><br>
<% end %>
</div>
<% end %>
</div>
<div class="form-group">
<%= form.label :nombre_equipo, "Nombre Equipo*", class: "col-form-label" %>
<%= form.text_field :nombre_equipo, class: "form-control", id: :team_nombre_equipo %>
</div>
<div class="form-group">
<%= form.label :ciudad_equipo, "Ciudad Equipo*", class: "col-form-label" %>
<%= form.text_field :ciudad_equipo, class: "form-control", id: :team_ciudad_equipo %>
</div>
<div class="form-group">
<%= form.label :restriccion_horario, "Restricción Horario", class: "col-form-label" %>
<%= form.text_field :restriccion_horario, class: "form-control", id: :team_restriccion_horario %>
</div>
<div class="form-group">
<%= form.label :camiseta, class: "col-form-label" %>
<%= form.text_field :camiseta, class: "form-control", id: :team_camiseta %>
</div>
<div class="form-group">
<%= form.label :pantaloneta, class: "col-form-label" %>
<%= form.text_field :pantaloneta, class: "form-control", id: :team_pantaloneta %>
</div>
<div class="form-group">
<%= form.label :medias, class: "col-form-label" %>
<%= form.text_field :medias, class: "form-control", id: :team_medias %>
</div>
<script>
$(document).ready(function() {
$("select#team_select").select2();
}); </script>
<div class="form-group">
<%= form.label :delegate_id, "Delegado:*" %>
<%#= form.select(:delegate_id, Delegate.all, :id, :nombre, {include_blank: "None"}, {id: "team_select"}) %>
<%= collection_select(:team, :delegate_id, Delegate.all, :id, :nombre_del_completo, {:multiple => false, :include_blank => true}, {class: "form-control", id: "team_select"})%><br><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<%= form.submit "Guardar", class: "btn btn-success"%>
</div>
<% end %>
</div>
</div>
And he tried with
$('#modal-window-new').modal('hide');
in no way the modal is closed, by the way we already have the app on a server.
thank you very much!
----------------------------------------------
Upgrade
update.js.erb
<% if not #team.errors.any? %>
$('#modal-window-new').modal('hide');
console.info($('#modal-window-new'));
<% else %>
<% #tipo = 'Editar Equipo'
js = escape_javascript(
render(partial: 'teams/form', locals: { team: #team })
) %>
$("#modal-window-edit").html("<%= js %>");
<% end %>
After the form is getting submitted the update.js is getting rendered. You have to put the js statement in there:
$('#modal-window-new').modal('hide');
If a new model is getting created you have to add it to the create.js file.
in your case maybe located under /app/views/teams/...
A better update.js or create.js is to handle the model is:
<% if not #team.errors.any? %>
$('#modal-window-new').modal('hide');
// do other updates here
<% else %>
$('#modal-window').show();
// todo: render partial again into the modal
<% end %>
// todo: show some errors
So I am having an issue creating a user in a modal from my navbar. I want to add the link to allow an administrator to create a new user from a link as opposed to going to users index and use the modal button there.
My nav-bar link:
<li><%= link_to "Add User", new_user_path, remote: true %></li>
My Modal so far:
found in: _create.html.erb
<%= content_tag :div, class: "modal fade", id: "createUser" do %>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<%= form_for(#user, remote: true) do |f| %>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
FORM HERE
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<%= f.submit "Create New User", :class => 'btn btn-primary' %>
</div>
<% end %>
</div>
</div>
</div>
my create.js.erb
$('#createUser').modal('hide');
$(".email").val('');
$(".password").val('');
$(".f_name").val('');
$(".l_name").val('');
$(".primary_tel").val('');
$('#table_body').prepend('<%= j render partial: 'user_row', locals: {user: #user} %>');
$('#user_row_<%= #user.id %>').hide().fadeIn(1000);
users controller / new action
def new
#user = User.new
end
User form I want to turn into a modal:
<%= form_for(user) do |f| %>
<% if user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% user.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :user_ident %>
<%= f.text_field :user_ident %>
</div>
<div class="field">
<%= f.label :f_name %>
<%= f.text_field :f_name %>
</div>
<div class="field">
<%= f.label :l_name %>
<%= f.text_field :l_name %>
</div>
<div class="field">
<%= f.label :primary_tel %>
<%= f.text_field :primary_tel %>
</div>
<div class="field">
<%= f.label :role_id %>
<%= collection_select(:user, :role_id, Role.all, :id, :name, {prompt: true}) %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I assume you want to display the modal in the index view of UsersController. Add your code in _create.html.erb to the top of users/index.html.erb. Your modal won't display unless you explicitly ask it to. Since you're rendering a form in the modal for #user, you need to define what #user is in index action.
# users_controller.rb
def index
#users = User.all
#user = User.new
end
You have specified remote:true in your link to new_user_path, you have to render a js response in the new action.
def new
#user = User.new
respond_to do |format|
format.js #Looks for `users/new.js.erb`
#other formats
end
end
Since we already have the modal template in index.html.erb, all you need to do in new.js.erb is to display the modal.
# new.js.erb
$("#createUser").modal('show');
Since you have create.js.erb ready, thats all to be done.
EDIT: If you want to place this link in the navigation bar, you should add the modal template to a partial(say layouts/_new_user_modal.html.erb) and render it in application.html.erb which is common to all the views. Also, you need to make a change to your form. Instead of
<%= form_for(#user, remote: true) do |f| %>
use
<%= form_for(User.new, remote: true) do |f| %>
This way you don't have to define #user in every action of your application (DRY).
Hope this helps!
I have a simple event app with a 'new event' form on the index page. It should create a new event and update the index page without having to reload the page. I already tried disabling turbo-link as per this stackoverflow post but to no avail. Lastly, it also has a calendar on the same page that I'd like to update with the index of events.
Here's a quick list of things that might factor into a solution:
routes to a subdomain
this was originally a scaffold
Gemfile:
## abbreviated ##
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'simple_calendar', '~> 2.0.1'
gem 'bootstrap-sass', '~> 3.3.5'
application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require_tree .
events_controller.rb
class EventsController < ApplicationController
def index
#events = #account.events.all
#event = #account.events.new
end
def create
#event = #account.events.new(event_params)
#event.save!
#events = #account.events.all
respond_to do |format|
format.html { redirect_to events_path }
# supposedly this line below appends my partial from 'app/views/events/_event.html.erb
format.js
end
end
## abbreviated ##
app/views/events/_event.html.erb
<tr>
<td><%= event.location %></td>
<td><%= event.time.strftime("%I:%M %p") %></td>
<td><%= event.event_name %></td>
<td><%= link_to 'Show', event %></td>
<td><%= link_to 'Edit', edit_event_path(event) %></td>
<td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
events/index.html.erb
<p id="notice"><%= notice %></p>
<h1>Listing Events</h1>
<div class="fluid-container">
<div class="col-xs-7">
<%= month_calendar attribute: :time, events: #events do |date, time_slots| %>
<%= date.strftime("%m/%d") %>
<% time_slots.each do |event| %>
<div>
<%= link_to event.event_name, event %>
</div>
<% end %>
<% end %>
</div><!--col-xs-7-->
<div class="col-xs-5">
<br />
<p>
<%= link_to "Toggle Events", "#", id: "events-link" %>
</p>
<section id="events-section">
<%# <%= render 'form' %1> %>
<%= form_for(#event, remote: true) do |f| %>
<% if #event.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#event.errors.count, "error") %> prohibited this event from being saved:</h2>
<ul>
<% #event.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label :location %><br>
<%= f.text_field :location, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :time %><br>
<%= f.datetime_select :time, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :event_name %><br>
<%= f.text_field :event_name, class: 'form-control' %>
</div>
<div class="actions">
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
<h3>All events</h3>
<div class="panel panel-default" >
<table class="table table-striped">
<thead>
<tr>
<th>Location</th>
<th>Time</th>
<th>Event name</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<%= render #events %>
</tbody>
</table>
</div><!--panel-->
</section>
<br />
</div><!--col-xs-5-->
</div><!--container-->
EDIT 1:
Forgot to include my create.js.erb file:
create.js.erb
$('#events').append("<%= j render #event %>");
EDIT 2:
Here's what it looks like with either of the solutions below - each solution renders the index on to the calendar like you see in the picture below.
EDIT 3:
Changed create.js.erb to the following. However, only the index_content part works.
index_content = '<%= escape_javascript render(#events) %>'
$('#events-section').html(index_content)
calendar_content = '<%= escape_javascript render('calendar') %>'
$('#calendar-section').html(calendar_content)
Created new file app/views/events/_calendar.html.erb:
<div class="simple-calendar">
<%= link_to "Previous", start_date: date_range.first - 1.day %>
<%= I18n.t("date.month_names")[start_date.month] %> <%= start_date.year %>
<%= link_to "Next", start_date: date_range.last + 1.day %>
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<tr>
<% date_range.slice(0, 7).each do |day| %>
<th><%= I18n.t("date.abbr_day_names")[day.wday] %></th>
<% end %>
</tr>
</thead>
<tbody id="calendar-section>
<% date_range.each_slice(7) do |week| %>
<tr>
<% week.each do |day| %>
<%= content_tag :td, class: calendar.td_classes_for(day) do %>
<% block.call day, sorted_events.fetch(day, []) %>
<% end %>
<% end %>
</tr>
<% end %>
</tbody>
</table>
</div><!--panel-->
</div>
In app views events create a new template and app/views/events/create.js.erb. And write the code something like
content = '<%= escape_javascript render(#events) %>'
$('tbody').fadeOut('slow').html(content).fadeIn('slow')
You are trying to append the row into #events but in the html I can't see any element with id events.
Possible solution:
change
<tbody>
<%= render #events %>
</tbody>
with
<tbody id="events">
<%= render #events %>
</tbody>
Let me help you to fix this. You have to do the following:
events/index.html.erb
Change your index.html.erb code in calendar section and add a new attribute id="calendar-section":
<p id="notice"><%= notice %></p>
<h1>Listing Events</h1>
<div class="fluid-container">
<div id="calendar-section" class="col-xs-7">
<%= month_calendar attribute: :time, events: #events do |date, time_slots| %>
<%= date.strftime("%m/%d") %>
<% time_slots.each do |event| %>
<div>
<%= link_to event.event_name, event %>
</div>
<% end %>
<% end %>
</div><!--col-xs-7-->
<div class="col-xs-5">
<br />
<p>
<%= link_to "Toggle Events", "#", id: "events-link" %>
</p>
<section id="events-section">
<%# <%= render 'form' %1> %>
<%= form_for(#event, remote: true) do |f| %>
<% if #event.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#event.errors.count, "error") %> prohibited this event from being saved:</h2>
<ul>
<% #event.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label :location %><br>
<%= f.text_field :location, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :time %><br>
<%= f.datetime_select :time, class: 'form-control' %>
</div>
<div class="field form-group">
<%= f.label :event_name %><br>
<%= f.text_field :event_name, class: 'form-control' %>
</div>
<div class="actions">
<%= f.submit class: "btn btn-primary" %>
</div>
<% end %>
<h3>All events</h3>
<div class="panel panel-default" >
<table class="table table-striped">
<thead>
<tr>
<th>Location</th>
<th>Time</th>
<th>Event name</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<%= render #events %>
</tbody>
</table>
</div><!--panel-->
</section>
<br />
</div><!--col-xs-5-->
</div><!--container-->
events/_calendar.html.erb
Create a new render partial file app/views/events/_calendar.html.erb. Remove locals variable #events into events. This example:
<%= month_calendar attribute: :time, events: events do |date, time_slots| %>
<%= date.strftime("%m/%d") %>
<% time_slots.each do |event| %>
<div>
<%= link_to event.event_name, event %>
</div>
<% end %>
<% end %>
events/create.js.erb
Create new file app/views/events/create.js.erb. Add locals variable #events
$("#error_explanation > ul").html("")
<% if #event.errors.any? %>
<% #event.errors.full_messages.each do |message| %>
$("#error_explanation > ul").append($("<li />").html("<%= message.html_safe %>"))
<% end %>
<% else %>
$('tbody').html("<%= escape_javascript(render 'event') %>");
$('#calendar-section').html("<%= escape_javascript(render(:partial => 'calendar', :locals => {:events => #events})) %>");
<% end %>
I hope can help you.
Trying to add stripe payments to my app, but its not connecting.
installed the stripe gem , restarted the server & added my stripe API keys (test)
Added the javascript info so it connects the my stripe account
So when i buy something enter CC details it should connect to stripe.
Have also turned off turbolinks but still does the same. What i need is a pop up from stripe to i know its working.
orders.js.coffee
jQuery ->
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
payment.setupForm()
payment =
setupForm: ->
$('#new_order').submit ->
$('input[type=submit]').attr('disabled', true)
Stripe.card.createToken($('#new_order'), payment.handleStripeResponse)
false
handleStripeResponse: (status, response) ->
if status == 200
alert(response.id)
else
alert(response.error.message)
show.html.erb
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<%= image_tag #listing.image.url %>
</div>
</div>
<div class="col-md-6">
<h3><%= #listing.name %></h3>
<p><%= number_to_currency(#listing.price) %></p>
<p><%= #listing.description %></p>
<br>
<div class="center">
<%= link_to "Buy it Now", new_listing_order_path(#listing), class: "btn btn-primary", data: { no_turbolink: true } %>
</div>
</div>
<% if current_user == #listing.user %>
<%= link_to 'Edit', edit_listing_path(#listing), class: "btn btn-link" %> |
<% end %>
<%= link_to 'Back', listings_path, class: "btn btn-link" %>
orders._form.html
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<%= image_tag #listing.image.url %>
</div>
<h3><%= #listing.name %></h3>
<h4><%= number_to_currency(#listing.price) %></h4>
</div>
<div class="col-md-8">
<%= form_for([#listing, #order]) do |f| %>
<% if #order.errors.any? %>
<div id="error_explanation" class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><%= pluralize(#order.errors.count, "error") %> prohibited this order from being saved:</h4>
<ul>
<% #order.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label :address %>
<%= f.text_field :address, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :city %>
<%= f.text_field :city, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :state %>
<%= f.text_field :state, class: "form-control" %>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<%= label_tag :card_number, "Credit Card Number" %>
<%= text_field_tag :card_number, nil, { :name => nil, :'data-stripe' => "number", class: "form-control" } %>
</div>
<div class="col-md-4">
<%= label_tag :card_code, "CVC" %>
<%= text_field_tag :card_code, nil, { :name => nil, :'data-stripe' => "cvc", class: "form-control" } %>
</div>
</div>
</div>
<div class="form-group">
<%= label_tag nil, "Expiration Date" %>
<div class="row">
<div class="col-md-3">
<%= select_month nil, { use_two_digit_numbers: true }, { :name => nil, :'data-stripe' => "exp-month", class: "form-control" } %>
</div>
<div class="col-md-3">
<%= select_year nil, { start_year: Date.today.year, end_year: Date.today.year+10 }, { :name => nil, :'data-stripe' => "exp-year", class: "form-control" } %>
</div>
</div>
</div>
<div class="form-group">
<%= f.submit "Complete Order", class: "btn btn-success" %>
</div>
<% end %>
</div>
</div>
It looks like you're trying to trigger the Stripe function from a form that doesn't exist. You have several references to:
$('#new_order')
It looks like your form id is actually new listing order:
$('#new_listing_order')
But check the generated HTML, or inspect element, to be sure.