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">
      Requested categories
    </a>
  </li>
</ul>  
<div class="group-category-tab-content tab-content">
  <div class="group-category-existing tab-pane fade in active" id="category_holder_box">
      <%= render :partial => "group_categories" %>
  </div>
  <div class="group-category-request fade" id="requested_category_holder_box">
      <%= render :partial => "group_requested_categories" %>
  </div>
</div>

  <div class="bottomnav clearfix">
    <div class="action pull-right">
      <% if current_user.is_admin? %>
        <a href="" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">Add new category</a>
      <% else %>
        <a href="" class="btn btn-primary" data-toggle="modal" data-target="#categoryModal">Request new category</a>
      <% end %>
    </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">
      <form class="form-horizontal" id="create_category_form">
        <% @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">Please enter category title</span>
            </div>
          </div>
        <% end %>
           <% if !current_user.is_admin? %>
            <input type="hidden" value="0" name="category[is_accepted]" />
           <% end %>
         </form>
        <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: "/admin/groups/", 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">
              <input type="hidden"  name="_method" value="patch" />
              <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">
  var bindOpenSlide = function(bind){
      $("a.open-slide").on('click', function() {
          setForm($(this).data('form'));
          $("#category_form").attr("action","/admin/groups/updatecategory/" + $(this).data("id"));
      });
      if(bind){
        $("a.open-slide").pageslide();
      }
  }
  $(function(){
    $("#add_category").click(createCategory);

    $("#categoryModal .modal-body").keypress(function(e) {
      if(e.which == 13) {
        createCategory();
        return false;
      }
    });
    bindOpenSlide(false);
    $("#category_form").on("ajax:success",function(xhr,data){
      $("#category_holder_box").html(data);
      $.pageslide.close();
      bindOpenSlide(true);
    })

    $.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: $("#create_category_form input").serialize(),
      }).done(function(data){
        $.each($('#categoryModal .input-large'),function(){
          $(this).val("");
        });
        <% if current_user.is_admin? %>
          $("#category_holder_box").html(data);
        <% else %>
          $("#requested_category_holder_box").html(data);
        <% end %>
        $('#categoryModal').modal('hide');
        bindOpenSlide(true);
      });
    }
  }
</script>