Develop Reference

Bootstrap modal duplicating content untill refresh

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>

why modal with ajax does not close correctly?

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

Create a Modal to Add new user from Navbar in bootstrap 3 modal - Rails 5

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!

ActionController::UnknownFormat in RegistrationsController#create (Devise)

I am trying to do Devise registration via modal window (remote: true) and do all in backend and by rendering javascript when some validation errors occur. So far I am in the middle of the road and my validation messages appear to be working just fine, but until the time I try to upload also an image, then I get unknown format error page. I tried few things already, but as I am quite new with RoR, my ideas came to the end. Below is my registration_controller, modal view and screen shots.
I have not come to the successful registration of the object yet, so the code may contain some issues in this point, but right now the described issue is blocking me to move forward.
I will really appreciate any help on this.
Thank you, Miroslav.
RegistrationsController.rb
class RegistrationsController < Devise::RegistrationsController
clear_respond_to
respond_to :js
def create
build_resource(resource_params)
child_class = params[:user][:user_type].camelize.constantize
resource.rolable = child_class.new(user_params(child_class.to_s.underscore.to_sym))
valid = resource.valid?
valid = resource.rolable.valid? && valid
if valid && resource.save
if resource.active_for_authentication?
set_flash_message :notice, :signed_up if is_navigational_format?
flash.keep(:notice)
sign_in(resource_name, resource)
render :js => "window.location = #{root_path.to_json}"
else
set_flash_message :notice, :inactive_signed_up, :reason => inactive_reason(resource) if is_navigational_format?
expire_session_data_after_sign_in!
respond_with resource, location: after_inactive_sign_up_path_for(resource)
end
else
clean_up_passwords resource
respond_to do |format|
format.js {render layout: false, content_type: 'text/javascript'}
end
end
end
private
def user_params(user)
if user.to_s == "non_profit"
params[:user][:non_profit].permit(:name, :ico, :non_profit_type_id, :description, :website, :representative, contact_attributes: [:first_name, :last_name, :email, :phone, image_attributes: [:image]], image: [:image])
else
params[:user][:customer].permit(:first_name, :last_name, :gender, :dob, :city)
end
end
def resource_params
params[:user].permit(:email, :password, :password_confirmation, :terms, :opt_in_correspondence, bank_account_attributes: [:number, :bank_code_id], address_attributes: [:street, :city, :postcode])
end
end
Modal View
<%
#address = resource.build_address
resource.rolable = "NonProfit".constantize.new if resource.rolable.nil?
#logo = resource.rolable.build_image
#contact = resource.rolable.build_contact
#picture = resource.rolable.contact.build_image
#account = resource.build_bank_account
%>
<div id="modal-nonprofit-registration" class="z-2000 modal-bg" style="display: block;">
<div class="modal-wrap" style="margin-top: 0px;">
<div class="modal">
<div class="modal-header full bg-main txt-white container-center semi-padding-bottom semi-padding-top relative">
<h3 class="no-margin size-large-r"><%= t(:register_nonprofit_title) %></h3>
<div class="absolute full-h wrap-cross semi-right top">
<div class="table full-h">
<div class="full-h full-w table-center">
<span id="registration-close" class="bg-cross table-center pointer"></span>
</div>
</div>
</div>
</div>
<!-- Modal body /-->
<div class="modal-body table-nr full-w modal-content bg-base col-wrap half-padding-top half-padding-bottom half-padding-left half-padding-right">
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { data: {type: 'script'}, id: "register-nonprofit-form" }, remote: true, multipart: true, authenticity_token: true) do |f| %>
<%= f.input :user_type, :as => :hidden, :input_html => { :value => "NonProfit" } %>
<div class="row">
<div class="col-6">
<h3><%= t(:register_nonprofit_login_details_title) %></h3>
<div class="row">
<div class="col-12 img">
<%= f.input :email, as: :email, autofocus: true, :required => true, label: false, placeholder: t(:register_field_email) %>
</div>
</div>
<div class="row">
<div class="col-12 img">
<%= f.input :password, as: :password, autocomplete: "off", :required => true, label: false, placeholder: t(:register_field_password) %>
<span class="muted-hint"><%= t(:register_field_password_hint) %></span>
</div>
</div>
<div class="row">
<div class="col-12">
<%= f.input :password_confirmation, as: :password, autocomplete: "off", :required => true, label: false, placeholder: t(:register_field_password_confirmation) %>
</div>
</div>
</div>
<%= f.simple_fields_for :non_profit, resource.rolable do |np| %>
<%= np.simple_fields_for :contact, resource.rolable.build_contact do |c| %>
<div class="col-6 last">
<h3><%= t(:register_nonprofit_contact_details_title) %></h3>
<div class="row">
<div class="col-6">
<%= c.input :first_name, :required => true, label: false, placeholder: t(:register_field_firstname) %>
</div>
<div class="col-6">
<%= c.input :last_name, :required => true, label: false, placeholder: t(:register_field_lastname) %>
</div>
</div>
<div class="row">
<div class="col-12">
<%= c.input :email, as: :email, :required => true, label: false, placeholder: t(:register_field_email) %>
</div>
</div>
<div class="row">
<div class="col-12">
<%= c.input :phone, as: :tel, :required => true, label: false, placeholder: t(:register_field_phone) %>
</div>
</div>
<%= c.simple_fields_for :image, #picture do |i| %>
<div class="row">
<div class="col-12">
<%= i.input :image, as: :file, label: false, placeholder: t(:register_field_photo), :class => "file", input_html: { :id => 'contact-file-input', hidden: true } %>
<div class="custom_file_upload">
<input id="contact-file-text" type="text" class="file" placeholder="<%= t(:register_field_photo) %>" name="file_info">
<div class="file_upload" id="contact-file-upload">
</div>
</div>
</div>
</div>
<% end %> <!-- end of contact image field -->
</div>
<% end %> <!-- end of contact fields -->
<% end %> <!-- end of non profit fields -->
</div>
<div class="row">
<h3><%= t(:register_nonprofit_organization_details_title) %></h3>
<div class="col-6">
<%= f.simple_fields_for :non_profit, resource.rolable do |np| %>
<h4><%= t(:register_nonprofit_organization_details_basic_title) %></h4>
<div class="row">
<div class="col-12">
<%= np.input :name, :required => true, label: false, placeholder: t(:register_field_org_name) %>
</div>
</div>
<div class="row">
<div class="col-12">
<%= np.input :ico, :required => true, label: false, placeholder: t(:register_field_ico) %>
</div>
</div>
<div class="row">
<div class="col-12">
<%= np.select(:non_profit_category_id, options_for_select(NonProfitCategory.options_for_select), { :prompt => t(:register_nonprofit_types_prompt) }, { :class => "form-control" }) %>
</div>
</div>
<% end %> <!-- end of nonprofit fields -->
<%= f.simple_fields_for :bank_account, #account do |ba| %>
<div class="row">
<div class="col-8">
<%= ba.input :number, :required => true, label: false, placeholder: t(:register_field_account) %>
<span class="muted-hint"><%= t(:register_field_account_hint) %></span>
</div>
<div class="col-4">
<%= ba.select(:bank_code_id, options_for_select(BankCode.options_for_select), { :prompt => t(:register_nonprofit_codes_prompt) }, { :class => "form-control" }) %>
</div>
</div>
<% end %> <!-- end of bank account fields -->
<%= f.simple_fields_for :address, #address do |a| %>
<h4><%= t(:register_nonprofit_organization_details_address_title) %></h4>
<div class="row">
<div class="col-12">
<%= a.input :street, :required => true, label: false, placeholder: t(:register_field_street) %>
</div>
</div>
<div class="row">
<div class="col-8">
<%= a.input :city, :required => true, label: false, placeholder: t(:register_field_city) %>
</div>
<div class="col-4">
<%= a.input :postcode, :required => true, label: false, placeholder: t(:register_field_psc) %>
</div>
</div>
<% end %> <!-- end of address fields -->
</div>
<div class="col-6 last">
<h4><%= t(:register_nonprofit_organization_details_other_title) %></h4>
<!--<div class="muted-italic">Doporučujeme vyplnit</div>-->
<%= f.simple_fields_for :image, #logo do |i| %>
<div class="row">
<div class="col-12">
<%= i.input :image, as: :file, label: false, placeholder: t(:register_field_logo), :class => "file", input_html: { :id => 'nonprofit-file-input', hidden: true } %>
<div class="custom_file_upload">
<input id="nonprofit-file-text" type="text" class="file" placeholder="<%= t(:register_field_logo) %>" name="file_info">
<div class="file_upload" id="nonprofit-file-upload">
</div>
</div>
</div>
</div>
<% end %> <!-- end of nonprofit image field -->
<%= f.simple_fields_for :non_profit, resource.rolable do |np| %>
<div class="row">
<div class="col-12">
<%= np.input :website, as: :url, label: false, placeholder: t(:register_field_web) %>
</div>
</div>
<div class="row">
<div class="col-12">
<%= np.input :description, as: :text, :required => true, label: false, placeholder: t(:register_field_description), :input_html => { :rows => 15 } %>
<div class="remainChars"><span class="usedChars">0</span>/1000</div>
</div>
</div>
<% end %> <!-- end of nonprofit fields -->
</div>
</div>
<div class="row">
<div class="col-7">
<%= f.simple_fields_for :non_profit, resource.rolable do |np| %>
<div class="checkbox">
<%= np.input :representative, as: :boolean, :required => true, boolean_style: :inline, :input_html => { :checked => false }, label: t(:register_field_representative) %>
</div>
<% end %>
<div class="checkbox">
<%= f.input :terms, as: :boolean, :required => true, boolean_style: :inline, :input_html => { :checked => false }, label: ("#{t(:register_field_terms)} #{link_to t(:register_form_link_terms), legal_statements_path, :title => t(:register_form_link_terms), :class => 'underline capital'}").html_safe %>
</div>
<div class="checkbox">
<%= f.input :opt_in_correspondence, as: :boolean, boolean_style: :inline, :input_html => { :checked => true }, label: t(:register_field_subscribe) %>
</div>
</div>
<div class="col-5 last">
<input type="submit" class="submit last" value="Registrovat" name="">
</div>
</div>
<% end %>
</div>
<!-- end of modal body /-->
</div>
</div>
SCREENSHOTS
Render create.js.erb and show error messages properly, when I do not upload any image
Get error page when I try to upload also an image with paperclip

File uploads doesn't work with remote forms. You should use some other way to upload files.
For example;
https://github.com/JangoSteve/remotipart
https://github.com/tors/jquery-fileupload-rails
My suggestion is using remotipart.

As seen in
http://www.mehmet.pw/category/ruby-on-rails/
Just change registration_path(resource_name), taking out the resource_name so it doesn't look for resource.model, just for resource...
IT worked for me with this code (fixing the same error):
<h2>Sign up</h2>
<%= devise_error_messages! %>
<div class="container">
<%= form_for(resource, as: resource_name, url: user_registration_path, format: :json) do |f| %>
<form class="form-horizontal">
<div class="form-group">
<%= f.label :first_name %>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :last_name %>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :phone %>
<%= f.telephone_field :phone, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
</div>
<div class="form-group">
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
</div>
<div class="actions">
<%= f.submit "Create", class:"btn btn-primary btn-lg"%>
</div>
</form>
<% end %>
<div class="container-fluid">
<%= render "devise/shared/links" %>
</div>
</div>

Rails 4 app not connecting to Stripe

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.