how to use any javascript code in rails app?

Question

I am using rails4 and i want to include zooming feature in my app. I am follwing first example of this- http://zoomsl.sergeland.ru/example/ I put the .js file in javascripts folder and wrote the function to call the method from the js file in the script code below the page but it say "undefined method" in console. I checked in the source that the file is there in the list of all the js files which are included in the app, and I found it there. Please help.. Am I missing something?

Edit: I have included the js file in assets which is downloaded from the above link. In template

 <Img  class = "my-foto"  src = "<%= p.asset1.url(:small)%>"   Data-large = "<%= p.asset1.url(:large)%>"  title = "Photos" >

<Script> 
$(document).ready(function(){

  $ ( ".my-foto" ). imagezoomsl ({  <-----Here is the error "Undefined is not a fuction

     zoomrange :  [ 3 ,  3 ] 
  }); 
});    
</ script>

Another try:I downloaded the demo1.zip. In that demo if zoomsl-3.0.min file is not included it displays an msg-Please include zoomsl-3.0.min file. I copied the code in my app and found that its displaying the same message, even though I have included it and checked it also by console.log. I cant get it, Why its happening like this?

Take a look this answer http://stackoverflow.com/a/19834224/1297435 — rails_id, Mar 12 '15 at 08:22
I tried the things described in stackoverflow.com/a/19834224/1297435, but t=still its showing the same error. — dips, Mar 12 '15 at 08:33
I tried it on my system. It works pretty fine. Initially it was giving some encoding error, so saved it in UTF-8 encoding and all was well. You must check your spellings in your code I guess. — jaspreet21anand, Mar 13 '15 at 06:35
I too tried it on other rails app, and it working fine.... but in my this app its not working — dips, Mar 13 '15 at 06:52

score 1 · Answer 1 · answered Mar 12 '15 at 06:50

1

Check if the code in the js file is executing by adding a console log at the end of it (make sure it is included by your application.js) Also make sure to execute the call from your page after the document load event is thrown, or the script tag could try to call before the js function is defined.

If you 're using jquery:

$( document ).ready(function(){
  // call your js function here
})

redefined window.onload for pure js

answered Mar 12 '15 at 06:50

WKx

401
4
15

I checked by adding the console.log("xyz") at the end of the js file, and it printing the output "xyz" in console, so its executing. And after refreshing the page, it first shows the output "xyz" then its showing the message-"Uncaught TypeError: undefined is not a function" on the line "$ ( ".my-foto" ). imagezoomsl ({" – dips Mar 12 '15 at 08:21
I downloaded the demo1.zip. In that demo if zoomsl-3.0.min file is not included it displays an msg-Please include zoomsl-3.0.min file. In my app , its displaying the same message, even though I have included it and checked it also by console.log. I cant get it, Why its happening like this? – dips Mar 12 '15 at 10:04

score 1 · Answer 2 · answered Mar 13 '15 at 03:27

1

You ll have to include the javascript file on the page where u are using it, anywhere before the script tag.

Use

<℅= javascript_include_tag 'filename' %>

Also add this file to assets.rb file for precompilation

OR

Simply go to application.js and check if it is using require tree or not. It should do if you want the file to be included automatically on ur page

answered Mar 13 '15 at 03:27

jaspreet21anand

779
1
6
8

Just to double check, you have added your file in `javascript` folder under the `assets` folder in `app` folder. – jaspreet21anand Mar 13 '15 at 03:29
I have included the js file inside javascript folder and in application.js, require_tree . is also there. I also tried by including the javascript_include_tag. Its giving me the same error :( – dips Mar 13 '15 at 05:55
1

try to trace back the line number it is giving error on. and let me know the exact code of the line.. copy paste it here – jaspreet21anand Mar 13 '15 at 06:38
I have edited the code and pointed out the exact line on which its showing error. – dips Mar 13 '15 at 06:53

dips · Accepted Answer · 2015-03-16T17:27:20.340

0

I included a script tag for jquery while implementing bootstrap into my app. That was creating problem, as I removed that jquery line, zoom is working perfectly alright.

edited Mar 16 '15 at 17:27

answered Mar 16 '15 at 12:13

dips

370
6
17

1

Thats great. I think you might have got a lot of other stuff too while figuring out this problem :) – jaspreet21anand Mar 17 '15 at 06:23
@jaspreet21anand yes!! Thanks to all of you guys. All of this cleared many things :) – dips Mar 17 '15 at 07:28

how to use any javascript code in rails app?

3 Answers3