Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

50%

+1 −1

Q&A How to call a function from ruby-on-rails (HTML)?

Hope I understood what do you mean. I guess for example you have app.js (which contains your JavaScript function) and app.html.erb (which you want to call JavaScript function from). OK. In your ap...

posted 3y ago by Kevin M. Mansour‭ · edited 3y ago by Kevin M. Mansour‭

Answer

#3: Post edited by

Kevin M. Mansour‭ · 2021-07-08T18:11:11Z (over 3 years ago)
Cleaning Up.

Copy Link

Raw

Markdown

Hope I understood what do you mean. I guess for example you have `app.js` (which contains your JavaScript function) and `app.html.erb` (which you want to call JavaScript function from).
~~OK. In your `app.html.erb` contain:~~
```ruby
<%= javascript_include_tag('app.js') %>
<%= button_tag "Test", id: "TestBTN" %>
```
As you seen above, first I linked our Ruby HTML file to our nice JavaScript file then I have made a simple button and I added an ID to it (which is `TestBTN`) to check `onclick` from our JavaScript funtion.
Then in your `app.js`:
```javascript
document.getElementById("TestBTN").addEventListener("click", function() {
console.log("Done!");
});
```
As seen above, I have made an `EventListener` for our button and `onclick` it will print "Done!" in the console.
Hope this helps!
More about [`javascript_include_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag).
More about [`button_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag).

Hope I understood what do you mean. I guess for example you have `app.js` (which contains your JavaScript function) and `app.html.erb` (which you want to call JavaScript function from).
OK. In your `app.html.erb`:
```ruby
<%= javascript_include_tag('app.js') %>
<%= button_tag "Test", id: "TestBTN" %>
```
As you seen above, first I linked our Ruby HTML file to our nice JavaScript file then I have made a simple button and I added an ID to it (which is `TestBTN`) to check `onclick` from our JavaScript funtion.
Then in your `app.js`:
```javascript
document.getElementById("TestBTN").addEventListener("click", function() {
console.log("Done!");
});
```
As seen above, I have made an `EventListener` for our button and `onclick` it will print "Done!" in the console.
Hope this helps!
More about [`javascript_include_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag).
More about [`button_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag).

#2: Post edited by

Kevin M. Mansour‭ · 2021-07-08T18:07:57Z (over 3 years ago)
Cleaning Up.

Copy Link

Raw

Markdown

~~Hope I understood what do you mean. I guess for example you have `app.js` (which contains your JavaScript function) and `app.html.erb` (which you want to call function from).~~
Then your `app.html.erb` contain:
```ruby
<%= javascript_include_tag('app.js') %>
<%= button_tag "Test", id: "TestBTN" %>
```
As you seen above, first I linked our Ruby HTML file to our nice JavaScript file then I have made a simple button and I added an ID (which is `TestBTN`) to check `onclick` it from our JavaScript funtion.
~~Then your `app.js` contain:~~
```javascript
document.getElementById("TestBTN").addEventListener("click", function() {
console.log("Done!");
});
```
~~As seen above, I have mande an `EventListener` for our button and `onclick` it will print "Done!" in the console.~~
More about [`javascript_include_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag).
More about [`button_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag).

Hope I understood what do you mean. I guess for example you have `app.js` (which contains your JavaScript function) and `app.html.erb` (which you want to call JavaScript function from).
OK. In your `app.html.erb` contain:
```ruby
<%= javascript_include_tag('app.js') %>
<%= button_tag "Test", id: "TestBTN" %>
```
As you seen above, first I linked our Ruby HTML file to our nice JavaScript file then I have made a simple button and I added an ID to it (which is `TestBTN`) to check `onclick` from our JavaScript funtion.
Then in your `app.js`:
```javascript
document.getElementById("TestBTN").addEventListener("click", function() {
console.log("Done!");
});
```
As seen above, I have made an `EventListener` for our button and `onclick` it will print "Done!" in the console.
Hope this helps!
More about [`javascript_include_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag).
More about [`button_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag).

#1: Initial revision by

Kevin M. Mansour‭ · 2021-07-08T18:05:13Z (over 3 years ago)

Copy Link

Raw

Markdown

Hope I understood what do you mean. I guess for example you have `app.js` (which contains your JavaScript function) and `app.html.erb` (which you want to call function from). 

Then your `app.html.erb` contain:

```ruby
<%= javascript_include_tag('app.js') %>
<%= button_tag "Test", id: "TestBTN" %>
```

As you seen above, first I linked our Ruby HTML file to our nice JavaScript file then I have made a simple button and I added an ID (which is `TestBTN`) to check `onclick` it from our JavaScript funtion.

Then your `app.js` contain:

```javascript
document.getElementById("TestBTN").addEventListener("click", function() {
  console.log("Done!");
}); 
```
As seen above, I have mande an `EventListener` for our button and `onclick` it will print "Done!" in the console.

More about [`javascript_include_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag).

More about [`button_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag).

Communities

Post History