Pastable version of link_to_remote_with_spinner

<div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8">
          <div class="section">
            
            <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19</pre>
            <pre class="sunburst"><span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">#</span> Behave like +link_to_remote+, but shows a spinner while the request is processing.</span>
<span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">#</span>   link_to_remote_with_spinner 'Hi', :url =&gt; hi_path</span>
<span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">#</span> You can specify the spinner and the container to hide</span>
<span style="color:#AEAEAE;font-style:italic;"><span style="color:#AEAEAE;font-style:italic;">#</span>   link_to_remote_with_spinner 'Hi', :url =&gt; hi_path, :container_id =&gt; 'container', :spinner =&gt; 'spinner'</span>
<span style="color:#E28964;">def</span> <span style="color:#89BDFF;">link_to_remote_with_spinner</span>(<span style="color:#3E87E3;">title<span style="color:#3E87E3;">,</span> options</span>)
  element_id <span style="color:#E28964;">=</span> options.<span style="color:#89BDFF;">delete</span>(<span style="color:#3387CC;"><span style="color:#3387CC;">:</span>id</span>) <span style="color:#E28964;">||</span> (<span style="color:#65B042;"><span style="color:#65B042;">'</span>link_to_<span style="color:#65B042;">'</span></span> <span style="color:#E28964;">+</span> title.<span style="color:#89BDFF;">underscore</span>.<span style="color:#89BDFF;">tr</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span> <span style="color:#65B042;">'</span></span>, <span style="color:#65B042;"><span style="color:#65B042;">'</span>_<span style="color:#65B042;">'</span></span>))
  container_id <span style="color:#E28964;">=</span> options.<span style="color:#89BDFF;">delete</span>(<span style="color:#3387CC;"><span style="color:#3387CC;">:</span>container_id</span>) <span style="color:#E28964;">||</span> element_id
  
  returning <span style="color:#65B042;"><span style="color:#65B042;">'</span><span style="color:#65B042;">'</span></span> <span style="color:#E28964;">do </span>|<span style="color:#3E87E3;">out</span>|
    <span style="color:#E28964;">unless</span> spinner <span style="color:#E28964;">=</span> options.<span style="color:#89BDFF;">delete</span>(<span style="color:#3387CC;"><span style="color:#3387CC;">:</span>spinner</span>)
      spinner <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">&quot;</span><span style="color:#DAEFA3;"><span style="color:#DAEFA3;">#{</span>element_id<span style="color:#DAEFA3;">}</span></span>_spinner<span style="color:#65B042;">&quot;</span></span>
      out <span style="color:#E28964;">&lt;&lt;</span> <span style="color:#89BDFF;">image_tag</span>(<span style="color:#65B042;"><span style="color:#65B042;">'</span>spinner.gif<span style="color:#65B042;">'</span></span>, <span style="color:#3387CC;"><span style="color:#3387CC;">:</span>id</span> =&gt; spinner, <span style="color:#3387CC;"><span style="color:#3387CC;">:</span>style</span> =&gt; <span style="color:#65B042;"><span style="color:#65B042;">'</span>display:none<span style="color:#65B042;">'</span></span>)
    <span style="color:#E28964;">end</span>
    options[<span style="color:#3387CC;"><span style="color:#3387CC;">:</span>complete</span>] <span style="color:#E28964;">=</span> <span style="color:#65B042;"><span style="color:#65B042;">&quot;</span>$('<span style="color:#DAEFA3;"><span style="color:#DAEFA3;">#{</span>spinner<span style="color:#DAEFA3;">}</span></span>').hide(); <span style="color:#65B042;">&quot;</span></span> <span style="color:#E28964;">+</span> (options[<span style="color:#3387CC;"><span style="color:#3387CC;">:</span>complete</span>] <span style="color:#E28964;">||</span> <span style="color:#65B042;"><span style="color:#65B042;">&quot;</span>$('<span style="color:#DAEFA3;"><span style="color:#DAEFA3;">#{</span>container_id<span style="color:#DAEFA3;">}</span></span>').show()<span style="color:#65B042;">&quot;</span></span>)
    
    out <span style="color:#E28964;">&lt;&lt;</span> <span style="color:#89BDFF;">link_to_remote</span>(title, { <span style="color:#3387CC;"><span style="color:#3387CC;">:</span>loading</span> =&gt; <span style="color:#65B042;"><span style="color:#65B042;">&quot;</span>$('<span style="color:#DAEFA3;"><span style="color:#DAEFA3;">#{</span>container_id<span style="color:#DAEFA3;">}</span></span>').hide(); $('<span style="color:#DAEFA3;"><span style="color:#DAEFA3;">#{</span>spinner<span style="color:#DAEFA3;">}</span></span>').show()<span style="color:#65B042;">&quot;</span></span> }.<span style="color:#89BDFF;">merge</span>(options),
                                 { <span style="color:#3387CC;"><span style="color:#3387CC;">:</span>id</span> =&gt; element_id })
  <span style="color:#E28964;">end</span>
<span style="color:#E28964;">end</span>
</pre>
          </div>
        </div>

<a href="http://refactormycode.com/codes/13-link_to_remote_with_spinner" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://refactormycode.com/images/small_logo.gif" style="border:0" /></a>

counter free hit invisible