For now, the main way to add dynamic content to a webpage is with JavaScript.\u00a0Ideally, we want to update a site\u2019s contents from the server without reloading the page. Let\u2019s take a look at how we can accomplish this with AJAX in Rails.<\/p>\n
Now, many of the brief AJAX examples I\u2019ve come across show variations of retrieving collections of data from the server. You would then handle that data in JavaScript to manipulate your page.<\/p>\n
The logical conclusion seems to be to learn a front-end JavaScript framework, but I\u2019ve never liked the idea of having to write a separate front end and back end to a website when it would be simplest to have just one code base for one site.\u00a0This really seems like overkill for web design.<\/p>\n
But then I came across UJS in Rails, and it solved my need to have just one code base for website design. Unobtrusive JavaScript is generally known as writing your JavaScript outside of your HTML\u2019s page structure so as to not\u00a0pollute\u00a0your HTML structure.<\/p>\n
Overall, I was quite surprised at how easy it is in Rails to have a dynamic website.\u00a0The way Rails has incorporated AJAX does more than what my earlier research had suggested AJAX was for and what it could do.\u00a0The beauty of it is that I can run my JavaScript from the server on the client\u2019s browser without any complicated AJAX response processing.\u00a0This makes me happy.<\/p>\n
Now along with the benefit of having one code base, we also have jQuery included in Rails. jQuery offers a higher level of JavaScript methods designed to work the same\u00a0across all browsers, and it allows for cleaner and more legible code.\u00a0If you add Twitter\u2019s Bootstrap with this, you can also integrate many common components into your user\u2019s experience that are also cross-browser compliant. If you style your website with jQuery and Bootstrap, you can worry less about what the site will look like in each browser and spend more time thinking about the user\u2019s experience.<\/p>\n
In Rails, submitting an AJAX request can be done as easily as adding remote: true<\/strong> to a link, button, or form. From there you can have any response be some JavaScript code waiting on the server side, and it will execute in the client\u2019s browser.\u00a0Here\u2019s the simplest code example of UJS via AJAX in a link.<\/p>\n Assuming you have a resource generated in Rails, let\u2019s modify the show route to pop up an alert of the current ID set in a parameter. We\u2019ll call the resource Thing<\/strong>.\u00a0The show resource for Thing<\/strong> routes from \/things\/:id<\/strong>, so \/things\/1<\/strong> would set the parameter :id<\/strong> to 1.\u00a0Make sure the controller\u2019s before_action<\/strong> doesn\u2019t set_thing<\/strong> for the :show<\/strong> method for this example. Modify the :show<\/strong> method as follows in ThingsController<\/strong>.<\/p>\n In the index page view for Thing<\/strong>, we\u2019ll create a link that calls the show resource via AJAX.<\/p>\n When you visit your index page, you will see a link that says Number Alert<\/em>.\u00a0Click it, and an AJAX request is sent to the show route for Thing<\/strong>.\u00a0The :id<\/strong> parameter is set from the router, and the controller renders the JavaScript response and alerts the user that \u201cThe number is: 42.\u201d<\/p>\n And there\u2019s the beauty of it.\u00a0You didn\u2019t have to write anything to handle an AJAX response.\u00a0You simply wrote JavaScript, and it just works.\u00a0But it gets better.<\/p>\n Unless you\u2019re writing some very short JavaScript responses, you won\u2019t want to be putting JavaScript directly in your controller.\u00a0If we rename our default show template for Thing<\/strong> from show.html.erb<\/strong> to show.js.erb<\/strong>, we can drop our JavaScript in there, remove the render command from the controller, and we get the same behavior.<\/p>\n And the view for show with erb substitution would be written as:<\/p>\n Clicking the link will produce the same result:\u00a0\u201cThe number is: 42.\u201d<\/p>\n To create the dynamic content we want, we need to target the individual areas of our webpage that we\u2019d like to change.\u00a0For this, we\u2019ll start using jQuery with CSS selectors to select the part of the page to change. CSS selectors refer to HTML document parts by either their pure HTML tag name, their id label proceeded\u00a0by a pound sign, or class\u00a0proceeded\u00a0with a dot. We\u2019ll use the index page for the Thing<\/strong> model as an example.<\/p>\n Next we\u2019ll create a partial HTML page for replacing the content inside the div tags.<\/p>\n In our show template, we\u2019ll target the div id for the index page and render that partial content as HTML inside it.<\/p>\n If you click the Change Below<\/em> link, the content changes instantly from Now you see \u201cMe\u201d!<\/em> to Now you don\u2019t!<\/em><\/p>\n There\u2019s a lot happening here, so let me clarify the different parts in show.js.erb<\/strong>.\u00a0First of all, the dollar sign is a JavaScript reference to jQuery; the parenthesis that follows allows you to select a part of your webpage with a CSS selector.\u00a0In this case, we\u2019re selecting anything that has the id of target-for-change.<\/p>\n Next, we call the jQuery method on the selected part of the page to replace the HTML within the selected content to the string provided.\u00a0The ERB\u00a0part you see with render(partial: \u2018show\u2019)<\/strong> gets the HTML from _show.html.erb<\/strong>, and the j<\/strong> method string-escapes it in order to be acceptable as a proper string value in JavaScript.\u00a0Anytime you render a \u201cpartial,\u201d the file name will always be proceeded with an underscore so there is no confusion between _show.html.erb<\/strong> and show.js.erb<\/strong> in template rendering.<\/p>\n Now that you have the ability to dynamically update the content of your website with one code base, the possibilities are endless.\u00a0You can defer labor-intensive calculations to be displayed on a webpage after the page has already loaded, such as calculating unread messages or connection requests. If you have the server query the database to count all the records before sending the page, it will slow down page load time and create a bad user experience.<\/p>\n If instead you let the page load quickly and then trigger an AJAX request for a \u201cslow\u201d query, you won\u2019t interfere with the user\u2019s experience. Rather you\u2019ll improve it, and the content will update in no time.<\/p>\n When creating custom routes for your UJS requests, it\u2019s important to make sure you\u2019re using the right method of request.\u00a0I generally like to use the PATCH method for UJS requests. Along with adding remote: true<\/strong> to my links, buttons, or forms, I also add method: :patch<\/strong>.<\/p>\n I like to both scope UJS to \/ujs<\/strong> routes and declare in the routes that the format is :ujs<\/strong>.\u00a0This isn\u2019t strictly necessary, but I believe it\u2019s important to be clear about the intent of the routes in use.\u00a0The relevant part of the code here is simply the patch method, which routes to our ThingsController#totals<\/strong> method.<\/p>\n Next I\u2019ll demonstrate an index page with a dashboard that delays retrieving the totals from the server until after the page is loaded.<\/p>\n When the page first loads, the dashboard totals show a period as a link: Dashboard totals: .<\/strong><\/p>\n But once the page has fully loaded, the JavaScript from the javascript_tag<\/strong> gets executed.\u00a0Using jQuery, it selects everything with the class of dashboard-totals<\/strong> and then hits the link.\u00a0This submits the AJAX request for the link to the right controller action via the patch method, and the server returns the JavaScript response. This replaces the content inside the span tag with the appropriate value since it\u2019s identified as dashboard-totals<\/strong>. So the page seems to immediately have the value 42 for the dashboard total.\u00a0This is a great tool for deferred content loading!<\/p>\n Bootstrap has many kinds of components\u00a0you can inject into your page, some of which need to be called via a JavaScript method call to be seen, like the modal.<\/p>\n A modal in Bootstrap is like a windowed dialog that grays out your webpage as it comes into focus.\u00a0When you insert the HTML code into your page for a modal via an AJAX request, it\u2019s not visible until you activate it.\u00a0Since the code won\u2019t interfere with your page\u2019s layout, you may add an HTML tag to your main Rails layout page near the end of the body\u2019s content \u2014 something simple, like The details for how to implement all of Bootstrap\u2019s various features<\/a> are available here.\u00a0But as for the UJS view, you can simply enter another line to call the modal, and it promptly displays itself.<\/p>\n Another Bootstrap component I like using in order to dynamically load content is collapsible items. I defer some of the page\u2019s content with expand to see more<\/em> links, which will grab the information from the server, fill in the content, and then slide open the content in place as if it were hidden under a rug. This way you don\u2019t have to query the database for so much information all at once and make a big slow view. For example, you can show previews for each contact with details available via a click.<\/p>\n Anything you thought you would need a JavaScript front end framework for in Rails, you actually don\u2019t<\/em>. Rails really stands up as an all-in-one solution. You can also add the ability to dynamically write JavaScript with Opal or CoffeeScript, and then you\u2019re in quite a nice place to be.<\/p>\n Having one code base just makes sense when it comes to web design. And with Rails, you can have as dynamic a site as you want with a simple JavaScript template and the unseen AJAX communications all handled for you.<\/p>\n# \/app\/controllers\/things_controller.rb\r\nclass ThingsController < ApplicationController\r\n def show\r\n render js: \"alert('The number is: #{params[:id]}')\"\r\n end \r\nend<\/pre>\n<%# \/app\/views\/things\/index.html.erb %>\r\n<%= link_to 'Number Alert', thing_path(42), remote: true %><\/pre>\n
# \/app\/controllers\/things_controller.rb\r\nclass ThingsController < ApplicationController\r\n def show\r\n end \r\nend<\/pre>\n
<%# \/app\/views\/things\/show.js.erb %>\r\nalert('Number <%= params[:id] %>')<\/pre>\nTargeted Changes<\/h2>\n
<%# \/app\/views\/things\/index.html.erb %>\r\n<%= link_to 'Change Below', thing_path(42), remote: true %>\r\n\r\n<div id=\"target-for-change\">\r\n Now you see \"ME\"!\r\n<\/div><\/pre>\n
<%# \/app\/views\/things\/_show.html.erb %>\r\nNow you don't!<\/pre>\n
<%# \/app\/views\/things\/show.js.erb %>\r\n$(\"#target-for-change\").html(\"<%= j render(partial: 'show') %>\");<\/pre>\n
Design<\/h2>\n
# \/config\/routes.rb\r\nRails.application.routes.draw do\r\n resources :things\r\n\r\n scope :ujs, defaults: { format: :ujs } do\r\n patch 'thing_totals' => 'things#totals'\r\n end \r\nend<\/pre>\n# \/app\/views\/things_controller.rb\r\nclass ThingsController < ApplicationController\r\n def totals\r\n value = 42 # Some expensive database query\r\n render js: \"$('#dashboard-totals').html('#{value}')\"\r\n end \r\nend<\/pre>\n<%# \/app\/views\/things\/index.html.erb %>\r\n\r\nDashboard totals: <span id=\"dashboard-totals\"><%=\r\n link_to \".\",\r\n url_for({controller: \"things\", action: \"totals\"}),\r\n method: :patch, remote: true,\r\n class: \"dashboard-totals\"\r\n%><\/span>\r\n<%= javascript_tag '$(\".dashboard-totals\").click();' %><\/pre>\nBootstrap<\/h2>\n
<div id=\"target-modal\"><\/div><\/code>. This won\u2019t show up on your page, and once you fill the content with the modal, there is still no visible change to your page.<\/p>\n$(\"#target-modal\").html(\"<%= j render(partial: 'suggestions\/new_suggestion') %>\");\r\n$('#newSuggestionModal').modal();<\/pre>\nSummary<\/h2>\n