Display partial content in Ruby on Rails 5 using link_to without the need to refresh the view

I want to display a partial when a button is clicked without refreshing the page.

This is what I attempted in my exploitation_controller: 

def show_content
  respond_to do |format|               
    format.js
  end
end

In routes.rb: 

get '/exploitation/show_content', to: 'exploitation#show_content', as: 'show_content'`


<%= link_to "Show", show_content_path, :remote => true %>
in my main view.

Then I include 

$('#div_id').html("<%= render :partial => 'my_partial' %>");
in exploitation/show_content.js.erb

However, this leads to the following error : ActionController::UnknownFormat

javascriptruby-on-railsbootstrap-4

Answer №1

It seems like you may be uncertain about where to place the file delete_content.js.erb.

If this is the case (assuming your controller is named functions, based on your question), then you should place it in 

app/views/functions/delete_content.js.erb
. After doing so, your code should function as expected, similar to the answer you referenced in your comments.

Therefore, within the controller:

def delete_content
  respond_to do |format|               
    format.js
  end        
end

In your view:

<%= link_to "Show", show_function_path, :remote => true %>

<div id = "div_id"></div>

However, unless there are unconventional changes made in routes.rb, the current link will likely trigger the controller's show action. To address this, a new route for delete_contents must be defined, such as the one below:

routes.rb

get '/functions/delete_contents', to: 'functions#delete_contents', as: 'delete_function_contents'

Subsequently, update the link to:

<%= link_to "Delete Contents", delete_function_contents_path, :remote => true %>

Within 

app/views/functions/delete_content.js.erb
:

$('#div_id').html("<%= render :partial => 'my_partial' %>");

I hope that clarifies things for you, and feel free to share how it goes!

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

State changes are not being properly reflected in the function within Next.Js

I am currently working on a functional component that displays an array of products. The products are received as props and the component utilizes the useEffect and useState hooks to manage its state. One of the functionalities I am trying to implement is ...

javascriptreactjsreact-hooksnext.jsuse-state

Permit a high volume of pop-up notifications

I created an automation process to shut down all computers in a network using a combination of HTML and PowerShell. The HTML page displays a list of PCs with checkboxes next to each one for selection, as well as a "shutdown" button. In my JavaScript code, ...

javascripthtml

"I need help configuring a social media icon using Bootstrap 4 - can anyone assist with coding this

Just diving into the world of web development and running into an issue with adding a Facebook icon to my HTML code. Here's what I have so far: <div class="container-fluid padding"> <div class="row text-center padding"&g ...

bootstrap-4

What is the best way to loop through strings in a request object?

I am currently working with Express and need to scan the POST requests to create an array called openingTimes. After that, I want to generate a MongoDB document based on the user inputs. The code snippet below is functional, but I am looking for a way to ...

javascriptnode.jsmongodbexpress

React rejects the rendering of a div element

I've encountered an issue with my web application where the /tasks section is not displaying any content, even though everything else is working fine. I've double-checked my code and it seems to be identical to the other elements. import React, ...

javascriptreactjs

Perform subtraction operation between two arrays of objects in Javascript

Hey there, I could use some guidance on the best method for subtracting values between two arrays of objects. In my scenario (backend), I retrieve data on Products from mongodb, and I also fetch Trolley data from MySql. What I'm attempting to achieve ...

javascriptnode.jsarraysobject

Is there a way to verify if a variable is a generator function, for example, a function with the asterisk symbol and

Is there a foolproof method to determine if a function is a generator, like in the example below: let fn = function* () { yield 100; } if (fn instanceof ??) { for (let value in fn()) { ... } } I have only been able to come up with fn.to ...

javascriptnode.jsecmascript-6

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

How can we access state data in a Vuex component once it is mounted?

My goal is to initialize a Quill.js editor instance in a Vue component once it is loaded using the mounted() hook. However, I am facing an issue where I need to set the Quill's content using Quill.setContents() within the same mounted() hook with data ...

javascriptvue.jsvuejs2vuex

Tips on streamlining the deployment process for a basic Vue WebApp without the need for a server (e.g. setting up a straightforward build chain with Vue

I have developed a Vue app and I am exploring ways to automate its deployment process by implementing a CI/CD pipeline that includes linting, testing, building, and uploading the files to web servers (such as stage or production using sftp). After researc ...

javascriptvue.jsnpmcontinuous-integrationnpm-scripts

Unable to retrieve text content from dynamically created element in JavaScript?

I'm currently facing an issue while working on a school project. The problem arises with a textContent error when I attempt to import a JSON file and utilize the data in a foreach loop. Despite defining the properties with elements from the JSON file, ...

javascriptjson

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

cssbootstrap-4blazorblazor-server-sidepopper.js

Discover the inner workings of the code below: set a variable called "start" to the current time using the new Date().getTime() method. Create a loop that continuously checks if

I'm having trouble understanding how this code snippet works. Can someone please provide a demonstration? Thanks in advance.... It seems that the code is subtracting 'start' from the current date with new Date, resulting in 0 which is less t ...

javascriptdatetimewhile-loopnew-operator

JavaScript consistently returns HiddenField as NULL

After creating a Context menu and associating it with a Gridview, I noticed a problem when pressing a button from the context menu. I intended to retrieve a value from a HiddenField, but it always returns null. My assumption is that the DOM might not be fu ...

c#javascriptjqueryasp.net

Navigating to a Different Vue or Page with Vue Form Wizard

I'm currently exploring VUE JS and trying to figure out how to redirect to another vue or page after submitting a form. I've been working with the sample code provided at https://stackblitz.com/edit/vue3-form-wizard-demo?file=src%2FApp.vue. Whil ...

javascriptvue.js

I am implementing a new method in the prototype string, but I am uncertain about its purpose

I am trying to wrap my head around the concept here. It seems like the phrase will pass a part of an array, in this case eve, to the phrase.palindrome method. This method will then process it. First, the var len takes the length of eve and subtracts 1 from ...

javascriptarraysfor-loopprototypecharat

Difficulty executing for loop due to multiple buttons, resulting in malfunctioning buttons in JavaScript code

Currently encountering an issue while trying to implement modal windows on my first website. Everything works fine without the for loop, but I wanted to have multiple buttons and windows, so I decided to use a for loop to handle each button. Strangely, the ...

javascripthtml

The Bootstrap validator triggers the form submission only after the second click

When I click on the submit button, I am attempting to submit a form that has its default action prevented and first checks a condition before proceeding. Below is the code snippet: $('#payment-form').bootstrapValidator({ live: 'dis ...

javascriptjqueryformstwitter-bootstrapbootstrapvalidator

import the JSONP file from the local directory and assign it to a variable on

My current setup involves a local webpage that is loading a large JSON database file by utilizing a file named data.jsonp that contains data={a JSON dictionary of information}. I then import this file in my HTML using <script src="data.jsonp"& ...

javascriptjson

Secure AJAX call to PHP service in WordPress, with proper authentication

I have a basic website that utilizes d3.js to generate graphs. The graph data is retrieved via AJAX from a php service using GET requests with specific parameters. The php service then responds with the data in JSON format. Now, I am looking to secure thi ...

javascriptphpajaxwordpressauthentication