When the text for the Rails confirmation popup is sourced from a controller variable, it may not display properly

Attempting to customize my submit_tag confirmation popup within my Rails view, I encounter an issue when trying to utilize an instance variable from the Rails controller. Within the controller, I set up the variable as follows:

@confirmation_msg = "test"

Subsequently, in my .haml view file, I attempt to incorporate this variable as the text for the confirmation prompt inside the submit_tag.

= submit_tag "Increase Limits", { onclick: "return confirm(#{@confirmation_msg})", class: "btn btn-danger"}

However, upon executing this code, the confirmation prompt displays blank without any visible text. Notably, the cancel and OK buttons are still present. Surprisingly, if I replace

"return confirm(#{@confirmation_msg})"
with "return confirm('test')", the prompt successfully shows "test". What could be causing the variable from the controller to render as empty text in the confirmation prompt?

Answer №1

Are you assigning a string or something different?

@confirmation_msg = test <--- Is this a variable that contains a string or did you misspell "test"? 

If @confirmation_msg does turn out to be a string, make sure to enclose it in single or double quotes:

"return confirm('#{@confirmation_msg}')"

It's also advisable to escape the content if there are special characters and/or new lines:

"return confirm('#{ j @confirmation_msg }')"

(The j method serves as a convenient alias for the escape_javascript method)

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

MongoDB was successfully updated, however the changes are not being displayed on the redirected

I have implemented the delete action in Node/Express as a web framework, where it is structured within a higher-level route: .delete((req, res) => { db.collection('collection-name').findOneAndDelete({ topic_title: req.body.topic_title}, ...

Address the snack bar problem

In my quest to create a custom snackbar, I have encountered a minor issue with setting and deleting session variables in Node.js. While using global or local variables works well for accessing data on the client side, there is a chance of issues when multi ...

What steps do I need to take to ensure that Phaser implements modifications made in my game.js file?

I recently completed the Phaser Tutorial and set up my project with an index.html file and a game.js file, along with downloading the phaser.min.js file. All files are located in the same folder. Although I have connected everything correctly and the outp ...

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

Adjust the FlipClock time based on the attribute value

When setting up multiple FlipClock objects on a page, I need to retrieve an attribute from the HTML element. The specific HTML tag for the clock is: <span class="expire-clock" data-expire="2015-09-22"> Is there a way to access '2015-09-22&apos ...

Encountering a console error: Prop type validation failed for the `Rating` component with the message that the prop `value` is required but is currently `undefined`

I am encountering a proptype error which is causing an issue with the URL display on my Chrome browser. Instead of showing a proper address, I am seeing the URL as undefined like this: http://localhost:3000/order/undefined Instead of undefined, I should h ...

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

Encountering a Node.js error while using ssh2: ECONNRESET read error

I have been attempting to utilize npm's ssh2 package to establish an SSH connection and remotely access a machine. The code functions properly for connections from Windows to Linux/MacOS, but encounters issues when connecting from Windows to Windows ( ...

Acquiring information from a variable via an HTTP request

I am new to making http requests and using PHP. I have a code snippet that makes an AJAX call: xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var doc = xmlhttp.response; myFunc( ...

AngularJS $http.post() response function not executing in the correct sequence

When calling a function from my angular controller to make a $http.post() request, the code below the function call is executing before the successFunction(), preventing the code inside the if block from running. How can I ensure the if block executes wi ...

Can an EJS variable be transferred to an Angular ng-repeat filter?

I am currently working on a profile page where I need to display a user's name in plain text using <%= user.local.name %>. This requires querying the database through Mongoose. My issue now is figuring out how to pass that value to an Angular ng ...

Rebalancing Rotation with Three.js

Currently, I am utilizing Three.js and my goal is to swap out an object in the scene with a new one while maintaining the same rotation as the one I removed. To achieve this, I take note of the rotation of the object I'm removing and then utilize the ...

When rendering inside *.map in React, the first object of the array may not be rendered

When the SearchCard component is being rendered, it seems to be skipping the first object in the array- const cardArrayTrackSearch = this.state.searchtrack.map((user, i) => { return ( <SearchCard key={i} reload={th ...

When configuring Webpack with a rule array, JSX is not properly recognized by the tool

Here is the configuration for my webpack setup: const path = require('path'); module.exports = { entry: './src/entry.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist&ap ...

Using JavaScript and jQuery to make calls to the Web API

I am struggling with Java-script callback due to lack of experience. Can anyone provide assistance in resolving the issues I am facing with the code? My goal is to perform a callback from a .json file and search it by ID. While I can display all customers, ...

Why is my model not being updated when selecting an option in Angular UI Select-UI?

I want to streamline the use of select-ui by creating a wrapper in a directive. This way, I can easily update the control in one place and avoid the hassle of scattering it all over my site. Despite building a wrapper, I'm facing an issue where the v ...

Using AngularJS with Spring MVC and @RequestParam

As a newcomer to AngularJS, I have a Spring controller that retrieves an object from the database based on its id. I want to pass this id using @RequestParam in AngularJS. However, when attempting to do so, I encountered the following error message: "Error ...

What steps can be taken to ensure that an ObjectID does not transition into a primitive form

Is there a way to avoid an ObjectID from being converted into a primitive data type when transferring in and out of Redis? Would converting it to a JSON string be a possible solution? Thanks! ...

Creating custom generic functions such as IsAny and IsUnknown that are based on a table of type assignability to determine

I attempted to craft a generic called IsAny based on this resource. The IsAny generic appears to be functioning correctly. However, when I implement it within another generic (IsUnknown), it fails: const testIsUnknown2: IsUnknown<any> = true; // iss ...

"JS Kyle: Utilizing JWT for Signing and Encrypting Data

I am currently using jose for signing and encrypting JWTs, but I am facing an issue when trying to sign and then encrypt the entire JWT. When it comes to signing my JWT, I utilize the following function: const secretKey = process.env.JWT_SECRET; const key ...