Calling a Javascript method from a view

rubyonrails-talk
1

I have a "coordinate.js" javascript in public/javascripts and in app/views/dicoms, I have a "show.html.erb".

For example, if I want to call the getWidth function from the .js file in the view what should I do? I remember it working for me as I get a message box giving me the alert but don't know what went wrong.

For example, I have this functionin the .js file

function getWidth() {   var image = document.getElementById("dicom_image");   imageWidth = image.width;   return imageWidth;   alert("Image Width is " + image.width); }

And, here is my "show.html.erb" file:

<%= javascript_include_tag "coordinate" %> <canvas id="draw" > </canvas> <p id="notice"><%= notice %></p> <p> <b> Name </b> <%= @dicom.name %> </p> <p> <b> Image </b> </p> <div id="image_element" style="display: none;"> <p> <%= image_tag @dicom.photo.url , :id => 'dicom_image' %> </p> </div> <%= update_page_tag do |page| page << "getWidth();" end %> <%= update_page_tag do |page| page << "drawImg();" end %> <%= update_page_tag do |page| page << "drawLine();" end %> <%= link_to 'Edit', edit_dicom_path(@dicom) %> <%= link_to 'Back', dicoms_path %>

Please let me know what you think.

Thanks.

2

I figured the issue out. I wanted an alert to show up, and had this statement BEFORE the alert:

return imageWidth;

So, I had to remove it to see the alert, since it seems that the block will exit after the return statement.

3

When I try to call the getHeight() and getWidth() functions I get two message box telling:

RJS error: TypeError: image is null

And,

getWidth();

I get that when I do the following in "show.html.erb":

<%= javascript_include_tag "coordinate" %> <canvas id="draw" height = "<%= update_page_tag do |page| page << "getHeight();" end %>"

width = "<%= update_page_tag do |page| page << "getWidth();" end %>"

</canvas>

Provided that, in "coordinate.js", the methods are as follows:

function getWidth() {   var image = document.getElementById("dicom_image");   imageWidth = image.width;   return imageWidth; }

function getHeight(){   var image = document.getElementById("dicom_image");   imageHeight = image.height;   return imageHeight; }

What do you think?

Thanks.

4

are you using any library?

5

radhames brito wrote:

are you using any library?

I'm using Paperclip to upload an image in my model.

6

looks like you are not using any javascript library but are calling a prototype method or something

var img = document.getElementById(“dicom_image”);

var width = img.clientWidth;

var height = img.clientHeight;
7

radhames brito wrote:

looks like you are not using any javascript library but are calling a prototype method or something

var img = document.getElementById("dicom_image");

var width = img.clientWidth; var height = img.clientHeight;

So, what do you think should I do to solve the issue?

8

If you are learning and want to learn how to do everything nice and efficiently learn how to use a javascript library, if you are in a hurry and dont have time to learn keep doing it the way you have. The code i gave you is for when you are not using any library.

with jquery it would have been as easy as this

$(“#dicom_image”).width(); $(“#dicom_image”).height();

9

radhames brito wrote:

If you are learning and want to learn how to do everything nice and efficiently learn how to use a javascript library, if you are in a hurry and dont have time to learn keep doing it the way you have. The code i gave you is for when you are not using any library.

with jquery it would have been as easy as this

$("#dicom_image").width(); $("#dicom_image").height();

At least for the way I'm following right now. Why am I not getting the value of the width and height returned in my view?

In other words: How can I call the getHeight() and getWidth() Javascript functions in my view here?

<canvas id="draw" height="???" width="???" > </canvas>

Thanks.

10

because without library is

var width = document.getElementById(‘dicom_image’).clientWidth;

or

var image = document.getElementById(‘dicom_image’);

var width = image.clientWidth;

but you are calling

image.width;

11

radhames brito wrote:

looks like you are not using any javascript library but are calling a prototype method or something

var img = document.getElementById("dicom_image");

getElementById is core JavaScript, not a Prototype extension. If you're going to spread misinformation like this, please do us all a favor and stop posting.

var width = img.clientWidth; var height = img.clientHeight;

Best,

12

@Marnen. I really don't understand what you mean!

13

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

Read before you accuse me

14

he was talking to me, when you set you called getHeight() and getWidth() you used then same names prototype uses, but i didnt notice you had made your own methods with those name, so he thought that when i said

radhames brito wrote:

looks like you are not using any javascript library but are calling a

prototype method or something

i was refering to this

var img = document.getElementById(“dicom_image”);

but i was reffering to this

<%= update_page_tag do |page|

page << “getWidth();”

end

%>

i user this

var img = document.getElementById(“dicom_image”);

to point out that you are not using any libraries but you seem to be calling getHeight() and getWidth() that are prototype methods

15

radhames brito wrote:

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

...which were not involved in the post you responded to as far as I can see.

Read before you accuse me

I did.

Best,

16

Marnen Laibow-Koser wrote:

radhames brito wrote:

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

...which were not involved in the post you responded to as far as I can see.

Read before you accuse me

I did.

Best, -- Marnen Laibow-Koser http://www.marnen.org marnen@marnen.org

Sent from my iPhone

getWidth() is involved.

If you check my question, you will see the following:

function getWidth() {   var image = document.getElementById("dicom_image");   imageWidth = image.width;   return imageWidth;   alert("Image Width is " + image.width); }

Which I then tried to call in "show.html.erb" using:

<%= update_page_tag do |page| page << "getWidth();" end %>

17

@Marnen Laibow-Koser

from Abder-Rahman Ali

"getWidth() is involved.

If you check my question, you will see the following:"

i rest my case your honor.

18

Abder-Rahman Ali wrote:

Marnen Laibow-Koser wrote:

radhames brito wrote:

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

...which were not involved in the post you responded to as far as I can see.

Read before you accuse me

I did.

Best, -- Marnen Laibow-Koser http://www.marnen.org marnen@marnen.org

Sent from my iPhone

getWidth() is involved.

If you check my question, you will see the following:

function getWidth() {   var image = document.getElementById("dicom_image");   imageWidth = image.width;   return imageWidth;   alert("Image Width is " + image.width); }

Which I then tried to call in "show.html.erb" using:

<%= update_page_tag do |page| page << "getWidth();" end %>

OK, then I failed to read properly (helped along by Radhames' lack of proper quoting) and I'm sorry about that. Apparently I completely misunderstood what Radhames was getting at. I'll try to read more carefully in future. Radhames, please try to quote more relevant material.

Best,

19

No need to be sorry @Marnen, that's fine.

20

@marnen i comment via gmail, so i forget about the quoting, also , note that im not a native english speaker and some times my ideas dont come across the way i wanted them to. : /