Simple Form, Simply Confused

While working on the Flex Blogger project, and studying the Bourbon website, in particular the refills side of the house, I liked the way their navigation bar looked.  In particular, I wanted to implement the search box feature.

So I grabbed their sample code and added it to the Flex Blogger project.  At first, I just brought over the raw html and eventually broke the code up into partials.  To keep things simple, I will focus on the syntax directly related to the search function, as seen below:

  <div class="navigation-tools">
      <div class="search-bar">
        <form role="search">
          <input type="search" placeholder="Enter Search" />
          <button type="submit">
            <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png" alt="Search Icon">
          </button>
        </form>
      </div>
      <a href="javascript:void(0)" class="sign-up">Sign Up</a>
    </div>
  </div>

In the Flex Blogger project, as with most of the Rails projects I have worked on, I've used simple form.  I use simple form simply because it was used in all the tutorials and learning material that I have digested.  So my mind focuses on simple form and I try to address any scenario that needs a form, by using *Simple Form*.

To help me work through my nav-bar search code, I refereneced some existing code in the Flex project, the category form partial:

// _form.html.erb
<div id="category-form">
  <%= simple_form_for(@category) do |f| %>
    <%= f.error_notification %> <div class="form-inputs">
      <%= f.input :description %>
    </div>
    <div class="form-actions">
      <%= f.button :submit %>
    </div>
  <% end %>
</div>
 

I struggled a bit trying to get the search in the nav bar to work with Simple Form.  After trying different things I reached out to a buddy, Shaun, who has helped me in the past.  We paired for a bit and after listening to what I was trying to do, and what I had tried, he asked me a *simple* question: "Why aren't you using a form_tag?"

Huh?  I thought that because I was using Simple Form that I needed to work within the boundaries of it.  I didn't realize that I could mix things when needed.  So off we went to the rails api and searched for 'form_tag'.

You should be able to find form_tag under the ActionView::Helpers::FormTagHelper section.  From the documentation:

form_tag(url_for_options = {}, options = {}, &block)

Starts a form tag that points the action to an url configured with url_for_options just like ActionController::Base#url_for. The method for the form defaults to POST.

After the lesson, and referring to the api docs, the solution we used was as follows:

// _search_bar.html.erb
<div class="navigation-tools">
  <div class="search-bar">
    <%= form_tag("/search") do %>
      <%= text_field_tag :query, nil, placeholder: "Enter Search", type: "search" %>
      <%= button_tag type: "submit", id: "search-query" do %>
        <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/search-icon.png", alt: "Search Icon" >
      <% end %>
    <% end %>
  </div>
</div>

I am *simply* amazed at how there is something new to learn just about everyday.  Just when I thought I was really comfortable with working things out with Rails/Ruby, I come across an opportunity to expand my ole grey matter.

Learn Something New Every Day

Last Edited by: John on November 14, 2015