Databases
StackOverflow2013
Postsdbo
PORails 3 and Jquery - how to use Application.js without document.ready()
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORails 3 and Jquery - how to use Application.js without document.ready()
    text
    copied!<p>I am using Rails 3 and JqueryUI-1.8.3). I have images on the page that I want the user to be able to resize.</p> <p>Application.html.erb is as follows:</p> <pre><code> &lt;%= javascript_include_tag "application.js" %&gt; &lt;link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt; &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"&gt;&lt;/script&gt; </code></pre> <p>When I write the code as below in my application.js, the image is resizable:</p> <pre><code> $(document).ready(function(){ $("#img1").resizable({ handles:'n,e,s,w,ne,se,nw,sw' , maxHeight: 300, aspectRatio: true }); </code></pre> <p>});</p> <p>However, the above code has problem because the image is sometimes not loaded correctly (the page had to be refreshed to display the image). This is because though the document is ready, image has not been loaded.</p> <p>So I thought of using the following in application.js to fix the need for refresh:</p> <pre><code> $("#img1").load(function () { $("#img1").resizable({ handles:'n,e,s,w,ne,se,nw,sw' , maxHeight: 300, aspectRatio: true }); }); </code></pre> <p>However, this makes the image not resizable (only displays image, but no resize). The code seems to work on JSBin (http://jsbin.com/iboxoy/40/edit#source), but not in my Rails code. Anytime I do not use document.ready(), the image does not remain resizable in rails Jquery-UJS code.</p> <ol> <li>Does application.js file always need to have document.ready()?</li> <li>Why does (#img).load() not work in this case?</li> <li>Is there any other solution which would be more efficient.</li> </ol> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload