erb and js question

Derek Smith · Nov 13, 2009

Hi All,

I did some looking around on google and found a fix for setting the
default location of the cursor on a page. The fix is mentioned here:

http://techsupt.winbatch.com/TS/T000002021F19.html

So my goal is to use Javascript, and place the the focus on one of the
boxes. The focus would mean that the typing cursor would be in a certain
box, but not the mouse cursor.

Here is my code:

cat login.html.erb

<div id="login">
<% form_tag :action => 'login' do %>
<br />
<label for='username'>Username:</label>
<%= text_field_tag 'username' %>
<label for='password'>Password:</label>
<%= password_field_tag 'password' %>
<%= image_submit_tag 'login.png' %>
<br />
<br />
<% end %>
</div>


Yet I am still unsure how to integrate this code, maybe just the JS
block?

thank you!

Mike Stephens · Nov 13, 2009

This looks like a JavaScript question. I recommend this forum :

http://w3schools.invisionzone.com/

I suggest you need the focus () function called by the onload event.

Brian Candler · Nov 16, 2009

Derek said:
Here is my code:

cat login.html.erb

<div id="login">
<% form_tag :action => 'login' do %>
<br />
<label for='username'>Username:</label>
<%= text_field_tag 'username' %>
<label for='password'>Password:</label>
<%= password_field_tag 'password' %>
<%= image_submit_tag 'login.png' %>
<br />
<br />
<% end %>
</div>


Yet I am still unsure how to integrate this code, maybe just the JS
block?

This isn't really a Ruby question, but briefly: you can emit a

<script language='javascript'>
...
</script>

which does what you want. However:

1. You want this to happen when the page has finished loading, so write
it to be triggered on the onload event.

2. It's cleaner to put it in the <HEAD> of your document, which could be
in the layout or using content_for :head

3. It's cleaner to put it in a separate Javascript file, e.g.
public/javascripts/focus_user.js, and then all you need is:

<%= javascript_include_tag 'focus_user' %>

This sort of stuff is wonderfully easy to do using jQuery, and I
recommend it strongly. All you would need is:

jQuery( function($) {
$('#username').focus();
});

Derek Smith · Nov 29, 2009

This sort of stuff is wonderfully easy to do using jQuery, and I
recommend it strongly. All you would need is:

jQuery( function($) {
$('#username').focus();
});

Yeah I heard of jquery from my rails beginner class and now I am trying
it, however it is still not working. Please review my code.

__CODE__


<script type="text/javascript"
src="/usr/local/vrep/test/public/javascripts/jquery-1.3.2.min.js"></script>

<div id="login">
<% form_tag :action => 'login' do %>
<br />
<label for='username'>Username:</label>
<%= text_field_tag 'username' %>
<label for='password'>Password:</label>
<%= password_field_tag 'password' %>
<%= image_submit_tag 'login.png' %>
<br />
<br />
<% end %>

</div>
</form>

<script type="text/javascript">
jQuery( function($) {
$('#username').focus();
});

</script>

Brian Candler · Nov 29, 2009

Derek said:
Yeah I heard of jquery from my rails beginner class and now I am trying
it, however it is still not working. Please review my code.

jQuery problems don't really belong on a Ruby mailing list.

I don't see anything wrong with what you have, except I usually write
<script language='javascript'>
rather than
<script type='text/javascript'>

I suggest you debug this using firefox plus firebug. This will let you
open a javascript console, see if any errors are reported, then issue
the $('#username')... javascript line interactively.

Brian Candler · Nov 29, 2009

IÃ±igo Medina said:
There is no id defined with "username" in your form.

I think you'll find there is; the code has

<%= text_field_tag 'username' %>

and the Rails helper adds an id for you. From the action_view
documentation:

# ==== Examples
# text_field_tag 'name'
# # => <input id="name" name="name" type="text" />

Brian Candler · Nov 29, 2009

Derek said:
<script type="text/javascript"
src="/usr/local/vrep/test/public/javascripts/jquery-1.3.2.min.js"></script>

Erm, I missed the obvious thing there, which is that you're not loading
jquery properly.

If your browser is loading the page directly from disk into your browser
with a file:// URL, then you'd want

src="file:///usr/local/vrep/test/public/javascripts/jquery-1.3.2.min.js"

If you're serving the page from a webserver, then you'd just want

src="/javascripts/jquery-1.3.2.min.js"

There is a Rails helper you can use instead:

<%= javascript_include_tag "jquery-1.3.2.min.js" %>

This also does some clever stuff appending the timestamp of the file to
the URL, so if you change the file on disk it forces the browser to
fetch the new version.

<script type="text/javascript">
jQuery( function($) {
$('#username').focus();
});

</script>

The best practice would be for this script to live in the <head> of your
document. Note that jQuery( ..function.. ) sets up an onLoad handler
which calls your function only when the entire page is loaded, so it's
OK to set this early because it won't be run until later.

Hassan Schroeder · Nov 30, 2009

I don't see anything wrong with what you have, except I usually write
=A0<script language=3D'javascript'>
rather than
=A0<script type=3D'text/javascript'>

Even though the "language" attribute of the script tag has been
deprecated since 1999??

--=20
Hassan Schroeder ------------------------ (e-mail address removed)
twitter: @hassan

Brian Candler · Nov 30, 2009

Hassan said:
Even though the "language" attribute of the script tag has been
deprecated since 1999??

Hmm. I picked up this practice from "Javascript - The Definitive Guide"
(5th edition, August 2006), but it turns out I misread it:

'At the time of this writing, "application/javascript" is not well
supported, however'

But what I should have used instead is type="text/javascript", rather
than language="javascript"

Thanks for pointing this out.

Using JS to verify registration info?	1	Mar 19, 2020
Survey details won't go through using php, ajax, Mysql	2	Oct 26, 2023
<b>Parse error</b>: syntax error, unexpected variable "$POST", expecting ")" in <b>the respective file</b> on line<b>2<b>	1	Feb 9, 2022
Help with my responsive home page	2	Dec 14, 2022
Only one table shows up with the information	2	Mar 29, 2023
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Problem with login example in Agile Web Development with Ruby 2nd Edition	5	Jan 16, 2007
DOM form validation and troubles with FF...	9	Dec 17, 2006

erb and js question

Derek Smith

Mike Stephens

Brian Candler

Derek Smith

Brian Candler

Brian Candler

Brian Candler

Hassan Schroeder

Brian Candler

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads