0

I'm new to Ruby so I had a question in regards to using some variables throughout my codebase. I have a variable declared in my Ruby file as follows:

@pages = 350

Now, I know that in HAML, I can simply do: -if @pages = 350, and in HAML with inline javascript, I can do something like:

:javascript
   console.log("#{@pages}");

However, I am linking an external JavaScript file in my HAML document, and I was wondering if it would be possible to use my Ruby variables in my external JS document? I need some variables in order to build what I am trying to build. Thanks!

Update as per one of the answers:

In my HAML file, I have the following:

:javascript
   printPages(3);

In my external JS file, I have:

$(function() { 
   window.printPages = function(pages) { 
        console.log(pages);
    }
});
Improve this question

1 Answer 1

Reset to default
1

I you are loading static javascript files I really would not recommend trying to insert variables into that code.

Instead, think about how you would provide that to your javascript code.

You could send it to that code as an argument.

<script type="text/javascript" src="./my-external-script.js"></script>

:javascript
  runMyExternalFunction(#{@pages})

Or you could add the variable as a data attribute on your page, and your javascript could look for that when it loads.

Haml:

%body data-pages=@pages

JS:

console.log(document.body.dataset.pages) // value of @pages

Update about your javascript:

Using jquery's on page ready event $() for declaring the function is a bad idea. That means that it waits for everything on the page to be compeletely loaded, and then declares the function your page needs.

What you should be doing is setting up all the function that will be needed right away, and then calling those functions when the page is loaded.

They way you have it, the page loads, printPages() is executed (which doesn't exist yet), and then after all that printPages is created and put into the global scope.

So remove the $() from your external script and add it to your HAML instead.

In fact, if your aren't doing anything super fancy with transpiling or bundling, then you can simply declare the function in your external JS file, and it will be available globally. This doesn't work with your code because they way you've declared the function, it would only be available to code within that $() callback.

// js file
function printPages(pages) { 
    console.log(pages);
}

HAML:

$(() => {
  printPages({@pages})
})
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks! I like the first suggestion about calling an external function. Though when I have a function called for example 'printPages(pages)' in my JS file, when I try the inline javascript call 'printPages(#{@pages})' I get the error printPages is not defined. I know the file is linked because I can console.log() outside of the function in the external JS file and it shows up when the HAML page loads.
That depends on how printPages is declared. For this to work, you'd need it available globally. That means assigning it to the window object. window.printPages = function(pages) { ... } But this also depends on how your javascript is being bundled/compiled/transpiled.
Unfortunately I still am getting the error that printPages is not defined. I'm updating my code with my JS code and the way I am calling the function in HAML. It's now in my original question if you could take a look
Ahhh I see thanks so much! This worked, and your explanation about $() was useful in determining what code should be placed in those brackets and what shouldn't!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.