Calling a Javascript method from a view

swengineer · September 19, 2010, 11:41am

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” %>

<%= notice %>

Name <%= @dicom.name %>

Image

<%= image_tag @dicom.photo.url , :id => 'dicom_image' %>

Please let me know what you think.

Thanks.

swengineer · September 19, 2010, 1:21pm

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.

swengineer · September 19, 2010, 1:30pm

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
%>”

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.

swengineer · September 19, 2010, 2:13pm

are you using any library?

swengineer · September 19, 2010, 2:15pm

radhames brito wrote:

are you using any library?

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

swengineer · September 19, 2010, 3:13pm

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?

swengineer · September 19, 2010, 3:11pm

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;

swengineer · September 19, 2010, 3:26pm

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();

swengineer · September 19, 2010, 3:30pm

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?

Thanks.

swengineer · September 19, 2010, 6:40pm

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,
–Â
Marnen Laibow-Koser
http://www.marnen.org
[email protected]

Sent from my iPhone

swengineer · September 19, 2010, 4:00pm

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;

swengineer · September 19, 2010, 7:02pm

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

Read before you accuse me

swengineer · September 19, 2010, 7:00pm

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

swengineer · September 19, 2010, 7:09pm

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

swengineer · September 19, 2010, 9:23pm

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
[email protected]

Sent from my iPhone

swengineer · September 19, 2010, 9:29pm

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
[email protected]

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
%>

swengineer · September 19, 2010, 11:20pm

@Marnen Laibow-Koser

from Abder-Rahman A.
"getWidth() is involved.

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

i rest my case your honor.

swengineer · September 20, 2010, 4:15pm

Abder-Rahman A. 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
[email protected]

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,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

swengineer · September 20, 2010, 5:36pm

@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. : /

swengineer · September 20, 2010, 4:25pm

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