Calling a Javascript method from a view

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.

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.

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.

are you using any library?

radhames brito wrote:

are you using any library?

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

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;

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?

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

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.

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;

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. I really don't understand what you mean!

@Marnen Laibow-Koser

getHeight() and getWidth() are prototype methods.

Read before you accuse me

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

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

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

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,

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

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