Issue with modal form not displaying upon clicking

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
    <%= simple_form_for (Store.new) do |f|%>
    instead of
    <%= simple_form_for (@store) do |f|%>
    . The latter results in an error message:
    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>

Answer №1

The code provided above appears to be accurate

There is a small correction required in

views/stores/new.js.erb

var form = $('<%= j(render 'form') %>');

Replace the above line with

var form = $("<%= j(render 'form') %>");

To see an example of how to render partials using Ajax, visit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

Problem arising from selecting checkbox label

Every time I click on the checkbox label, it automatically scrolls to the top of the page. I even removed all scripts and styles from the code, yet the issue persists. My suspicion is that it may be related to the loop, so I am currently investigating fur ...

Stop jQuery from submitting the form in case of validation errors

Hey there, I'm currently working on preventing the AJAX form submission function from happening if one of the inputs fails validation. Edit: Specifically, I'm looking for guidance on what changes need to be made in //Adult age validation and var ...

Oops! We encountered an internal issue: MongooseError: The operation `posts.insertOne()` has exceeded the buffering time limit of 100

Encountering an error when trying to post data to the Posts model upon clicking the post button: Internal error: MongooseError: Operation posts.insertOne() buffering timed out after 10000ms My setup includes a local MongoDB and Next.js 14 with app router. ...

Unable to locate the JavaScript files within the NextJs and ReactJs project

I've encountered an issue when trying to import js files (which are libraries) in my project. I am currently using NextJS version 14.1.3 and ReactJS version 18.2.0. You can find the path to these files here Here is a glimpse of the project structure ...

I was surprised to find something other than a gulp folder in the node_modules directory after running npm install gulp --save-dev

Seeking some guidance on my process - can someone point out if I am making a mistake? Downloaded Node from their official website Global installation of Gulp (npm install --global gulp) Created a folder and initiated it by running (npm init), which gene ...

Believing that members possess a certain role when they actually do not

const { Discord, MessageEmbed } = require("discord.js"); module.exports = { name: "ban", description: "bans user from guild", execute(client, message, cmd, args, Discord) { const member = message.mentions.u ...

JavaScript: Locate web addresses within a block of text and convert them into clickable hyper

How can we convert the following PHP code to JavaScript in order to replace URL links inside text blobs with HTML links? A jsfiddle has been initiated. <?php // The Regular Expression filter $reg_exUrl = "/(http|https|ftp|ftps)\:\/\/[a- ...

typescript tips for incorporating nested types in inheritance

I currently have a specific data structure. type Deposit { num1: number; num2: number; } type Nice { num: number; deposit: Deposit; } As of now, I am using the Nice type, but I wish to enhance it by adding more fields to its deposit. Ultima ...

Avoid deleting a row in Sequelize if it is referenced in another association

Is there a method in Sequelize.js to trigger an exception when attempting to delete a row that is associated with another entity? For example, consider tables for Roles and Users. They have a many-to-many association, allowing any user to have multiple ro ...

Minimize the gap between legend text and icon in Highchart

Is there a way to decrease the space between the number and icon? I am currently working with Angular 8 and Highchart. Below is the configuration of the chart legend. https://i.stack.imgur.com/0dL7y.jpg this.legend = { align: 'center', verti ...

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

Creating visually appealing doughnut charts with rounded borders by utilizing multiple datasets in ChartJs

Currently, I am working on a Chartjs doughnut chart with multiple datasets. Here is the code snippet for the datasets: datasets: [ { label: 'Bugs', data: [ 60 , 6.6666666666667 , 33.333333333333 ], ...

dynamic progress tracker creation in PHP

I have two web pages. When an ajax call is made from the first page to the second page, it executes PHP code that takes a long time (1-2 minutes). How can I create a progress bar and display the progress percentage in real-time on the first page? I am able ...

Guide on redirecting to an HTML page on a local computer

Recently, I created an HTML page named A.html on my local computer which consists of 2 text fields and a button. I made a host entry to access the file via localhost. Upon clicking the button on A.html, it redirects me to a corporate login page where I ne ...

Kendo: linking information to a form

I recently inquired about this matter on Stack Overflow but wanted to share my question here as well. Due to my limited reputation, I am unable to leave a comment, so please excuse any redundancies. My current challenge is figuring out how to bind the re ...

Erroneous deletion issue in React list causing removal of incorrect item

While working on creating a todo list in React, I faced an issue when trying to implement a delete function. The problem arose when attempting to delete an item - instead of removing the selected item, React ended up deleting everything except that specif ...

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

Vue is having trouble loading dynamic src files, and the require function isn't functioning properly

I'm facing an issue with displaying a dynamic image. When I use the following code: <img :src="src" alt="img"> It doesn't seem to work. However, it works perfectly fine when I use: <img src="../assets/img/banana ...

Webpack returns an undefined error when attempting to add a JavaScript library

I am a newcomer to webpack and I am attempting to incorporate skrollr.js into my webpack setup so that I can use it as needed. However, I am unsure of the correct approach for this. After some research, I have found that I can either use an alias or export ...