index.html.erb

index.html.erb

<div class="row">
  <script type="text/javascript">
      $(document).ready(function () {
          var states = document.getElementsByClassName('state_li')

          for(var i = 0; i < states.length; i++) {
            states[i].addEventListener('click', click_state, false);
          }

          function get_parliamentarians(value) { // value = state acronym
              $.ajax({
                  url: "/parliamentarians/parliamentarians_per_state",
                  type: "GET",
                  dataType: "json",
                  data: {"state": value},
                  success: function (response) {
                    console.log("sucesso");
                  },
                  error: function () {
                    console.log("erro");
                  }
              });
          }

          function click_state() {
            var value = $(this).text();

            get_parliamentarians(value.trim());
          }
      });
  </script>

  <div class="small-12 columns">
    <div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
        <div class="large-0 pull-0 columns">
          <nav class="top-bar show-for-medium-up" data-topbar>
            <dl class="sub-nav">
            <nav class="top-bar show-for-medium-up" data-topbar>
              <ul class="title-area">
              <li class="name">
                <h1><a href="#">Perfil Parlamentar</a></h1>
              </li>
              <dd><a href="#"><button data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Estados &raquo;</button></a></dd>
              <dd><a href="#"><button data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Partidos &raquo;</button></a></dd>
              <!-- <dd><a href="#">Suspended</a></dd>
              <dd><a href="#">Suspended</a></dd> -->
            </dl>
            <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
              <ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
              <div style="height:400px;line-height:3em;overflow:scroll;padding:3px;">
                <% @ordened_states.each do |p| %>
                  <li> <a class="state_li"> <%= p.state %> </a> </li>
                <%end%>
              </ul>
            </ul>
            <ul id="drop2" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
              <ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
              <div style="height:400px;line-height:3em;overflow:scroll;padding:3px;">
                <% @ordened_partys.each do |p| %>
                  <li> <%= link_to @selected_party, p.party %> </li>
                <%end%>
              </ul>
            </ul>

          <section class="top-bar-section">
            <!-- Right Nav Section -->
          </section>
        </nav>
        <nav class="tab-bar show-for-small">
          <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
          </section>
          <section class="middle tab-bar-section">
            <h1 class="title">Offcanvas for Small</h1>
          </section>
        </nav>
        <aside class="left-off-canvas-menu">
          <ul class="off-canvas-list">
            <li><label>Foundation</label></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </aside>
          <%= form_tag parliamentarians_path, :method => 'get' do %>
             <div class="row">
                <div class="small-8">
                  <p><div class="small-8 columns">
                    <%= text_field_tag :search, params[:search], id:"right-label", placeholder: "Nome do Parlamentar" %>
                  </div></p>
                  <div class="small-3 columns">
                    <%= submit_tag "Buscar", :name => nil , class: "button postfix" %>
                  </div>
              </div>
            </div>
          <% end %>
          <% if !params[:search].nil? %>
          <div style="width:930px;height:800px;line-height:3em;overflow:scroll;padding:5px;">
          <ul>
            <% @parliamentarians.each do |p| %>
              <p>
              <center><span><img src="<%= p.url_photo %>"/></span></center>
              <center><b><%= link_to p.name, profile_path(p)%></b></center>
              <li><right>Partido: <%= p.party %></right>
              </p>
            <%end%>
          </ul>
        </div>
        <%end%>
       <a class="exit-off-canvas"></a>
       </div>
     </div>
   </div>
</div>