{"id":1067,"date":"2015-01-29T11:47:35","date_gmt":"2015-01-29T06:17:35","guid":{"rendered":"http:\/\/www.allerin.com\/blog\/?p=1067"},"modified":"2016-05-12T15:12:28","modified_gmt":"2016-05-12T09:42:28","slug":"inline-updatable-input-fields","status":"publish","type":"post","link":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/","title":{"rendered":"Inline Updatable Input Fields"},"content":{"rendered":"<p>While working on rails applications, we face the requirement of,\u00a0 updating some attributes of an object without reloading page, quite often.<\/p>\n<p>For example updating a value of a record in the grid by checking or unchecking a checkbox.<\/p>\n<p>Often\u00a0 time we write functions that will take attribute name and the using Ajax we perform the required action. With this approach, we end up writing multiple js functions for collecting and updating attribute for different such updatable input fields. Such duplication of code at multiple places for the same behaviour is not good. Instead, a single technique can be used at all the places so that the code will be easy to maintain.<\/p>\n<p>Let\u2019s have a look at following simple approach.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>STEP-1:<\/strong><\/p>\n<p>Add following function to application.js<\/p>\n<pre>$('.submittable').livequery('change', function() {\r\n\r\n$(this).closest('form').submit();\r\n\r\n});\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>STEP-2:<\/strong><\/p>\n<p>Add routes for updating user&#8217;s is_active attribute<\/p>\n<pre>\r\nresources :users do\r\n\r\nput :update_is_active, :on =&gt; :member\r\n\r\nend\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>STEP-3:<\/strong><\/p>\n<p>Add action to update the is_active attribute of a particular user.<\/p>\n<pre>\r\nclass UsersController &lt; ApplicationController\r\n\r\ndef update_is_active\r\n\r\n@user = User.find(params[:id])\r\n\r\n@user.update_attributes(params[:user])\r\n\r\nend\r\n\r\nend\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>STEP-4:<\/strong><\/p>\n<p>Modify your table to have form in the td having checkbox.<\/p>\n<p>When we check change the checkbox value the form will be submitted.<\/p>\n<pre>\r\n.flash-message\r\n\r\n%table\r\n\r\n%thead\r\n\r\n%th Name\r\n\r\n%th Active\r\n\r\n%tbody\r\n\r\n- @users.each do |user|\r\n\r\n%tr\r\n\r\n%td= user.name\r\n\r\n%td\r\n\r\n= form_for user, :url =&gt; update_is_active_user_url(user), :remote =&gt; true do |f|\r\n\r\n= f.check_box :is_active, {:class =&gt; 'submittable', :id =&gt; \"user_#{user.id}\"}, true, false\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>STEP-5:<\/strong><\/p>\n<p>As per the submission of the form and on the update of the record the message can be shown.<\/p>\n<p>In update_is_active.js.erb<\/p>\n<pre>\r\n$(\u2018<\/pre>\n<div>User updated successfully!<\/div>\n<p>\u2019).insertBefore(\u2018.flash-message\u2019).fadeOut(3000); &lt;% else %&gt; $(\u2018<\/p>\n<div>User could not be updated!<\/div>\n<p>\u2019).insertBefore(\u2018.flash-message\u2019).fadeOut(3000); $(\u2018.submittable#user_\u2019 + &lt;%= @user.id %&gt;).prop(\u2018checked\u2019, false); &lt;% end %&gt;<\/p>\n<p>On change after submission of the form you can do desired functionalities.<\/p>\n<p>You can also add css effects or any animation for success\/error message.<\/p>\n<p>&nbsp;<\/p>\n<p>This technique is also good for Radio buttons and Select list.<\/p>\n<p>Above is simple example for demo only but can be applied very effectively in complex contexts too.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working on rails applications, we face the requirement of,\u00a0 updating some attributes of an object without reloading page, quite often. For example updating a value of a record in&#8230;<\/p>\n","protected":false},"author":9192191,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[4],"tags":[10,16,20],"class_list":["post-1067","post","type-post","status-publish","format-standard","hentry","category-my-voice","tag-rails","tag-ruby","tag-ruby-on-rails"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Inline Updatable Input Fields in Rails<\/title>\n<meta name=\"description\" content=\"Here I talk about Inline Updatable Input Fields in Rails showing different methods and use cases, which may vary depending upon the need.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inline Updatable Input Fields\" \/>\n<meta property=\"og:description\" content=\"While working on rails applications, we face the requirement of,\u00a0 updating some attributes of an object without reloading page, quite often. For example\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"Artificial Intelligence, ROBOTICS, AUTOMATION\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/allerintech\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-29T06:17:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-12T09:42:28+00:00\" \/>\n<meta name=\"author\" content=\"Temp User\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Temp User\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/\"},\"author\":{\"name\":\"Temp User\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#\\\/schema\\\/person\\\/1800305fd7a4b1da6e13bbb42425cf27\"},\"headline\":\"Inline Updatable Input Fields\",\"datePublished\":\"2015-01-29T06:17:35+00:00\",\"dateModified\":\"2016-05-12T09:42:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/\"},\"wordCount\":293,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#organization\"},\"keywords\":[\"rails\",\"ruby\",\"Ruby on Rails\"],\"articleSection\":[\"My Voice\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/\",\"url\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/\",\"name\":\"Inline Updatable Input Fields in Rails\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-01-29T06:17:35+00:00\",\"dateModified\":\"2016-05-12T09:42:28+00:00\",\"description\":\"Here I talk about Inline Updatable Input Fields in Rails showing different methods and use cases, which may vary depending upon the need.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/inline-updatable-input-fields\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inline Updatable Input Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/\",\"name\":\"Artificial Intelligence, ROBOTICS, AUTOMATION\",\"description\":\"Empowering Futures: Innovating with AI and Machine Learning\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#organization\",\"name\":\"Allerin\",\"url\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/logo-fire.png\",\"contentUrl\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/logo-fire.png\",\"width\":1000,\"height\":1000,\"caption\":\"Allerin\"},\"image\":{\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/allerintech\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/allerintech\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/#\\\/schema\\\/person\\\/1800305fd7a4b1da6e13bbb42425cf27\",\"name\":\"Temp User\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g\",\"caption\":\"Temp User\"},\"url\":\"https:\\\/\\\/www.allerin.com\\\/blog\\\/author\\\/tempuser\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Inline Updatable Input Fields in Rails","description":"Here I talk about Inline Updatable Input Fields in Rails showing different methods and use cases, which may vary depending upon the need.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/","og_locale":"en_US","og_type":"article","og_title":"Inline Updatable Input Fields","og_description":"While working on rails applications, we face the requirement of,\u00a0 updating some attributes of an object without reloading page, quite often. For example","og_url":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/","og_site_name":"Artificial Intelligence, ROBOTICS, AUTOMATION","article_publisher":"https:\/\/www.facebook.com\/allerintech","article_published_time":"2015-01-29T06:17:35+00:00","article_modified_time":"2016-05-12T09:42:28+00:00","author":"Temp User","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Temp User","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/#article","isPartOf":{"@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/"},"author":{"name":"Temp User","@id":"https:\/\/www.allerin.com\/blog\/#\/schema\/person\/1800305fd7a4b1da6e13bbb42425cf27"},"headline":"Inline Updatable Input Fields","datePublished":"2015-01-29T06:17:35+00:00","dateModified":"2016-05-12T09:42:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/"},"wordCount":293,"commentCount":0,"publisher":{"@id":"https:\/\/www.allerin.com\/blog\/#organization"},"keywords":["rails","ruby","Ruby on Rails"],"articleSection":["My Voice"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/","url":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/","name":"Inline Updatable Input Fields in Rails","isPartOf":{"@id":"https:\/\/www.allerin.com\/blog\/#website"},"datePublished":"2015-01-29T06:17:35+00:00","dateModified":"2016-05-12T09:42:28+00:00","description":"Here I talk about Inline Updatable Input Fields in Rails showing different methods and use cases, which may vary depending upon the need.","breadcrumb":{"@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.allerin.com\/blog\/inline-updatable-input-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.allerin.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Inline Updatable Input Fields"}]},{"@type":"WebSite","@id":"https:\/\/www.allerin.com\/blog\/#website","url":"https:\/\/www.allerin.com\/blog\/","name":"Artificial Intelligence, ROBOTICS, AUTOMATION","description":"Empowering Futures: Innovating with AI and Machine Learning","publisher":{"@id":"https:\/\/www.allerin.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.allerin.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.allerin.com\/blog\/#organization","name":"Allerin","url":"https:\/\/www.allerin.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.allerin.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.allerin.com\/blog\/wp-content\/uploads\/2016\/06\/logo-fire.png","contentUrl":"https:\/\/www.allerin.com\/blog\/wp-content\/uploads\/2016\/06\/logo-fire.png","width":1000,"height":1000,"caption":"Allerin"},"image":{"@id":"https:\/\/www.allerin.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/allerintech","https:\/\/www.linkedin.com\/company\/allerintech"]},{"@type":"Person","@id":"https:\/\/www.allerin.com\/blog\/#\/schema\/person\/1800305fd7a4b1da6e13bbb42425cf27","name":"Temp User","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/194a42e22f3078426d730e84e0c45af551304b674cd9cf8b99a0e26d09b974e8?s=96&d=mm&r=g","caption":"Temp User"},"url":"https:\/\/www.allerin.com\/blog\/author\/tempuser\/"}]}},"_links":{"self":[{"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/users\/9192191"}],"replies":[{"embeddable":true,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":5,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1389"}],"wp:attachment":[{"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.allerin.com\/blog\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}