1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[1144],{2209:function(e,a,n){n.r(a),n.d(a,{Head:function(){return E},default:function(){return b}});var t=n(28453),s=n(96540);function o(e){const a=Object.assign({h1:"h1",a:"a",span:"span",p:"p",strong:"strong",h2:"h2",ol:"ol",li:"li"},(0,t.R)(),e.components);return s.createElement(s.Fragment,null,s.createElement(a.h1,{id:"tldr",style:{position:"relative"}},s.createElement(a.a,{href:"#tldr","aria-label":"tldr permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"TLDR"),"\n",s.createElement(a.p,null,"Here's an easy way to have all your SimpleForm submit buttons default to\nsetting ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">data-disable-with</code>'}})," so that you don't get errors when users\ndouble click on submit buttons. If you've gotten a few\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ActiveRecord::RecordNotUnique</code>'}})," errors that were hard to reproduce, then\nhere's your solution, with our without SimpleForm. Additionally, using\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">data-disable-with</code>'}})," provides the user with nice feedback once a button\nis clicked."),"\n",s.createElement(a.h1,{id:"activerecordrecordnotunique-error",style:{position:"relative"}},s.createElement(a.a,{href:"#activerecordrecordnotunique-error","aria-label":"activerecordrecordnotunique error permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"ActiveRecord::RecordNotUnique Error!"),"\n",s.createElement(a.p,null,"If you're using Devise, and you get a ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ActiveRecord::RecordNotUnique</code>'}}),"\nerror when a new user is signing up, where do you look?"),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="example"><pre class="language-example"><code class="language-example">An ActiveRecord::RecordNotUnique occurred in registrations#create:\n\nPG::UniqueViolation: ERROR: duplicate key value violates unique constraint\n"index_users_on_email" DETAIL: Key (email)=([email protected]) already\nexists. : INSERT INTO "users" ("address", "city", "confirmation_sent_at",\n"confirmation_token", "created_at", "default_location_id", "email",\n"encrypted_password", "first_name", "last_name", "mobile", "role", "state",\n"updated_at", "zip_code") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11,\n$12, $13, $14, $15) RETURNING "id"</code></pre></div>'}}),"\n",s.createElement(a.p,null,"At first, I was concerned that my unique index on my users table is not\ncase insensitive. I started going down the road of converting my normal\nunique index on users.email to this index:"),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="sql"><pre class="language-sql"><code class="language-sql"><span class="token keyword">CREATE</span> <span class="token keyword">UNIQUE</span> <span class="token keyword">INDEX</span> users_email_ci_idx <span class="token keyword">ON</span> users <span class="token punctuation">(</span><span class="token punctuation">(</span>lower<span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",s.createElement(a.p,null,"However, I soon figured out that Devise was already always saving email\nin the database in lower case via a ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">before_validation</code>'}})," hook."),"\n",s.createElement(a.p,null,"So then I tried to double click the ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">SAVE</code>'}})," button, and, ",s.createElement(a.strong,null,"BOOM"),", I got\nthe same error."),"\n","\n",s.createElement(a.h1,{id:"data-disable-withprocessing",style:{position:"relative"}}
1,s.createElement(a.a,{href:"#data-disable-withprocessing","aria-label":"data disable withprocessing permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"data-disable-with='Processingâ¦'"),"\n",s.createElement(a.p,null,'A little bit of googling quickly revealed some handy rails techniques\ndisabling a submit button after being clicked, namely the setting of\nattribute data-disable-with: "Some Messageâ¦" on both links and buttons.\nThis works nicely to fix the double submit RecordNotUnique error, and it\nprovides some sweet user feedback upon clicking a button. Here\'s an\nexample of a ',s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">SAVE</code>'}})," button."),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 502px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/d6306bab0f6783373ad94ac54a10af97/6f76c/image1.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 14.361702127659576%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAADABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAdywSD//xAAWEAEBAQAAAAAAAAAAAAAAAAABERD/2gAIAQEAAQUCAkM//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGBAAAgMAAAAAAAAAAAAAAAAAABARIWH/2gAIAQEAAT8hjKMl/9oADAMBAAIAAwAAABCDz//EABYRAQEBAAAAAAAAAAAAAAAAAAEQEf/aAAgBAwEBPxAXJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQABBQAAAAAAAAAAAAAAAAEhABARMUH/2gAIAQEAAT8QEXBiVaARJGrf/9k=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="image1"\n title=""\n src="/static/d6306bab0f6783373ad94ac54a10af97/6f76c/image1.jpg"\n srcset="/static/d6306bab0f6783373ad94ac54a10af97/bc01b/image1.jpg 188w,\n/static/d6306bab0f6783373ad94ac54a10af97/bf173/image1.jpg 375w,\n/static/d6306bab0f6783373ad94ac54a10af97/6f76c/image1.jpg 502w"\n sizes="(max-width: 502px) 100vw, 502px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",s.createElement(a.p,null,"Immediately after clicking the ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">SAVE</code>'}})," button, the button disables and\nthe text changes."),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 473px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/c6d22b43fade09910d1aa7eeffd5ba02/b96f8/image2.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 16.48936170212766%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAADABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdyYtQn/xAAYEAACAwAAAAAAAAAAAAAAAAABMQACEv/aAAgBAQABBQLIhdV//8QAFhEBAQEAAAAAAAAAAAAAAAAAAAEC/9oACAEDAQE/Acq//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAGRABAAIDAAAAAAAAAAAAAAAAAQARMVGh/9oACAEBAAE/IVG07DQDUwz/2gAMAwEAAgADAAAAEPQf/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEhMf/aAAgBAwEBPxBKaZ//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPxCn/8QAGRABAAMBAQAAAAAAAAAAAAAAAQARMSGR/9oACAEBAAE/EGyFd6hXgDFs9Zc//9k=\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="image2"\n title=""\n src="/static/c6d22b43fade09910d1aa7eeffd5ba02/b96f8/image2.jpg"\n srcset="/static/c6d22b43fade09910d1aa7eeffd5ba02/bc01b/image2.jpg 188w,\n/static/c6d22b43fade09910d1aa7eeffd5ba02/bf173/image2.jpg 375w,\n/static/c6d22b43fade09910d1aa7eeffd5ba02/b96f8/image2.jpg 473w"\n sizes="(max-width: 473px) 100vw, 473px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",s.createElement(a.h2,{id:"buttons",style:{position:"relative"}}
1,s.createElement(a.a,{href:"#buttons","aria-label":"buttons permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Buttons"),"\n",s.createElement(a.p,null,"Example and API:\n",s.createElement(a.a,{href:"http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-button_tag"},"button_tag")),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><%= button_tag "Checkout", data: { disable_with => "Please wait..." } %></code></pre></div>'}}),"\n",s.createElement(a.h2,{id:"links",style:{position:"relative"}},s.createElement(a.a,{href:"#links","aria-label":"links permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Links"),"\n",s.createElement(a.p,null,"Example and API:\n",s.createElement(a.a,{href:"http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to?q%3Dlink_to"},"link_to")),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><%= link_to "Profile", profile_path(@profile), data: { disable_with: "Processsing..." } %></code></pre></div>'}}),"\n",s.createElement(a.h2,{id:"simpleform-submit-buttons",style:{position:"relative"}},s.createElement(a.a,{href:"#simpleform-submit-buttons","aria-label":"simpleform submit buttons permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"SimpleForm Submit Buttons"),"\n",s.createElement(a.p,null,"Even better, this can be done in one place for all SimpleForm submit\nbuttons!"),"\n",s.createElement(a.p,null,"In a file like ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">config/simple_form.rb</code>'}}),", place this initialization code:"),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="ruby"><pre class="language-ruby"><code class="language-ruby">SimpleForm<span class="token double-colon punctuation">::</span>FormBuilder<span class="token punctuation">.</span>class_eval <span class="token keyword">do</span>\n <span class="token keyword">def</span> <span class="token method-definition"><span class="token function">
1submit_with_override</span></span><span class="token punctuation">(</span>field<span class="token punctuation">,</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>\n data_disable_with <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token symbol">disable_with</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">\'Processing...\'</span></span> <span class="token punctuation">}</span>\n options<span class="token punctuation">[</span><span class="token symbol">:data</span><span class="token punctuation">]</span> <span class="token operator">=</span> data_disable_with<span class="token punctuation">.</span>merge<span class="token punctuation">(</span>options<span class="token punctuation">[</span><span class="token symbol">:data</span><span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>\n submit_without_override<span class="token punctuation">(</span>field<span class="token punctuation">,</span> options<span class="token punctuation">)</span>\n <span class="token keyword">end</span>\n alias_method_chain <span class="token symbol">:submit</span><span class="token punctuation">,</span> <span class="token symbol">:override</span>\n<span class="token keyword">end</span></code></pre></div>'}}),"\n",s.createElement(a.p,null,"What the bit of code above does is that it:"),"\n",s.createElement(a.ol,null,"\n",s.createElement(a.li,null,"Opens up the FormBuilder class to add a method\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">submit_with_override</code>'}}),"."),"\n",s.createElement(a.li,null,"Modifies options hash's :data element, setting a default value for\nkey ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">disable_with</code>'}})," that will not apply if there's already a value\nthere, thus allowing the default to be overridden by any individual\nbutton."),"\n",s.createElement(a.li,null,"Calls\n",s.createElement(a.a,{href:"http://apidock.com/rails/Module/alias_method_chain"},"alias_methodchain"),"\nwhich makes is so that a call to submit actually calls\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">submit_with_override</code>'}})," and that method can call\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">submit_without_override</code>'}}),", which is the original ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">submit</code>'}})," method.\nThe pattern of naming the methods ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">with_override</code>'}})," and\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">without_override</code>'}})," is part of the ",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">alias_method_chain</code>'}})," call. Pretty\ndarn cool!"),"\n"),"\n",s.createElement(a.p,null,'Here\'s a sample sign-up form that overrides the default "Processingâ¦"\nlabel when the ',s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">SAVE</code>'}})," button is clicked."),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="haml"><pre class="language-haml"><code class="language-haml"><span class="token tag">.box.clearfix.box-last</span>\n <span class="token punctuation">=</span><span class="token multiline-code"> simple_form_for resource<span class="token punctuation">,</span> <span class="token symbol">as</span><span class="token operator">:</span> resource_name<span class="token punctuation">,</span> <span class="token symbol">url</span><span class="token operator">:</span> registration_path<span class="token punctuation">(</span>resource_name<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token symbol">html</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">""</span></span><span class="token punctuation">}</span> <span class="token keyword">do</span> <span class="token operator">|</span>f<span class="token operator">|</span></span>\n <span class="token punctuation">=</span><span class="token code"> f<span class="token punctuation">.</span>error_notification</span>\n <span class="token punctuation">=</span><span class="token code"> f<span class="token punctuation">.</span>input <span class="token symbol">:first_name</span><span class="token punctuation">,</span> <span class="token symbol">required</span><span class="token operator">:</span> <span class="token boolean">
1false</span><span class="token punctuation">,</span> <span class="token symbol">autofocus</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token symbol">label_html</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">"label-required"</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token symbol">input_html</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">".col-md-4"</span></span> <span class="token punctuation">}</span></span>\n <span class="token punctuation">=</span><span class="token code"> f<span class="token punctuation">.</span>input <span class="token symbol">:last_name</span><span class="token punctuation">,</span> <span class="token symbol">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token symbol">label_html</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">"label-required"</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token symbol">input_html</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">".col-md-4"</span></span> <span class="token punctuation">}</span></span>\n <span class="token punctuation">=</span><span class="token code"> f<span class="token punctuation">.</span>input <span class="token symbol">:email</span><span class="token punctuation">,</span> <span class="token symbol">required</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token symbol">label_html</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">"label-required"</span></span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token symbol">input_html</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">".col-md-4"</span></span> <span class="token punctuation">}</span></span>\n <span class="token punctuation">=</span><span class="token code"> f<span class="token punctuation">.</span>button <span class="token symbol">:submit</span><span class="token punctuation">,</span> <span class="token string-literal"><span class="token string">"SAVE"</span></span><span class="token punctuation">,</span> <span class="token symbol">class</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">"submit"</span></span><span class="token punctuation">,</span> <span class="token symbol">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token symbol">disable_with</span><span class="token operator">:</span> <span class="token string-literal"><span class="token string">"Creating New Account..."</span></span> <span class="token punctuation">}</span></span></code></pre></div>'}}),"\n",s.createElement(a.p,null,'Now go and click on some of your submit buttons, and they will all\ndisable and display "Processingâ¦". On a remote form that returned\n',s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">js.erb</code>'}}),", I had to send back this line to reset the submit button:"),"\n",s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#js-some-button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAttr</span><span class="token punctuation">(</span><span class="token string">"disabled"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">\'value\'</span><span class="token punctuation">,</span> <span class="token string">\'ORIGINAL BUTTON TEXT\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",s.createElement(a.h1,{id:"references",style:{position:"relative"}}
1,s.createElement(a.a,{href:"#references","aria-label":"references permalink",className:"anchor before"},s.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"References"),"\n",s.createElement(a.p,null,"Stack Overflow Discussions:"),"\n",s.createElement(a.ol,null,"\n",s.createElement(a.li,null,s.createElement(a.a,{href:"http://stackoverflow.com/questions/11505801/prevent-double-submits-in-a-rails-ajax-form/20161880"},"Prevent Double Clicks in Rails Ajax\nForm")),"\n",s.createElement(a.li,null,s.createElement(a.a,{href:"http://stackoverflow.com/questions/11340843/default-disable-with-for-simple-form-submit/11610795#11610795"},"Default Disable With for Simple\nForm")),"\n",s.createElement(a.li,null,s.createElement(a.a,{href:"http://stackoverflow.com/questions/3160204/in-rails-controllers-how-to-prevent-double-submit-when-user-double-clic-submit"},"How to Prevent Double Submit in\nRails")),"\n"))}var l=function(e){void 0===e&&(e={});const{wrapper:a}=Object.assign({},(0,t.R)(),e.components);return a?s.createElement(a,e,s.createElement(o,e)):o(e)},c=n(5588),p=n(65427),r=n(20504),i=n(43397),A=n(61942);const u=e=>e.replace(/\/+$/,""),d=(e,a)=>a?""+e+(a.startsWith("/")?a:"/"+a):e,m=(e,a)=>d(u(e),a),g=(e,a)=>d((e=>"undefined"!=typeof window?window.location.origin:u(e))(e),a),h=(e,a)=>{const n=(0,c.d)(a);return n?m(e,n):(e=>m(e,"/shakacode-og.png"))(e)},k=e=>{let{data:a,location:n,children:t}=e;const{frontmatter:o}=a.mdx,{siteUrl:l}=a.site.siteMetadata,c=g(l,n.pathname);return s.createElement(s.Fragment,null,s.createElement(p.A,null),s.createElement(r.A,{header:s.createElement(A.r,{breadcrumb:o.title}),main:s.createElement(s.Fragment,null,s.createElement(A.c,{body:t,title:o.title,author:o.author,date:o.date,link:c,categories:o.categories,featuredImage:o.featuredImage,showFeaturedImage:o.showFeaturedImage}),s.createElement(i.LN,null))}))};function b(e){return s.createElement(k,e,s.createElement(l,e))}const E=e=>{let{data:a,location:n}=e;const{frontmatter:t,excerpt:o}=a.mdx,{siteMetadata:l}=a.site,{siteUrl:c,title:p,description:r}=l,i=((e,a,n)=>e.excerpt||a||n)(t,o,r),A=h(c,t.featuredImage),u=m(c,n.pathname);return s.createElement(s.Fragment,null,s.createElement("title",null,t.title+" | "+p),s.createElement("link",{rel:"canonical",href:u}),s.createElement("meta",{name:"description",content:i}),s.createElement("meta",{property:"og:title",content:t.title}),s.createElement("meta",{property:"og:description",content:i}),s.createElement("meta",{property:"og:type",content:"article"}),s.createElement("meta",{property:"og:url",content:u}),s.createElement("meta",{property:"og:image",content:A}),s.createElement("meta",{name:"image",content:A}),s.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),s.createElement("meta",{name:"twitter:title",content:t.title}),s.createElement("meta",{name:"twitter:description",content:i}),s.createElement("meta",{name:"twitter:image",content:A}))}}}]); 2//# sourceMappingURL=component---src-template-blog-article-tsx-content-file-path-src-posts-simple-form-and-disable-processing-by-default-index-mdx-18863804b76aa9cd3763.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.