Objective
My current goal is to establish a new store using a modal window.
Challenges
- I am facing an issue where the form in my modal does not appear when I click the button. ~ Despite reaching the new.js.erb file and being able to display a flash message instead of the form. ~
- Another problem arises from my usage of
instead of<%= simple_form_for (Store.new) do |f|%>
. The latter results in an error message:<%= simple_form_for (@store) do |f|%>
undefined method `model_name' for nil:NilClass
- Progress Following Chandra's solution (refer to Answer below), clicking the button causes the tag to illuminate in my browser. Additionally, I have included my views/layouts/application.html.erb file.
Code Snippets
views/stores/index.html.erb
<%= render "partials/show_panel_stores_overview"%>
views/partials/show_panel_stores_overview.html.erb
<%= link_to 'New store', new_store_path, remote: true %>
views/stores/new.js.erb
var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('body').append(wrapper);
views/stores/_form
<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>
store controller
def new
@store = current_user.store.build
@store.age_tables.build
respond_to do |format|
format.html { redirect_to root_url, alert: 'Page not accessible' }
format.js
end
authorize @store
end
def create
@store = current_user.stores.create(store_params)
authorize @store
if @store.save
redirect_to stores_path
else
render 'new'
end
end
views/layouts.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TODO</title>
<%= csrf_meta_tags %>
<%= action_cable_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<%= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
</head>
<body>
<%= yield %>
<%= render 'shared/flashes' %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
</body>
</html>