{"id":3941,"date":"2015-05-05T13:22:09","date_gmt":"2015-05-05T17:22:09","guid":{"rendered":"http:\/\/webninjataylor.com\/library\/?p=3941"},"modified":"2015-05-05T17:26:59","modified_gmt":"2015-05-05T21:26:59","slug":"ruby-on-rails-javascript","status":"publish","type":"post","link":"https:\/\/webninjataylor.com\/library\/ruby-on-rails-javascript\/","title":{"rendered":"Ruby on Rails: JavaScript"},"content":{"rendered":"<ul>\n<li>Sample CoffeeScript AJAX\u00a0request&#8230;\n<pre>\/\/This code fetches data from \"\/test\", and then appends the result to the div with an id of results...\r\n$.ajax(url: \"\/test\").done (html) -&gt;\r\n $(\"#results\").append html<\/pre>\n<\/li>\n<li>Unobtrusive JavaScript is separating the script from the HTML markup<\/li>\n<li>Built-in helper methods\n<ul>\n<li><span class=\"code\">form_for<\/span> and <span class=\"code\">form_tag<\/span> &#8230; helps in writing forms\n<pre>\/\/ Remote submits the form via AJAX\r\n&lt;%= form_for(@article, remote: true) do |f| %&gt;\r\n ...\r\n&lt;% end %&gt;\r\n\r\n\/\/ JS ... tie into the success event\r\n$(document).ready -&gt;\r\n $(\"#new_article\").on(\"ajax:success\", (e, data, status, xhr) -&gt;\r\n $(\"#new_article\").append xhr.responseText\r\n ).on \"ajax:error\", (e, xhr, status, error) -&gt;\r\n $(\"#new_article\").append \"&lt;p&gt;ERROR&lt;\/p&gt;\"<\/pre>\n<\/li>\n<li><span class=\"code\">link_to<\/span> &#8230; can use <span class=\"code\">remote: true<\/span> to use AJAX<\/li>\n<li><span class=\"code\">button_to<\/span> &#8230; can use <span class=\"code\">remote: true<\/span> to use AJAX<\/li>\n<\/ul>\n<\/li>\n<li>Sample AJAX in controller&#8230;\n<pre># app\/controllers\/users_controller.rb\r\n# ......\r\ndef create\r\n @user = User.new(params[:user])\r\n \r\n respond_to do |format|\r\n   if @user.save\r\n     format.html { redirect_to @user, notice: 'User was successfully created.' }\r\n     format.js {}\r\n     format.json { render json: @user, status: :created, location: @user }\r\n   else\r\n     format.html { render action: \"new\" }\r\n     format.json { render json: @user.errors, status: :unprocessable_entity }\r\n   end\r\n end\r\nend<\/pre>\n<\/li>\n<\/ul>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"http:\/\/guides.rubyonrails.org\/working_with_javascript_in_rails.html\" target=\"_blank\">Working with JavaScript in Rails<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sample CoffeeScript AJAX\u00a0request&#8230; \/\/This code fetches data from &#8220;\/test&#8221;, and then appends the result to the div with an id of results&#8230; $.ajax(url: &#8220;\/test&#8221;).done (html) -&gt; $(&#8220;#results&#8221;).append html Unobtrusive JavaScript is separating the script from the HTML markup Built-in helper methods form_for and form_tag &#8230; helps in writing forms \/\/ Remote submits the form via [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[152],"class_list":["post-3941","post","type-post","status-publish","format-standard","hentry","category-web-shots","tag-ruby"],"_links":{"self":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/comments?post=3941"}],"version-history":[{"count":7,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3941\/revisions"}],"predecessor-version":[{"id":3949,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/posts\/3941\/revisions\/3949"}],"wp:attachment":[{"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/media?parent=3941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/categories?post=3941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webninjataylor.com\/library\/wp-json\/wp\/v2\/tags?post=3941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}