orbit4-5/app/views/admin/groups/categories.html.erb

<% content_for :page_specific_css do -%>
    <%= stylesheet_link_tag "lib/group/group-main" %>
    <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %>
    <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
<% end -%>
<% content_for :page_specific_javascript do -%>
    <%= javascript_include_tag "group.js" %>
<% end -%>

<ul class="group-category-tab nav nav-pills">
  <li class="active">
    <a class="group-category-tab-nav" href=".group-category-existing" data-toggle="tab">
      Existing categories
    </a>
  </li>
  <li>
    <a class="group-category-tab-nav" href=".group-category-request" data-toggle="tab">
      Request categories
    </a>
  </li>
</ul>  
<div class="group-category-tab-content tab-content">
  <div class="group-category-existing tab-pane fade in active">
      <%= render :partial => "group_categories" %>
  </div>
  <div class="group-category-request fade">
        <div class="group-category-item button button-primary">
          <i class="group-category-tag-icon fa fa-tag"></i>
          <a href="#">Request tag one</a>
          <span class="group-category-controls">
            <a href="#" class="group-category-approve tool-tip-parent">
              <i class="fa fa-check"></i>
              <span class="group-category-approve-tootip tool-tip">
                Approve
              </span>
            </a>
            <a href="#" class="group-category-reject tool-tip-parent">
              <i class="fa fa-times"></i>
              <span class="group-category-approve-tootip tool-tip">
                Reject
              </span>
            </a>
          </span>
        </div>
  </div>
</div>

  <div class="bottomnav clearfix">
    <div class="action pull-right">
      <a href="" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">Add new category</a>
    </div>
  </div>


<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog group-category-modal">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><%= t(:new_category) %></h4>
      </div>
      <div class="modal-body">
        <% @site_in_use_locales.each do |locale| %>
          <form class="form-horizontal">
          <div class="control-group">
            <label class="control-label"><%= "#{t(:name)} (#{t(locale)})" %></label>
            <div class="controls">
              <input class="input-large" id="<%=locale%>" name="category[title_translations][<%=locale%>]" placeholder="<%=t(:name)%>" type="text">
              <span class="help-inline hide">Please enter category title</span>
            </div>
          </form>
          </div>
        <% end %>
        <div class="text-error text-center"><%= t(:category_notice) %></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal"><%= t(:close) %></button>
        <button type="button" class="btn btn-primary" id="add_category"><%= t(:add) %></button>
      </div>
    </div>
  </div>
</div>
<div id="pageslide">
  <div class="page-title clearfix">
    <a class="pull-right" href="javascript:$.pageslide.close()">
      <i class="icons-arrow-left-2"></i>
    </a>
    <span></span>
  </div>
  <div class="view-page">
    <div class="nano">
      <div class="content">
        <%= form_for :category, url: nil, remote: true, :html=>{id: "category_form"} do |f| %>
          <fieldset>
            <%= f.fields_for :title_translations do |f| %>
              <% @site_in_use_locales.each do |locale| %>
                <div class="control-group">
                  <label class="control-label"><%= "#{t(:name)} (#{t(locale)})" %></label>
                  <div class="controls">
                    <input class="input-large" id="<%=locale%>" name="category[title_translations][<%=locale%>]" placeholder="<%=t(:name)%>" type="text">
                    <span class="help-inline hide"><%= t('front_page.name_field_helper') %></span>
                  </div>
                </div>
              <% end %>
            <% end %>
            <div class="form-actions">
              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t(:cancel) %></a>
              <%= f.submit t(:submit), class: 'btn btn-primary btn-small', id: "category_submit" %>
            </div>
          </fieldset>
        <% end %>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(function(){
    $("#add_category").click(createCategory);

    $("#categoryModal .modal-body").keypress(function(e) {
      if(e.which == 13) {
        createCategory();
        return false;
      }
    });

    $('.open-slide').on('click', function() {
        setForm($(this).data('form'));
    });

    $.each($('#categoryModal .input-large'),function(){
      $(this).blur(function(){
        if($(this).val()==""){
          $(this).parent().parent().addClass('error');
          $(this).next().removeClass('hide');
        }else{
          $(this).parent().parent().removeClass('error');
          $(this).next().addClass('hide');
        }
      });
    });
  });

  var createCategory = function(){
    var valid = true;
    $.each($('#categoryModal .input-large'),function(){
      if($(this).val()==""){
        $(this).parent().parent().addClass('error');
        $(this).next().removeClass('hide');
        valid = false;
      }else{
        $(this).parent().parent().removeClass('error');
        $(this).next().addClass('hide');
      }
    });

    if(valid){
      $.ajax({
        url : "/admin/groups/create_category",
        type : "post",
        data: $("input[name^='category']").serialize(),
      }).done(function(data){
        $.each($('#categoryModal .input-large'),function(){
          $(this).val("");
        });
        $("#group_categories").html(data);
        $('#categoryModal').modal('hide');
      });
    }
  }
</script>