Using Ruby on Rails erb syntax within JavaScript

Working on a Rails app view, I am attempting to use JavaScript to determine the screen size and display different content based on that information.

This is what I currently have:

<script>
if( $(window).width() < 1000){
'<%= @resize = true %>';
} else {
'<%= @resize = false %>';
}
</script> 

Even when the browser window size is less than 1000, I consistently receive 'false' for the @resize variable. How can I resolve this issue?

Answer №1

If you're looking to shake things up:

  • Create JavaScript code that will set a cookie with the desired value based on certain conditions.
  • Retrieve the value of the cookie in Rails.

One thing to keep in mind is that this method may pose an issue during the initial page load since Rails won't have immediate access to the cookie data until the next request. Unfortunately, there's no way around this limitation.

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 find the index of an element with the special class "active"?

I'm having trouble retrieving the index of the active div with the class name active among a collection of divs with the class name slide. Despite trying various selectors, I haven't been successful in getting the desired result. Your assistance ...

jQuery: Revealing or concealing several divs upon selection alteration

When I populate a form, I want to display or hide multiple divs based on the OPTION selected in a DROPDOWN. Currently, my code works but the issue is that one div can be hidden or shown by multiple OPTIONS. As a result, these divs keep toggling between hi ...

Aurelia encountering an error when attempting to load Bootstrap v4 during runtime

In my aurelia.json file, I have the following configuration for bundling vendor scripts. It was directly copied from a working reference implementation and has been functioning properly. { 'build': { 'bundles': [ 'name ...

Pass the json data to the jade template engine

I have a problem with sending a large JSON file from the server to Jade. The double quotes " are being replaced with &quot;, making the JSON unreadable and causing an error message: Uncaught SyntaxError: Unexpected token & This is how I send the ...

Do not display the button upon clicking

After trying to render some tags from a source and place them into buttons in random order, I am facing an issue where my component re-renders unnecessarily after clicking the button. What could be causing this problem?... const Blog = () => { const [ ...

JavaScript's Scoped Exports concept

After exporting something in JavaScript, let's consider a scenario where we have a file named 'foo.js' with the line: export default foo; This allows us to import it globally from any other file. But what if there is a need to restrict thi ...

Exploring History Navigation with AngularJS: Leveraging $routeParams and $location

I have been diligently working on developing a question bank and have successfully coded most of the elements. However, I would like to enhance the user experience by implementing browser history for easy navigation through the questions. If you want to c ...

Guide: "Executing an AJAX button click using a Greasemonkey script"

(find below a solution) I created a Greasemonkey script that automatically clicks on a specific link within a target website. Initially, my script looked like this: var MyVar = $("a:contains('Save')"); if (MyVar && MyVar.length) win ...

When using Express, the XML response is returning an empty document

I'm experimenting with a simple API that returns XML response: const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const libxmljs = require("libxmljs"); const PO ...

Iterate over the stepper headers and insert separators between each item, but exclude the final item

Utilizing the stepper component, I have implemented a dynamic approach by looping through an array of objects instead of hardcoding the headers and content. The stepper items are functioning perfectly with: <v-stepper-items> <v-stepper-content ...

Issue Arising During File Transfer in Nativescript

I am currently attempting to upload an image that I captured with Nativescript to a server using a web API that I created in C# (ASP.NET). The API works perfectly fine when tested on Postman, but I encounter an error "Error During Upload" while trying to u ...

Having issues with jQuery Checkbox Selector and .attr('checked) function not functioning correctly?

I'm trying to assign the value of a variable as true or false based on the selected checkbox. However, the code I have is not working as expected. <input type="checkbox" id="chkBox1"> var chkBox1Val = $('#chkBox1').prop('checked ...

To achieve the desired format, where should I press or manipulate the information?

I need help with manipulating arrays to generate a specific JSON file structure. I've made some progress but got stuck at this point: var T_nn_IN = document.getElementById('datatablenewname'); var tabledata_newname_initialname = []; ...

Doing a simple HTTP GET request with RxJS does not do anything

I'm encountering an issue with my code: export class Test { constructor(private http: Http) {} logResponse(): Observable<any> { return this.http.get('http://google.com') .do(data => console.log("All: " + JSON.stringify(dat ...

Struggling to retrieve a particular field from Mongodb with the .find() method (Beginner)

I am a novice. Here is my code. Essentially, I am storing my JWT in MongoDB and it is being stored properly. However, when I try to fetch that token to verify it, I am unable to retrieve it. The console.log(find_refreshtoken) is displaying unexpected data ...

Can a single vote in AngularJs be limited to just one up or down option?

During a lesson on AngularJS from Code Academy, the following code was presented. The lesson included a rating system where users could choose to 'like' or 'dislike' an item. Clicking the 'like' button would increase the vote ...

The array used within the useEffect hook and the getCoordinates function appears to be distinct when printed with console

Utilizing GoogleMap API for Custom Location Display I have an imported array of JSON objects named data which includes an address property. The Google Maps API is used to retrieve coordinates from the addresses in order to generate custom markers displaye ...

What is the best way to instantiate a dynamic object within a literal?

I am dealing with an object that contains multiple fields, mainly consisting of constant string values. However, I also need to incorporate a variable that is determined by the current state. const {order} = this.state; myObject={{ fieldA: 2, fiel ...

What steps can I take to avoid receiving an error stating that parameter 1 is not of type 'Node'?

I encountered the following error message: Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'. I am unsure why this error is occurring. It works fine on localhost ...

Utilizing a .ini file to assign variables to styles elements in Material-UI: A comprehensive guide

I need to dynamically set the background color of my app using a variable retrieved from a .ini file. I'm struggling with how to achieve this task. I am able to fetch the color in the login page from the .ini file, but I'm unsure of how to apply ...