I have the following cart view that i addapted with bootstrap.
<div class="row line_item">
<div class="col-md-4 cart-item-image" data-hook="cart_item_image">
<% if variant.images.length == 0 %>
<%= link_to small_image(variant.product), variant.product %>
<% else %>
<%= link_to image_tag(variant.images.first.attachment.url(:product)), variant.product %>
<% end %>
</div>
<div class="col-md-4 cart-item-image" data-hook="cart_item_description">
<h4><%= link_to line_item.name, product_path(variant.product) %></h4>
<%= variant.options_text %>
<% if line_item.insufficient_stock? %>
<span class="out-of-stock">
<%= Spree.t(:out_of_stock) %> <br />
</span>
<% end %>
<span class="line-item-description" data-hook="line_item_description">
<%= line_item_description_text(line_item.description) %>
</span>
</div>
<div class="col-md-1 cart-item-price" data-hook="cart_item_price">
<%= line_item.single_money.to_html %>
</div>
<div class="col-md-1 cart-item-quantity" data-hook="cart_item_quantity" valign="center">
<%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
</div>
<div class="col-md-2">
<div class="cart-item-total" data-hook="cart_item_total">
<%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
</div>
<div class="cart-item-delete" data-hook="cart_item_delete">
<%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
</div>
</div>
</div>
and the following coffeescript that goes along with it
Spree.ready ($) ->
if ($ 'form#update-cart').is('*')
($ 'form#update-cart a.delete').show().one 'click', ->
($ this).parents('.line-item').first().find('input.line_item_quantity').val 0
($ this).parents('form').first().submit()
false
($ 'form#update-cart').submit ->
($ 'form#update-cart #update-button').attr('disabled', true)
Now the delete button does not work with this cart html ( while it is working with the original view a following)
<div style="margin-top: 35px;">
<div class="row">
<tr class="line-item">
<td class="col-md-4 cart-item-image" data-hook="cart_item_image">
<% if variant.images.length == 0 %>
<%= link_to small_image(variant.product), variant.product %>
<% else %>
<%= link_to image_tag(variant.images.first.attachment.url(:small)), variant.product %>
<% end %>
</td>
<td class="col-md-4 cart-item-description" data-hook="cart_item_description">
<h4><%= link_to line_item.name, product_path(variant.product) %></h4>
<%= variant.options_text %>
<% if line_item.insufficient_stock? %>
<span class="out-of-stock">
<%= Spree.t(:out_of_stock) %> <br />
</span>
<% end %>
<span class="line-item-description" data-hook="line_item_description">
<%= line_item_description_text(line_item.description) %>
</span>
</td>
<td class="col-md-1 lead text-primary cart-item-price" data-hook="cart_item_price">
<%= line_item.single_money.to_html %>
</td>
<td class="col-md-1 cart-item-quantity" data-hook="cart_item_quantity" valign="center">
<%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
</td>
<td class="col-md-1 lead text-primary cart-item-total" data-hook="cart_item_total">
<%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
</td>
<td class="col-md-1 cart-item-delete" data-hook="cart_item_delete">
<%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
</td>
</tr>
</div>
</div>
It seems to me that the coffeescript should work in both cases!
What am i missing after i modify the view ? It seems to me that the coffeescript should perform the search in both cases...
It doesn't look like you've done anything wrong when it comes to keeping the markup for the javascript the same. My guess would be that Spree.ready ($) -> isn't actually firing. That could be caused by you removing javascript files during your view customization by accident. You should try checking your web developer console to see if there are any javascript errors like Spree not being defined or something like that.
Related
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>
Working on Rails 5,
I am trying to render nested form (same model) in each dynamic tab,
but now the same fomr is rendering in the all the tabs,how to render different fieldset in different tabs
views/material_masters/new.html.erb
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<% #part_locations.each.with_index do |l, i| %>
<li <%= 'class="active"' if i == 0 %>>
<%= l.location_name %>
</li>
<% end %>
<li><button type="button" class="fa fa-plus btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"></button> </li>
</ul>
<div class="tab-content">
<% #part_locations.each.with_index do |l, i| %>
<div class="tab-pane <%= 'active' if i == 0 %>" id="<%= l.location_name %>">
<%= f.fields_for :material_locations do |builder| %>
<%= render 'material_location_fields', :f => builder %>
<% end %>
<%= link_to_add_association "Add", f, :material_locations, class: "btn btn-primary btn-xs" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
views/material_masters/_material_location_fields.html.erb
<fieldset>
<div class= "nested-fields">
<div class="col-sm-3">
<%= f.label :material_location, "Material Location" %>
<%= f.text_field :mat_location,class:"form-control",required: true %>
</div>
<div class="col-sm-3">
<%= f.label :opening_stock %>
<%= f.text_field :opening_stock ,class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required: true %>
</div>
<div class="col-sm-3">
<%= f.label :reorder_qty %>
<%= f.text_field :reorder_qty, class:"form-control",onKeyPress:"return NumbersOnly(this, event,true)",required:true %>
</div>
</div>
</fieldset>
model/material_master.rb
class MaterialMaster < ApplicationRecord
has_many :material_locations
accepts_nested_attributes_for :material_locations,allow_destroy: true
end
https://i.stack.imgur.com/b6Ssr.png
https://i.stack.imgur.com/69h3X.png
Hear i am trying to add location in bangalore tab i am addling mumbai location and in delhi tab i want to add one more material location but the same form is coming in the next tab
What is obviously on your code is that you have space here in a line:
<%= l.location_name %>
as you can note l .location_name can you remove the space?
I use RoR to render file js
render file js:
<% #screen_shots.each do |s| %>
$('<%= j render "item", :s => s %>').insertBefore('.form-upload');
$(document).ready(function(){
//"preview-screenshot-<%= s.id%>" is element insertBefore to ".form-upload"
c = document.getElementById("preview-screenshot-<%= s.id%>");
console.log(c.clientHeight);
});
<% end %>
I want to get height of above elements but do not exactly.
Console write = 58px, when I check element with f12 so height = 412px.
(css don't unrelated here)
How to fix this?
render file item.html.erb
<div class="col-sm-3 col-lg-3 col-md-3" style="padding: 0 8px;">
<div class="preview" style=" <%= style_for_screen_shot(s)%>" id='<%="screen-shot-#{s.id}"%>'>
<div class="phone-image">
<%= link_to screen_shot_path(s), method: :delete, remote: true, data: { type: :json }, class: "remove-screen-shot" do %>
<span class="badge label-default" style="position: absolute;top: 10px;right: 10px;font-weight: bold;">X</span>
<% end %>
<p class="preview-caption"> <%= s.text %></p>
<%= image_tag s.image_url, class: "preview-screenshot ", id: "preview-screenshot-#{s.id}"%>
<%= image_tag "imgpsh.png", class: "preview-bg"%>
</div>
</div>
<div class="setting">
<div class="setting-head">Layout & Style</div>
<div class="setting-caption">
<label for="setting-caption">Caption</label>
<textarea class="form-control update-text" id="setting-caption" data-id= "<%= s.id%>" data-url="<%= screen_shot_set_screen_shot_path(#screen_shot_set, s) %>"> <%= s.text %> </textarea>
</div>
<div class="setting-more">
<div class="setting-more-btn dropup" >
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin"> <span class="glyphicon glyphicon-cog"></span> Change Color & Background <span class="caret"></span> </a>
<div class="dropdown-menu" style="width: 100%; padding: 15px;">
<%= form_for s, class: "", :remote => true, :html => {:'data-type' => "json"} do |f|%>
<table>
<tr>
<td> <%= f.label :color%> </td> <td style="padding: 5px;"> <%= f.color_field :color%> </td>
</tr>
<tr>
<td> <%= f.label :bg_color%> </td> <td style="padding: 5px;"> <%= f.color_field :bg_color%> </td>
</tr>
</table>
<div class="row">
<div class="col-sm-12">
<%= f.submit "Changes", :class => "btn btn-success", style: "width: 100%;" %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
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.