By changing the name of my file to .js.erb, I am able to seamlessly incorporate erb syntax within my javascript code, but this

Question

By changing the name of my file to .js.erb, I am able to seamlessly incorporate erb syntax within my javascript code, but this

Currently, I am using chessboard-0.3.0.js in a rails application. Due to the rails asset pipeline setup, I've had to make adjustments to the js code specifically related to rendering images, such as Pieces. In line 445 of chessboard.js, it states:

cfg.pieceTheme =  'img/chesspieces/wikipedia/{piece}.png'

This posed an issue for rails, so I renamed chessboard with the .erb extension and modified that line to:

cfg.pieceTheme =  <%= asset_path('chesspieces/wikipedia/{piece}.png') %>

After placing all the required images in the assets/images folder.

The problem lies in the fact that the images are still not being rendered. My assumption is that the placement of {piece}.png in that line might be causing the issue since it's essentially js inside a rails helper, correct? This could be why my images aren't showing up. Going through the entire 'almost 2000' lines of code to individually access each image seems daunting, especially as a beginner, as it's easy to inadvertently cause more errors along the way.

Is there a solution to this predicament without having to extensively rewrite the code?

javascript ruby-on-rails ruby chessboard.js

Answer 1

Answer №1

If you're looking for an alternative solution, it may involve some javascript code rewriting.

The issue with the current code not working is due to the fact that the erb file is compiled before rendering, while the javascript is executed after rendering. This causes the asset_path to be incorrect and static instead of dynamic.

One approach could be to create an object containing all available routes and then use it to dynamically insert path names.

For example, if your loop looks something like this:

var piecesList = [
  "first",
  "second"
]
$.each(var piece in piecesList) function(piece) {
  var image_path = "img/path/{piece}.png"
}

You can manually assign the pieces to paths in an object like this:

var piecesRoutes = {
     "first" : "<%= image_path('chesspieces/first.png') %>",
     "second" : "<%= image_path('chesspieces/second.png') %>",
   }

Then, within the loop, retrieve the path like so:

var image_path = piecesRoutes[piece]

Answer 2

If you're looking for an alternative solution, it may involve some javascript code rewriting.

The issue with the current code not working is due to the fact that the erb file is compiled before rendering, while the javascript is executed after rendering. This causes the asset_path to be incorrect and static instead of dynamic.

One approach could be to create an object containing all available routes and then use it to dynamically insert path names.

For example, if your loop looks something like this:

var piecesList = [
  "first",
  "second"
]
$.each(var piece in piecesList) function(piece) {
  var image_path = "img/path/{piece}.png"
}

You can manually assign the pieces to paths in an object like this:

var piecesRoutes = {
     "first" : "<%= image_path('chesspieces/first.png') %>",
     "second" : "<%= image_path('chesspieces/second.png') %>",
   }

Then, within the loop, retrieve the path like so:

var image_path = piecesRoutes[piece]

Answer 3

Answer №2

If you want to avoid hashing your chess pieces, consider including them directly in the /public directory. Since they likely won't change if they are from an external library, caching shouldn't be a concern.

Answer 4

If you want to avoid hashing your chess pieces, consider including them directly in the /public directory. Since they likely won't change if they are from an external library, caching shouldn't be a concern.

By changing the name of my file to .js.erb, I am able to seamlessly incorporate erb syntax within my javascript code, but this

Answer №1

Answer №2

Similar questions

Unusual hue in the backdrop of a daisyui modal

Tracking your daily nutrition using cronometer with the powerful combination of JavaScript

Tips for selecting an <select> option value based on an URL parameter automatically

how to protect your javascript and php code

The function this.$set is failing to update an array in VueJS

Type inference in TypeScript with transitivity

There seems to be an issue with the import class for React PropTypes. The prop

Deregister channel listener

Examine the spans and delete the first-child node

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

Adding substantial sections of HTML without any adjustments

Executing a javascript function numerous times

React JS Calendar

Getting URL Parameters in Angular JS

Determine the size of a BSON object before saving it to a MongoDB database using

"Assure that setTimeout will be executed within the then method in

Encountered an issue while setting up ng-circle-progress in Angular: Unable to find an exported member in

How can a non-commonJS library be effectively integrated into the Webpack environment?

What is causing the error that app.js file cannot be located?

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary