Encountering a problem with the routing/asset pipeline that is causing an undefined

After taking a break from Rails for a while, I recently decided to dive back in. However, I seem to be missing something simple here. It could be due to my limited understanding of how javascript functions within Rails.

I believe my haml view is properly set up, and I have included the necessary javascript file in the layout (along with the correct CSS). Despite this, I am unable to get the javascript function (a slideshow I found online) to work with the view. I'm attempting to trigger it using

%body{ :onload => setUpslideShow() }

Below is my view:

%body{ :onload => setUpSlideShow() }

%script{type: 'text/javascript'}
  if ( ! window.CMFmainmenu ) { CMFmainmenu = {}; }
  var s                   = CMFmainmenu;
  s.user_id               = "#{@user.id.to_s}";
  s.partial_mainmenu_path = "/users/" + s.user_id + "/xx/mainmenu";
  s.add_new_senior        = "#{UsersController::ADD_NEW_SENIOR}"
  s.add_new_senior_path   = "#{new_seniors_settings_path(@locale,@user,@senior)}"

#mainmenu

... (edited out to save space) ...

 #slideshow.greenBorder
        #slides
          = image_tag '/assets/newlook/div_1_img.png', class: 'slide'
          %p
            Everyone loves photo albums.
            Get your user ready to brag, and
            populate and arrange albums by
            event, special people, year or any
            category you can imagine.
            =link_to "Learn how.", ''
          = image_tag '/assets/newlook/div_2_img.png', class: 'slide'
          %p
            If typing is difficult for your
            loved one, remove the frustration
            of a typed response. They can
            respond with a voice message, or
            with auto replies that you set up.
            =link_to "Learn how.", ''
          = image_tag '/assets/newlook/div_3_img.png', class: 'slide'
          %p
            Arms too short? You can specify
            the minimum font size used for
            your user's email.
            =link_to "Learn how.", ''
        #slides-controls
          1
          2
          3

Here's my javascript:

if (! window.CMFuser) { CMFuser = {}; }

$(function() {

    var s = CMFuser;

... (edited out to save space) ...

       // slideshow

       slidePrefix            = "slide-";
       slideControlPrefix     = "slide-control-";
       slideHighlightClass    = "highlight";
       slidesContainerID      = "slides";
       slidesControlsID       = "slides-controls";

       setUpSlideShow =  function()
       {
... lots of code that doesn't get called so I'm leaving it out to save space ...

And here's what I think the relevant line is in the layout:

= javascript_include_tag "lib/modernizr-2.0.6.min", "lib/respond.min","application", "users"
where "users" is the javascript file. When I comment out the
%body{ :onload => setUpslideShow() }
, the javascript file appears in the html source.

The full text of the error:

NoMethodError in Users#mainmenu

Showing /opt/cmf/app/views/users/mainmenu.html.haml where line #4 raised:

undefined method `setUpSlideShow' for #<#<Class:0x007fe054fa0a28>:0x007fe05594ae20>
Extracted source (around line #4):

2: - # users/mainmenu
3: 
4: %body{ :onload => setUpSlideShow() }

Thanks

Answer №1

Is it necessary for the :onload value to be a string?

%body{ :onload => 'setUpSlideShow()' }

The goal is to generate this HTML code, correct?

<body onload="setUpSideShow()">

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

Trapped in the JavaScript Checkbox Filter Maze

After successfully creating a javascript-only filter, I have hit a roadblock and could really use some assistance. The filter is divided into "days" and "events". When a user clicks on a day or multiple days, the events for those selected days are displa ...

Setting limits on values in jQuery

Hello everyone, I'm trying to establish a limit for each progress bar within Bootstrap 4 that triggers upon clicking. The issue lies in the fact that every time I click, the value always jumps to 100. Is there a way to set a maximum value for each p ...

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

I'm looking to replace the second last occurrence of a character in a given string. The length of the strings may vary but the delimiter is always the same. Here are some examples along with my attempted solutions: Input 1: james.sam.uri.stackoverflo ...

The responses for several HTTP POST requests are not being received as expected

I am facing a challenge in retrieving a large number of HTTP POST requests' responses from the Database. When I try to fetch hundreds or even thousands of responses, I encounter issues with missing responses. However, when I test this process with onl ...

When I prevent 3rd party cookies, the Google Signin onsuccess function remains inactive

I've been working on an AngularJS application that utilizes the basic Google Signin process outlined here: https://developers.google.com/identity/sign-in/web/. Everything is functioning properly, and I'm able to sign in as a Google user. However ...

HTML Button to Populate Text in Textarea Box

I'm trying to figure out how to display HTML inside a textarea box for a link. I've managed to get it working perfectly, but I want it to show <a href="https://youtube.com">Link</a> instead of "Code for Link in HTML." Is th ...

Eliminating an SVG component from the webpage with the help of jQuery

Utilizing jQuery to insert an element into an embedded SVG can be achieved with the following code: var rect = SVG('rect'); $(rect).attr( { x: left, y: top, width: right - lef ...

Passing values dynamically to a JavaScript function within a Chrome extension using Python at runtime

I have encountered a unique challenge in my automation work, which I detailed in this query It's important to note that I am utilizing Python with Selenium WebDriver As I navigate through a series of changes and obstacles, I find myself exploring th ...

JavaScript code for converting a list into an array separated by commas

I have a function that is outputting a list like this: email1 email2 email3 … My goal is to convert this list into an array with the following format: email1, email2, email3, … Does anyone have any suggestions on how I can achieve this conversion? ...

Disabling dynamically generated buttons in ASP.NET using jQuery

I am facing an issue with creating a dynamic button in my view based on a state. Index.cshtml: <html> <head> <script src="~/scripts/jquery-3.3.1.js"></script> <script src="~/scripts/jquery-3.3.1.min.js"></script&g ...

Retrieve the concealed method's name within the immediately invoked function expression (IIFE

This Meteor sever code has a private method called printFuncName within an IIFE. However, when this method is invoked from a public method, it results in the following error: TypeError: Cannot read property 'name' of null I am curious to unde ...

What is the best way to activate Cropper once a file has been selected, without encountering a 404 error on the image?

I've been trying to integrate an image cropper into my website, but I'm encountering some issues that I can't seem to resolve. Expected outcome : Upon selecting a picture from the disk using the file input, a modal should appear prompting t ...

What is the process for attaching a JavaScript function to execute upon resizing of a browser window?

Is it possible to register a JavaScript function that will execute when the browser window is resized? I have a feeling it may be found within the Page.ClientScript class methods, but I find myself a little lost. ...

Problems with Wordpress AJAX search functionality

I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...

Adjust parameters using JavaScript and three.js in real-time

I am not well-versed in JavaScript and I am facing an issue. I need to dynamically change the parameter passed to a function written in JavaScript, but the code is structured in a way that is unfamiliar to me. Therefore, I am seeking assistance. On my web ...

What is the best way to send data to PHP while moving objects between different div elements?

I have a situation where I have two parent divs containing dynamic children divs, and I want to enable POST requests to PHP when items are dragged from one side to the other (and vice versa). Here is the Javascript code I am using: function allowDrop( ...

Discover the secrets to obtaining live website information using Google Script!

I am looking to retrieve the exchange rate data from a specific website. My understanding is that the website is dynamic (I'm still new to javascript) and the data is not easily accessible. Can anyone guide me on how to extract the exchange rates? For ...

The hook call you made in next.js/react is invalid and cannot be

I recently followed a tutorial on creating a hamburger menu in react/next.js. You can check out the tutorial here. import { useState } from "react"; import user from '../styles/userview.module.css' export function PageHeader() { con ...

Can someone please tell me how to convert this JavaScript regular expression into PHP code?

I created a JavaScript regular expression (regexp) and now I need it converted to PHP code: var alphaExp = /^[a-zA-ZåäöÅÄÖ\s\-]+$/; if (!fld.value.match(alphaExp)) { //ERROR OUTPUT HERE } Can someone provide me with the equivalent PHP c ...

instructions on how to exclusively close a bracket within a double bracket in a regular expression match

const input = "example(1)(2)example(3)example(4)(5)example(6)(7)example(8)example(9)" const regexp = new RegExp(????) // <-- need help with this input.match(regexp) result: [example(1)(2), example(3), example(4)(5), example(6)(7), example(8), example( ...