<?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>Rabbit Creative &#187; JSON</title>
	<atom:link href="http://www.rabbitcreative.com/category/json/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rabbitcreative.com</link>
	<description>ruby, rails, objects and &#60;del&#62;politics&#60;/del&#62; markets</description>
	<lastBuildDate>Tue, 20 Apr 2010 17:15:51 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Scientists agree: Using JSON to bring the richness of the Rails controller and view layers to Ajax requests makes life more enjoyable!</title>
		<link>http://www.rabbitcreative.com/2007/10/01/scientists-agree-using-json-to-bring-the-richness-of-the-rails-controller-and-view-layers-to-ajax-requests-makes-life-more-enjoyable/</link>
		<comments>http://www.rabbitcreative.com/2007/10/01/scientists-agree-using-json-to-bring-the-richness-of-the-rails-controller-and-view-layers-to-ajax-requests-makes-life-more-enjoyable/#comments</comments>
		<pubDate>Tue, 02 Oct 2007 05:05:51 +0000</pubDate>
		<dc:creator>Rabbit</dc:creator>
				<category><![CDATA[JSON]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.rabbitcreative.com/2007/10/01/scientists-agree-using-json-to-bring-the-richness-of-the-rails-controller-and-view-layers-to-ajax-requests-makes-life-more-enjoyable/</guid>
		<description><![CDATA[How do you handle an Ajax request whereby the request itself is successful (i.e. it returns a status 200 OK), but the requested operation fails. For example, a user attempts to create a new ActiveRecord object, but the object fails validation and thus doesn&#8217;t get saved to the database. The HTTP request was successful, but [...]]]></description>
			<content:encoded><![CDATA[<p>How do you handle an Ajax request whereby the request itself is successful (i.e. it returns a status 200 OK), but the requested operation fails. For example, a user attempts to create a new ActiveRecord object, but the object fails validation and thus doesn&#8217;t get saved to the database. The HTTP request was successful, but the user&#8217;s wishes weren&#8217;t fulfilled.</p>
<p>There are many, many ways to handle such a request, and most of them are fucking painful. Especially if you don&#8217;t care to muck around with endless JavaScript.</p>
<p>What I&#8217;m about to propose is most useful for those using jQuery (or any framework outside of Prototype, actually). I say this because a lot of what this technique does is also accomplished with RJS templates. Why not just use RJS templates? Because Prototype sucks balls in the documentation department. jQuery doesn&#8217;t. Therefore, I use jQuery.</p>
<p>Anywho, let&#8217;s start with a controller action:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> create
  <span style="color:#0066ff; font-weight:bold;">@object</span> = <span style="color:#CC00FF; font-weight:bold;">Object</span>.<span style="color:#9900CC;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>params<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:object</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">if</span> <span style="color:#0066ff; font-weight:bold;">@stock_color</span>.<span style="color:#9900CC;">save</span>
    flash<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:positive</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#006600; font-weight:bold;">%</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#CC00FF; font-weight:bold;">Object</span> saved.<span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#9966CC; font-weight:bold;">else</span>
    flash<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:negative</span><span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color:#006600; font-weight:bold;">%</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#CC00FF; font-weight:bold;">Object</span> <span style="color:#9966CC; font-weight:bold;">not</span> saved.<span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
  <span style="color:#9966CC; font-weight:bold;">if</span> request.<span style="color:#9900CC;">xhr</span>?
    render<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'xhr_create'</span>, <span style="color:#ff3333; font-weight:bold;">:layout</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0000FF; font-weight:bold;">false</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">else</span>
    redirect_to<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:action</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'index'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>And the Ajax-specific partial for that action:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#006600; font-weight:bold;">&lt;%</span>=
&nbsp;
  <span style="color:#006600; font-weight:bold;">&#123;</span>
    <span style="color:#ff3333; font-weight:bold;">:flash</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:positive</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> flash<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:positive</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#ff3333; font-weight:bold;">:negative</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> flash<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:negative</span><span style="color:#006600; font-weight:bold;">&#93;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>,
    <span style="color:#ff3333; font-weight:bold;">:objects</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:object</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@object</span> <span style="color:#006600; font-weight:bold;">&#125;</span>,
    <span style="color:#ff3333; font-weight:bold;">:views</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:some_partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> render<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:partial</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'some_partial'</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#006600; font-weight:bold;">&#125;</span>.<span style="color:#9900CC;">to_json</span>
&nbsp;
<span style="color:#006600; font-weight:bold;">%&gt;</span></pre></div></div>

<p>Note the <code>to_json</code> method we&#8217;re appending to our Hash. This converts and injects everything we care about from Rails directly into a format easily read and manipulated by JavaScript. We could easily add all our session and params data, too.</p>
<p>Finally, and most importantly, we&#8217;ll see how much easier it is to manipulate our page now that we have all the information we could possibly want from the Rails environment:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#quote_form'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $.<span style="color: #660066;">getJSON</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/objects/create'</span><span style="color: #339933;">,</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">serialize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      Flash.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span>response.<span style="color: #660066;">flash</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// An object I created to handle setting the flash.</span>
&nbsp;
      <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>response.<span style="color: #660066;">objects</span>.<span style="color: #660066;">quote</span>.<span style="color: #660066;">errors</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#objects'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;li&gt;'</span> <span style="color: #339933;">+</span> response.<span style="color: #660066;">objects</span>.<span style="color: #660066;">object</span>.<span style="color: #660066;">attributes</span>.<span style="color: #000066;">name</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&lt;/li&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#object_form'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">resetForm</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// Handle the error here. Remember, you have access to the standard ActiveRecord errors!</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// Don't actually submit the form, let the above JavaScript do its thing.</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The pattern is a simple one.</p>
<ol>
<li>Do what you would normally do in a controller action.</li>
<li>In addition to what you just did in that action, conditionally render a standard .rhtml partial if the request came from JavaScript.</li>
<li>In the view that gets rendered for Ajax requests, create a standard Ruby hash with all the information you&#8217;re interested in. This includes any instance variables, session, params and even other views (this is good for generating lots of HTML that would otherwise be a hassle to generate in JavaScript).</li>
<li>Call to_json on that hash.</li>
<li>Smile with glee at all the kick ass information you have available to you in JavaScript!</li>
</ol>
<p>The only thing I don&#8217;t like about this approach is that the controller code gets a bit longer and slightly more complex &#8212; it also introduces new views where there were previously none. On the flip side, it makes handling Ajax requests a freaking breeeze, and that&#8217;s worth it!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rabbitcreative.com/2007/10/01/scientists-agree-using-json-to-bring-the-richness-of-the-rails-controller-and-view-layers-to-ajax-requests-makes-life-more-enjoyable/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
