When running JavaScript from a .js.erb file, it gets executed while still being visible as plain text

I'm facing an issue with a form inside a popup window. Here's how it looks:

<%= form_tag "/controller/action", :method => :get, :remote => true do %>
...
<% end %>

Within my controller:

respond_to do |format|
  format.js
end

Upon submission, I attempt to modify elements of the parent window using action.js.erb:

window.opener.$('#some-div').html('<div class="flash notice">...</div>');

Alternatively, without jQuery:

window.opener.document.getElementById('some-div').innerHTML = '<div class="flash notice">...</div>';

In both scenarios, I successfully display the flash message in my desired div, but also the entire content of action.js.erb as text.

What could be causing this issue?

Answer №1

My assumption is that Rails is automatically encoding your text for security purposes.

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

What is the best way to conceal elements that do not have any subsequent elements with a specific class?

Here is the HTML code I have, and I am looking to use jQuery to hide all lsHeader elements that do not have any subsequent elements with the class 'contact'. <div id="B" class="lsHeader">B</div> <div id="contact_1" class="contac ...

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

Encasing common functions within (function($){ }(jQuery) can help to modularize and prevent

As I was creating a global JavaScript function and made some errors along the way, I finally got it to work after doing some research. However, while searching, I came across an example using (function($){ code here }(jQuery); My question is, what exact ...

Ajax is functional, however the server is not responding

After many attempts to resolve the issue with my website, I am turning to this community in hopes of finding a solution. The problem lies in the fact that while the ajax success function appears to be working and shows a status code of 200 in the network ...

Can we pass a search term parameter to getServerSideProps in Next.js?

I've been working on a project to organize all my notes and summaries in one place. The notes are stored as markdown files, converted to HTML dynamically in the backend (it's functioning well). Now, I want to add a search feature on the notes p ...

A backend glitch is exposed by NextJS in the web application

Currently, I am utilizing Strapi for my backend and have created a small script to handle authorization for specific parts of the API. Additionally, I made a slight modification to the controller. 'use strict'; const { sanitizeEntity } = require( ...

Tips for telling the difference between typescript Index signatures and JavaScript computed property names

ngOnChanges(changes: {[paramName: string]: SimpleChange}): void { console.log('Any modifications involved', changes); } I'm scratching my head over the purpose of 'changes: {[propName: string]: SimpleChange}'. Can someone cl ...

Is the on.click event fired before the ajax request is made?

Having two events, the second one initiates an Ajax call. When a click creates an input in the <td>, it gets replaced by the success event afterwards - ensuring that the input is correct upon blur. $(document).on("click","#"+table_id+" td",function( ...

Checking Sudoku Solutions on Codewars

I have come across this JavaScript code which seems to be functioning correctly. However, I am curious about the line board[3][8] != board[8][3] and how it checks for repeating row and column numbers. Can someone please provide an explanation? Thank you! ...

Sending a JSON array from an Ajax request to a Spring controller: A step-by-step guide

My HTML table data is converted to JSON format and sent via AJAX to a Spring controller. In the controller, I used @RequestParam Map<String, String> to retrieve the values, but the entire JSON string was received as the only key. I cannot use a model ...

Dealing with the percentage sign in table names during data retrieval

When using React and Express to retrieve and store data in JSON format, what is the correct way to reference tables that have a percentage sign in their name? componentDidMount() { // Retrieve data from http://localhost:5000/citystats, sort by ID, t ...

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Forgive me for any errors in my query, as I am not very experienced in asking questions. I have encountered the following two scenarios :- const comment = comments.find(function (comment) { if (comment.id === 823423) { return t ...

Crockford's method of replacing values with nested objects

/** Custom Supplant Method **/ String.prototype.customSupplant = function(obj) { return this.replace (/{([^{}]*)}/g, function (match, propPath) { var props = propPath.split('.'); var result = obj; f ...

Issues with sending data through ajax using the post method persist on shared web hosting

I'm facing an issue with Ajax post data. It works fine on localhost but not on shared hosting. Here is my code: <script type="text/javascript> $(document).ready(function(){ $("#login").click(function(){ alert(& ...

Retrieving blog posts formatted in markdown from a centralized JSON file

My current setup involves using react-markdown to load markdown content from a JSON file. I have opted for a static site hosted on CloudFront to save money and eliminate server operation costs. All posts are compiled into a posts.json file which is then ...

Ways to convert a callback-based function into a promise without losing the returned value

After being given access to this API: function doSomeWork(callbacks : { success ?: (result : SuccessCallbackResult) => void, fail ?: (result : FailCallbackResult) => void, complete ?: (result : CompleteCallbackResult) => void }) : Task ...

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

Fetching images using node.js via URL

I must apologize for my lack of knowledge about node.js. I am trying to read an image from a URL and resize it using sharp. Currently, my code only works for reading local images. For instance, I would like to read the following image from a URL: url= ...

MongoDB can track an index in a collection using a case-insensitive regex pattern

Utilizing different indexed collections in MongoDB for queries from a straightforward search engine has been my practice. I am facing a challenge with Regex queries that need to be case insensitive, as the queried collection is not adhering to the index. ...