<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SciWerks.com &#187; User Interface</title>
	<atom:link href="http://www.sciwerks.com/blog/category/ruby-on-rails/user-interface/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sciwerks.com/blog</link>
	<description>Software for scientists, by scientists</description>
	<lastBuildDate>Fri, 24 Oct 2008 01:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>How to use an auto_complete to validate passwords</title>
		<link>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/</link>
		<comments>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/#comments</comments>
		<pubDate>Thu, 01 Feb 2007 02:04:20 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/</guid>
		<description><![CDATA[As a follow up to my previous article about using auto_completes to ensure unique filenames, I&#8217;ve put together a bit of code that does essentially the same thing except that it checks a password field to ensure that it meets certain criteria.




# view file


&#60;%= text_field_with_auto_complete :user, :password %&#62;&#60;div id=login_error&#62;&#60;/div&#62;


&#160;


# model file


&#160;


def User &#60; ActiveRecord::Base


&#160; validates_length_of [...]]]></description>
			<content:encoded><![CDATA[<p>As a follow up to my previous article about using auto_completes to ensure unique filenames, I&#8217;ve put together a bit of code that does essentially the same thing except that it checks a password field to ensure that it meets certain criteria.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># view file</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete :user, :password %&gt;&lt;div id=login_error&gt;&lt;/div&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># model file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> User &lt; ActiveRecord::Base</div>
</li>
<li class="li1">
<div class="de1">&nbsp; validates_length_of :password, :<span class="kw1">in</span>=&gt;<span class="nu0">3</span>..<span class="nu0">20</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># controller file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> auto_complete_for_user_password</div>
</li>
<li class="li1">
<div class="de1">&nbsp; @user = User.<span class="me1">new</span><span class="br0">&#40;</span>params<span class="br0">&#91;</span>:user<span class="br0">&#93;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; @user.<span class="me1">valid</span>?&nbsp; <span class="co1"># ensures the errors array is populated</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; password_errors = @user.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>&#8216;password&#8217;<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; render :update <span class="kw1">do</span> |page|</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;page.<span class="me1">replace_html</span> &#8216;login_error&#8217;, <span class="br0">&#40;</span>password_errors.<span class="me1">empty</span>? ? <span class="st0">&quot;&quot;</span> : password_errors<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>This will indicate when a password does not meet the validation criteria defined in the model.  You can add custom validations to check the strength of the password itself.<br />
<script type="text/javascript"><!--
google_ad_client = "pub-1072568092760209";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2007/01/31/how-to-use-an-auto_complete-to-validate-passwords/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Passing extra data with an auto_complete</title>
		<link>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/</link>
		<comments>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/#comments</comments>
		<pubDate>Tue, 21 Nov 2006 19:23:43 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/</guid>
		<description><![CDATA[A quick and easy method to pass additional data to an auto_complete_for method.]]></description>
			<content:encoded><![CDATA[<p>I recently found myself trying to use an auto_complete field to allow the user to select an object from a list of possible objects.  That&#8217;s all fine and dandy, but I wanted to exclude certain values depending on which object I was editing.  There are at least two ways to do this, the first is to stuff the extra data into the session and then read that value from the auto_complete_for method and act appropriately.</p>
<p>I don&#8217;t really like this approach because I don&#8217;t want to clutter up the session with various form parameters.  Thankfully, there is a simple way to do this by once again abusing the built in text_field_with_auto_complete function&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># View</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete &#8216;new_object&#8217;, &#8216;name&#8217;, <span class="br0">&#123;</span> :tabindex=&gt;<span class="nu0">1</span> <span class="br0">&#125;</span>, <span class="br0">&#123;</span>:url=&gt;<span class="br0">&#123;</span>:action=&gt;&#8217;auto_complete_for_object_name&#8217;, :extra=&gt;@object.<span class="me1">extra</span><span class="br0">&#125;</span> %&gt; </div>
</li>
</ol>
</div>
</div>
<p>[In my case, I used the :extra data to exclude certain objects from the auto_complete_for response]</p>
<p>By passing the :url option, you rewrite the URL that the AJAX actions call, enabling you to add extra parameters that can be acted on by the method.  Also note that you can change the name of the action called (in fact, you need to specify it or it will default to the name of the action for the current view&#8230; probably not what you want).  This is handy because it lets you assign the response to a variable with a different name without writing a separate auto_complete_for handler.  In this case, the submitted form will have a &#8216;new_object[name]&#8216; in the params, even though the action called was &#8216;auto_complete_for_object_name&#8217;.</p>
<p>Needless to say, you need to write a custom &#8216;auto_complete_for&#8217; method to handle the extra data.  Note that you could also use this method to handle multiple auto_complete fields. </p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-1072568092760209";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/11/21/passing-extra-data-with-an-auto_complete/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Live Forms.  Part 1: Putting the errors in the right place</title>
		<link>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/</link>
		<comments>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/#comments</comments>
		<pubDate>Mon, 06 Nov 2006 02:33:59 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Forms]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/</guid>
		<description><![CDATA[This is Part 1 of a series describing how to make better forms for Rails.
The standard rails approach to handling form validation errors is to spit out a long list of all validation errors in a box at the top of the form.  The problem with this approach is that there is a separation [...]]]></description>
			<content:encoded><![CDATA[<p><em>This is Part 1 of a series describing how to make better forms for Rails.</em></p>
<p>The standard rails approach to handling form validation errors is to spit out a long list of all validation errors in a box at the top of the form.  The problem with this approach is that there is a separation between the list of errors and the field that spawned them, like this.  </p>
<p><img id="image30" src="http://www.sciwerks.com/blog/wp-content/uploads/2006/11/figure1.gif" alt="Figure 1 - Default Rails Form Layout" /></p>
<p>This can be a bit annoying, particularly in a long form where the error message and the offending form field may not appear on the screen at the same time.  Notice that you have to first read the error message, and then read the titles of all the fields to find the offending one(s) that need to be corrected.  They aren&#8217;t even in the same order as they were specified in the form, which makes it even more confusing.  This is just extra work for the user, particularly if your form is long or complex.</p>
<p>One way to address this problem is to put the appropriate error message right next to the field with the error.  This way, it&#8217;s pretty obvious where the problems are, and even what they are.  You can also generally avoid using the name of the field in the message.<br />
A simple example of this might look like this&#8230;.</p>
<p><img id="image29" src="http://www.sciwerks.com/blog/wp-content/uploads/2006/11/figure2.gif" alt="Figure 2 - Inline Error Messages" /></p>
<p>This still isn&#8217;t pretty, but at least the user knows exactly which fields need correcting, and a little CSS magic can even place the message to the right of the offending field.</p>
<p>So how do we implement this?</p>
<p>Simple&#8230; first go into your view and delete the
<div class="codesnip-container" >error_messages_for &#8216;object&#8217;</div>
<p> line.</p>
<p>Then stick this in your application helper.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># application_helper.rb</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> error_for<span class="br0">&#40;</span>object, method = <span class="kw2">nil</span>, options=<span class="br0">&#123;</span><span class="br0">&#125;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> method</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; err = instance_variable_get<span class="br0">&#40;</span><span class="st0">&quot;@#{object}&quot;</span><span class="br0">&#41;</span>.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>method<span class="br0">&#41;</span>.<span class="me1">to_sentence</span> <span class="kw1">rescue</span> instance_variable_get<span class="br0">&#40;</span><span class="st0">&quot;@#{object}&quot;</span><span class="br0">&#41;</span>.<span class="me1">errors</span>.<span class="me1">on</span><span class="br0">&#40;</span>method<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">else</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; err = @errors<span class="br0">&#91;</span><span class="st0">&quot;#{object}&quot;</span><span class="br0">&#93;</span> <span class="kw1">rescue</span> <span class="kw2">nil</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; options.<span class="me1">merge</span>!<span class="br0">&#40;</span>:<span class="kw1">class</span>=&gt;&#8217;fieldWithErrors&#8217;, :id=&gt;<span class="st0">&quot;#{[object,method].compact.join(&#8217;_')}-error&quot;</span>, :style=&gt;<span class="br0">&#40;</span>err ? <span class="st0">&quot;#{options[:style]}&quot;</span> : <span class="st0">&quot;#{options[:style]};display: none;&quot;</span><span class="br0">&#41;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; content_tag<span class="br0">&#40;</span><span class="st0">&quot;p&quot;</span>,err || <span class="st0">&quot;&quot;</span>, options <span class="br0">&#41;</span>&nbsp; &nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>Then in your form view, add an &#8216;error_for&#8217; call wherever you need one&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># _form.rhtml</span></div>
</li>
<li class="li1">
<div class="de1">&lt;p&gt;&lt;label <span class="kw1">for</span>=<span class="st0">&quot;code_project_name&quot;</span>&gt;Name&lt;/label&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field &#8216;code_project&#8217;, &#8216;name&#8217;&nbsp; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= error_for &#8216;code_project&#8217;, &#8216;name&#8217; %&gt;&lt;/p&gt; </div>
</li>
</ol>
</div>
</div>
<p>If the model fails a validation test, then it will show the message right next to the field that caused the validation problem.<br />
Also note that if you define an instance variable called @errors containing a hash of field_names and messages, they will also be used.  This is handy for those form fields that don&#8217;t correspond to a model attribute.</p>
<p><em>Stay tuned for Part 2, where I will describe a how to make these error message dynamic with AJAX.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/11/05/live-forms-part-1-putting-the-errors-in-the-right-place/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Unspace &#8211; Endless Pageless: No More Next Page</title>
		<link>http://www.sciwerks.com/blog/2006/10/31/unspace-endless-pageless-no-more-next-page/</link>
		<comments>http://www.sciwerks.com/blog/2006/10/31/unspace-endless-pageless-no-more-next-page/#comments</comments>
		<pubDate>Wed, 01 Nov 2006 02:32:01 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/10/31/unspace-endless-pageless-no-more-next-page/</guid>
		<description><![CDATA[Pete Forde at Unspace has written an interesting article describing a method for implementing &#8216;pageless&#8217; data display in Rails.  This approach is very interesting from a user interface standpoint, as it removes unnecessary user interactions (i.e., &#8216;next&#8217; or &#8216;previous&#8217; buttons) with the display page.  It does introduce it&#8217;s own problems as it is [...]]]></description>
			<content:encoded><![CDATA[<p>Pete Forde at Unspace has written an interesting article describing a method for implementing &#8216;pageless&#8217; data display in Rails.  This approach is very interesting from a user interface standpoint, as it removes unnecessary user interactions (i.e., &#8216;next&#8217; or &#8216;previous&#8217; buttons) with the display page.  It does introduce it&#8217;s own problems as it is easy for the user to get &#8216;lost&#8217; in the results as the normal reference points for the start and end of the page are constantly moving targets.</p>
<p>This technique is clearly one to keep an eye on for a good user experience.  It is not yet clear to me when this type of interface can be used for maximal benefit, and when conventional paging should be the preferred method.</p>
<p><a href="http://unspace.ca/discover/pageless/">Unspace &#8211; Endless Pageless: No More Next Page</a></p>
<p><!--adsense--></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/10/31/unspace-endless-pageless-no-more-next-page/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>My interview regarding user interface design at the CED Unconference.</title>
		<link>http://www.sciwerks.com/blog/2006/10/29/my-first-youtube-interview-w00t/</link>
		<comments>http://www.sciwerks.com/blog/2006/10/29/my-first-youtube-interview-w00t/#comments</comments>
		<pubDate>Mon, 30 Oct 2006 01:29:35 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/10/29/my-first-youtube-interview-w00t/</guid>
		<description><![CDATA[Here&#8217;s a brief interview I did about user interface design at a recent conference in North Carolina.

Yes, that is really me.
]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a brief interview I did about user interface design at a recent conference in North Carolina.</p>
<p><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/MZPxWUL3a2s"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/MZPxWUL3a2s" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></p>
<p>Yes, that is really me.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/10/29/my-first-youtube-interview-w00t/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Using an auto_complete to ensure uniqueness</title>
		<link>http://www.sciwerks.com/blog/2006/10/09/using-an-auto_complete-to-ensure-uniqueness/</link>
		<comments>http://www.sciwerks.com/blog/2006/10/09/using-an-auto_complete-to-ensure-uniqueness/#comments</comments>
		<pubDate>Mon, 09 Oct 2006 16:33:52 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/10/09/using-an-auto_complete-to-ensure-uniqueness/</guid>
		<description><![CDATA[A quick and easy way to indicate if a text field is unique by subverting auto_complete fields for your own <s>nefarious</s> purposes.]]></description>
			<content:encoded><![CDATA[<h2>The Problem</h2>
<p>Occasionally there is a need to have a user enter a unique string.  For example, if you want to ensure that a new user&#8217;s login id is not used by someone else.  The traditional rails way of doing this is to set up a &#8216;validates_uniqueness_of&#8217; validation on the model and then catch the error when you try to save the record.  </p>
<p>From the user&#8217;s point of view, this can be a horrendously painful experience that can be akin to trying to outsmart the Sphinx.</p>
<div class="codesnip-container" >Form: &#8220;please enter a unique login id&#8217;<br />
User: &#8220;john smith&#8221;<br />
Form: &#8220;Wrong, guess again!&#8221;<br />
User: &#8220;jsmith&#8221;<br />
Form: &#8220;Nope, getting warmer&#8221;<br />
User: &#8220;jsmith1&#8243;<br />
Form: &#8220;You wish! Keep trying!&#8221;<br />
User: &#8220;as;ldfkjasd;flkajsdf;lakjsd&#8221;<br />
Form: &#8220;Ha! your id must be only numbers and letters!&#8221;<br />
User: &#8220;!@!$!@!#!@#!@#!@#%*(#^($!!!!!!!&#8221;<br />
Form: &#8220;Sorry, wrong again!&#8221;<br />
* user navigates to youtube *</div>
<p>The biggest problem here is that there is no feedback to the user if the value they selected is valid until they submit.  Some forms will also force you to retype your new password everytime this fails as well.  Double ouch!</p>
<h2>Solutions</h2>
<ol>
<li>offer suggestions for valid responses when it fails the first time.  Not exactly the best, you might as well autogenerate their id for them and hope they don&#8217;t forget it.</li>
<li>
provide feedback with AJAX to let them know if the value is ok.</li>
</ol>
<p>As you might have guessed from the title of the article, I&#8217;m going to show you how to do this with a standard rails auto_complete text field.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># view file</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete :user, :login_id %&gt;&lt;div id=login_error&gt;&lt;/div&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># controller file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> auto_complete_for_user_user_name</div>
</li>
<li class="li1">
<div class="de1">&nbsp; @user = User.<span class="me1">find_by_user_name</span><span class="br0">&#40;</span>params<span class="br0">&#91;</span>:user<span class="br0">&#93;</span><span class="br0">&#91;</span>:user_name<span class="br0">&#93;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;render :update <span class="kw1">do</span> |page|</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;page.<span class="me1">replace_html</span> &#8216;login_error&#8217;, <span class="br0">&#40;</span>@user ? <span class="st0">&quot;Login id already in use&quot;</span> : <span class="st0">&quot;&quot;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>That&#8217;s it.  Anytime the auto_complete matches a record, it will change the &#8216;login_error&#8217; div to indicate there&#8217;s a problem.</p>
<p>Net result&#8230;. a much better user interface experience and much happier users.<span id="more-21"></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/10/09/using-an-auto_complete-to-ensure-uniqueness/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Another blindingly obvious way to disable a submit button when pressed</title>
		<link>http://www.sciwerks.com/blog/2006/10/08/another-blindingly-obvious-way-to-disable-a-submit-button-when-pressed/</link>
		<comments>http://www.sciwerks.com/blog/2006/10/08/another-blindingly-obvious-way-to-disable-a-submit-button-when-pressed/#comments</comments>
		<pubDate>Sun, 08 Oct 2006 12:32:11 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/10/08/another-blindingly-obvious-way-to-disable-a-submit-button-when-pressed/</guid>
		<description><![CDATA[Probably the simplest and least problematic way to disable a submit button when pressed.




# put this in your &#8216;application_helper&#8217; file


&#160;


def commit_tag&#40;title, html_options=&#123;&#125;&#41;


&#160; submit_tag title, html_options.merge&#40;:id=&#62;&#8217;commit&#8217;, :onclick=&#62;&#8217;$&#40;&#34;commit&#34;&#41;.disabled=true;&#8217;&#41;


end 




Then just use &#8216;commit_tag&#8217; instead of &#8217;submit_tag&#8217; in your form.
Strictly speaking, you don&#8217;t really need to give the button an &#8216;id&#8217;, but I do because it has the bonus [...]]]></description>
			<content:encoded><![CDATA[<p>Probably the simplest and least problematic way to disable a submit button when pressed.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># put this in your &#8216;application_helper&#8217; file</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> commit_tag<span class="br0">&#40;</span>title, html_options=<span class="br0">&#123;</span><span class="br0">&#125;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; submit_tag title, html_options.<span class="me1">merge</span><span class="br0">&#40;</span>:id=&gt;&#8217;commit&#8217;, :onclick=&gt;&#8217;$<span class="br0">&#40;</span><span class="st0">&quot;commit&quot;</span><span class="br0">&#41;</span>.<span class="me1">disabled</span>=<span class="kw2">true</span>;&#8217;<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<p>Then just use &#8216;commit_tag&#8217; instead of &#8217;submit_tag&#8217; in your form.<br />
Strictly speaking, you don&#8217;t really need to give the button an &#8216;id&#8217;, but I do because it has the bonus side effect of making it easy programmatically disable the button from RJS templates.</p>
<p>One reason this approach is superior (I think) to an AJAX call is that there is less of a chance that an over-enthusiastic user will be able to click the button again before the AJAX response renders.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/10/08/another-blindingly-obvious-way-to-disable-a-submit-button-when-pressed/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Auto disabling the submit button with KRJS</title>
		<link>http://www.sciwerks.com/blog/2006/10/04/auto-disabling-the-submit-button-with-krjs/</link>
		<comments>http://www.sciwerks.com/blog/2006/10/04/auto-disabling-the-submit-button-with-krjs/#comments</comments>
		<pubDate>Thu, 05 Oct 2006 00:52:49 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/10/04/auto-disabling-the-submit-button-with-krjs/</guid>
		<description><![CDATA[Benjamin over at RubyOnRailsBlog   was recently wondering about how to painlessly disable a submit button to prevent the user from hitting it multiple times.
This requires some sort of javascript hackery to achieve, but the easiest way I&#8217;ve found to do this is with my trusty old KRJS pocketknife.




# in application controller


&#160;


def on_commit_click


&#160; render [...]]]></description>
			<content:encoded><![CDATA[<p>Benjamin over at <a href="http://www.rubyonrailsblog.com/articles/2006/10/03/disable-submit-button-after-its-pressed">RubyOnRailsBlog</a>   was recently wondering about how to painlessly disable a submit button to prevent the user from hitting it multiple times.</p>
<p>This requires some sort of javascript hackery to achieve, but the easiest way I&#8217;ve found to do this is with my trusty old KRJS pocketknife.</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># in application controller</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">def</span> on_commit_click</div>
</li>
<li class="li1">
<div class="de1">&nbsp; render :update |page| <span class="kw1">do</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;page<span class="br0">&#91;</span>&#8216;commit&#8217;<span class="br0">&#93;</span>.<span class="me1">disabled</span> = <span class="kw2">true</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;page &lt;&lt; <span class="st0">&quot;$(&#8217;commit&#8217;).form.submit();&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># in the form</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= submit_tag &#8216;Submit&#8217;, :id=&gt;&#8217;commit&#8217; %&gt; </div>
</li>
</ol>
</div>
</div>
<p>This will add this behavior for all submit buttons with the &#8216;commit&#8217; id.  The hardest part here is remembering to add the &#8216;commit&#8217; id.</p>
<p>Requires: <a href="http://www.agilewebdevelopment.com/plugins/krjs">KRJS Plugin </a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/10/04/auto-disabling-the-submit-button-with-krjs/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>multiple_auto_complete plugin</title>
		<link>http://www.sciwerks.com/blog/2006/09/25/multiple_auto_complete_plugin/</link>
		<comments>http://www.sciwerks.com/blog/2006/09/25/multiple_auto_complete_plugin/#comments</comments>
		<pubDate>Mon, 25 Sep 2006 17:59:45 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/09/25/16/</guid>
		<description><![CDATA[Rails&#8217; auto_complete control can be a really handy way to allow users to select an object or string from a list of pre-existing values, however, one big limitation to its use is the fact that you can&#8217;t have more than one of them on a single page.  
UPDATE: just to clarify this a bit. [...]]]></description>
			<content:encoded><![CDATA[<p>Rails&#8217; auto_complete control can be a really handy way to allow users to select an object or string from a list of pre-existing values, however, one big limitation to its use is the fact that you can&#8217;t have more than one of them on a single page.  </p>
<p>UPDATE: just to clarify this a bit.  If you have more than one auto_complete that tries to access the same model/field combo, you get into trouble.  You can have multiple auto_completes so long as they access different model/field combinations.</p>
<p>I tried a couple of hacks around this problem (some involving method_missing), and finally found a method that works pretty well and doesn&#8217;t mess up your controllers.</p>
<p>The approach I ended up using was to rewrite the &#8216;auto_complete_for&#8217; and &#8216;text_field_with_auto_complete&#8217; functions so that they ignore trailing numbers on a dom_id. Once you install the plugin (see below), you simply use it like this&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># View file</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete &#8216;object_1&#8242;, &#8216;name&#8217; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete &#8216;object_2&#8242;, &#8216;name&#8217; %&gt; </div>
</li>
</ol>
</div>
</div>
<p></p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># controller file</span></div>
</li>
<li class="li1">
<div class="de1">auto_complete_for :object, :name </div>
</li>
</ol>
</div>
</div>
<p>All the auto_complete fields named /object[-_]d+/ will call the &#8216;auto_complete_for_object_name&#8217; function in the controller now.  The default response function will pull out the correct information and respond as usual.</p>
<p>When you submit the form, the values will be passed in the params hash as </p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">params = <span class="br0">&#123;</span> &#8216;object_1&#8242; =&gt; <span class="br0">&#123;</span>&#8216;name&#8217;=&gt;&#8217;name1&#8242;<span class="br0">&#125;</span>, &#8216;object_2&#8242;=&gt;<span class="br0">&#123;</span>&#8216;name&#8217;=&gt;&#8217;name2&#8242; <span class="br0">&#125;</span><span class="br0">&#125;</span> </div>
</li>
</ol>
</div>
</div>
<h3>Installation</h3>
<div class="codesnip-container" >script/plugin install svn://sciwerks.com/home/sciwerks/public_svn/multiple_auto_complete/</div>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/09/25/multiple_auto_complete_plugin/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Cascading selects vs. auto_complete</title>
		<link>http://www.sciwerks.com/blog/2006/09/13/cascading-selects-vs-auto_complete/</link>
		<comments>http://www.sciwerks.com/blog/2006/09/13/cascading-selects-vs-auto_complete/#comments</comments>
		<pubDate>Wed, 13 Sep 2006 19:41:03 +0000</pubDate>
		<dc:creator>Kevin Olbrich</dc:creator>
				<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[auto_complete]]></category>
		<category><![CDATA[select controls]]></category>

		<guid isPermaLink="false">http://www.sciwerks.com/blog/2006/09/13/cascading-selects-vs-auto_complete/</guid>
		<description><![CDATA[How to use auto_complete controls to avoid using cascading selects]]></description>
			<content:encoded><![CDATA[<p>I have lately come to dislike cascading selects (where the value from one select populates a second select with some values).  These beasties have their purpose in life, but for the most part they are unnecessary evils. </p>
<p>If you have a &#8216;Really Long List&#8217; to select from, then using a cascading select makes a lot of sense (unless you want your users to hate you).  The problem is that they are a pain to code (<a href="http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/">well, not so bad if you use the KRJS plugin </a> ), and they are still a pain to use if you actually know what you are looking for (then you have to remember what &#8216;category&#8217; if falls in).</p>
<p>Lately I have been getting around this little problem using auto-complete boxes.<br />
In Rails you can have an auto_complete box act like a select like this&#8230;</p>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># model</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :integer</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:string</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># category_id :integer</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1"># full_name&nbsp; &nbsp;:string</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">class</span> Model &lt; ActiveRecord::Base</div>
</li>
<li class="li1">
<div class="de1">&nbsp; belongs_to :category</div>
</li>
<li class="li1">
<div class="de1">&nbsp; validates_uniqueness_of :full_name</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">def</span> before_save</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">self</span>.<span class="me1">full_name</span> = <span class="st0">&quot;#{self.category.name} &#8211; #{self.name}&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># Controller</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">class</span> ModelController &lt; ActionController::Base</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; auto_complete_for :model, :full_name</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">def</span> action</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span> request.<span class="me1">post</span>?</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp;@model = Model.<span class="me1">find_by_full_name</span><span class="br0">&#40;</span>params<span class="br0">&#91;</span>:model<span class="br0">&#93;</span><span class="br0">&#91;</span>:full_name<span class="br0">&#93;</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp;<span class="co1"># do some error handling here if item does not exist&#8230; or you could create a new one </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">else</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; @model = Model.<span class="me1">new</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw1">end</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">end</span> </div>
</li>
</ol>
</div>
</div>
<div class="codesnip-container" >
<div class="codesnip" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1"><span class="co1"># view for &#8216;action&#8217;</span></div>
</li>
<li class="li1">
<div class="de1">&lt;%= start_form_tag :action=&gt;&#8217;action&#8217; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= text_field_with_auto_complete &#8216;model&#8217;, &#8216;full_name&#8217; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= submit_tag &#8216;Submit&#8217; %&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;%= end_form_tag %&gt; </div>
</li>
</ol>
</div>
</div>
<p>Now when the user starts typing in the auto_complete field, they will get records that match against both the name and the category of the record.  The enterprising reader could also replace certain characters (like space) with the SQL wildcard &#8216;%&#8217; to get more flexible search results.</p>
<p>A user might be able to just type: &#8216;f mus&#8217; to find &#8216;Ford &#8211; Mustang&#8217;.<br />
(It&#8217;s not well known, but &#8216;f%mus&#8217; will match &#8216;Ford &#8211; Mustang&#8217; using the standard auto_complete box that ships with rails).</p>
<p>This type of entry is really fast and quite intuitive once users get the hang of it.</p>
<p>I find that this system works best when<br />
1. There are a ton of choices<br />
2. The user already has a pretty good idea which choice they want to select, but don&#8217;t really want to spend 15 minutes scrolling to find it.</p>
<p>It&#8217;s not particularly good if the user has no idea what to enter.  In those cases, the standard cascading select may help walk them through the selection process.</p>
<p>Notes: You can avoid using the &#8216;full_name&#8217; column if you properly design your own custom auto_complete_for function</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sciwerks.com/blog/2006/09/13/cascading-selects-vs-auto_complete/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
