The prefixes for Ruby on Rails routes are not properly preprocessed in the .erb.js file

I'm currently working with Rails 4 and encountering an issue with the following file:

// apps/assets/javascripts/products.js.erb

var getColoursAndMaterialsData = function(onSuccess)
{
    var fd = formdata();

    $.post( '<%= data_products_path(:format => :json) %>', fd )
    .done(function(data)
    {
        onSuccess(data);
    });
};

When I include products.js.erb in a .html.erb file, I am faced with the error:

undefined method `data_products_path'

It seems like the routes prefix 'data_products_path' is not being pre-processed. I had assumed that by giving products.js the .erb extension, it would have prompted the pre-processor to handle it.

Interestingly, the exact same code works fine when placed within

<script type="text/javascript"></script>
tags in the .html.erb file. The relevant section of my routes.rb file has this structure:

resources :products do
    collection do     
        post 'data'
    end
end

Is there another step or configuration required for this to work correctly?

Answer №1

Adding the .erb extension may not be enough for it to work. Have you considered using a simple jQuery AJAX post request instead?

Include dataType: "json" in your code to ensure that you receive a JSON response, and specify the URL directly instead of using URL helpers.

More information on jQuery post method here

If you need further clarification, this link provides an answer to a similar question:

Using a Rails helper method within a javascript asset

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

A beginner's guide to crafting a knex query with MySQL language

Within MySQL Workbench, I currently have the following code: USE my_db; SELECT transactions.created_at, price FROM transactions JOIN transactions_items ON transactions.id = transactions_items.transaction_id JOIN store_items ...

Why does the parent URL become the origin for an AJAX request coming from an iframe?

I am facing an issue with a website where I need to load an iframe from a different subdomain. The main website is hosted on portal.domain.com, and the iframe is on iframe.domain.com. To make requests to iframe.domain.com from portal.domain.com, I decided ...

Ways to automatically update property value in MongoDB once a particular date is reached

Is it feasible to schedule a future date for a document in MongoDB, such as 30 days from the current date, and then automatically update another property of the document when that future date arrives? For instance: creating an event document setting the ...

The functionality of the MVC jQuery grid is currently malfunctioning

Recently, I attempted to integrate a jQuery grid plugin from gijgo.com into my MVC application. Following the instructions provided on c-sharpcorner and/or codeproject meticulously, however, upon running the application, I encountered a troubling JavaScrip ...

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

"Automating the process of toggling the edit mode of a contenteditable element – how is

Is there a specific event I can use to programmatically start or stop editing a contenteditable element, similar to when the user focuses or blurs it? I have tried using .focus(), .click(), and even setting the selection to its content, but none of them se ...

What is the best way to retrieve the name of a Meteor package from within the

As I work on developing a package, I am looking for ways to dynamically utilize the package's name within the code. This is particularly important for logging purposes in my /log.js file. My main query is regarding how I can access the variable that ...

Optimal Placement for FB.Event.subscribe

Here is the code I have implemented on my website for the Facebook Like and Share buttons. The functionality works seamlessly. When I click the Like button, a notification is promptly displayed on my Facebook profile page. Additionally, Facebook automatic ...

Tap to navigate to queued sections on click

Greetings, community members! Despite my extensive research, I have been unable to find a solution to my query. Just a heads up - I am a novice when it comes to javascript and jQuery. My question pertains to incorporating two image buttons that, upon cli ...

What is the process for accessing a particular field in the data returned by the collection.find method in Expressjs and mongodb

I've been attempting to access a specific field returned from the mongodb collection.find method without success. The console.log is not displaying anything. router.get('/buildings', function(req, res, next) { var db = req.db; var collectio ...

Displaying a blank column in a table using JavaScript

I am trying to write a JavaScript function that will add a new column to a table. I want this new column to be displayed at the index where it is added, and then hidden once the addition is complete. Here is the code for my method: function addColumnToTa ...

Enhance React component props for a styled component element using TypeScript

Looking to enhance the properties of a React component in TypeScript to include standard HTML button attributes along with specific React features such as ref. My research suggests that React.HTMLProps is the ideal type for this purpose (since React.HTMLA ...

Is there a correct way to accomplish this task? How could I go about achieving it?

Currently, I am delving into the world of react. While following along with some video tutorials, I encountered a roadblock in the request.js file. The issue popped up during the build process ./src/Row.js Line 16:45: 'fetchUrl' is not define ...

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

angular2 : problem encountered with communication to rest api

Transitioning from PHP to Angular2 has been quite challenging for me, especially when trying to use a real rest API like "Tour of Heroes". I initially thought it would be simple... Currently, I have set up a functional API with Express: curl -XGET http:/ ...

What is the most effective way to transfer information from one page to another in a PhoneGap application?

I attempted to transfer data from one HTML page to another using two different methods: function reply_click(clicked_id) { window.location = "newsList.html?Title="+clicked_id; } And I also tried: function reply_click(clicked_id) { window.l ...

JavaScript Error - Value Not Assigned

I'm having trouble formatting a graph in my code. I keep encountering an undefined error when using console.log to output the data. Here's the snippet of my code: $(document).ready(function () { var graphData = new Array(); $.getJSON("ds ...

The Mongoose connection keeps failing to reconnect and maintain a stable heartbeat

I am facing an issue with the automatic reconnection feature in mongoose on my project. Despite configuring it to reconnect after a certain interval, it does not work as expected. Even if the credentials are correct, mongoose should attempt to log in perio ...

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...