orbit4-5/app/views/pages/_member_frontend_field.html.erb

<form id="form_for_attribs" action="">
    <div class="form-inline">
      <ul class="current-roles">
          
      </ul>
    </div>

    <div class="form-inline controls-row">
      <label>Attribute Type: </label>
      <select class="role-selector" id="type_selector" style="width:100px;">
        
      </select>
      <label> Attribute: </label>
      <select class="role-selector attrb-selector" id="profile_selector">
        
      </select>
      <select class="role-selector hide attrb-selector" id="custom_selector">
        
      </select>
      <select class="role-selector hide attrb-selector" id="role_selector">
        
      </select>
      <a href="#" class="add-role btn btn-default">Add role</a>
    </div>
    

    <div class="form-actions">
    <input type="hidden" value="<%= @page_id %>">
      <a href="#" id="form_for_attribs_btns" class="btn btn-primary">Save</a>
      <a href="#" class="btn" data-dismiss="modal">Cancel</a>
    </div>
  </form>

   <script type="text/javascript">
   var selected_attribs = <%= @selected_attribs.to_json.html_safe %>,
      attributes = <%= @attribs.to_json.html_safe %>;


    var render_default_attributes = function(){
       var html = "";
      $.each(selected_attribs,function(i,attrib){
        var collection = attributes[attrib.type],
            node = collection.filter(function(x){return x.key == attrib.key})[0];
          if(typeof node !== "undefined"){
            if(attrib.key != "email"){
              html+= '<li class="clearfix" data-attrib-key="' + attrib.key + '" data-attrib-type="' + attrib.type + '"><span class="role-value">' + node.human_readable + '</span><span class="remove-role"><i class="icon-remove-sign"></i></span><label class="checkbox link-to-show"><input type="checkbox" value="true" ' + (attrib.link_to_show ? "checked=checked" : "" ) + '> Link to show </label></li>';
            }else{
                html+= '<li class="clearfix" data-attrib-key="' + attrib.key + '" data-attrib-type="' + attrib.type + '"><span class="role-value">' + node.human_readable + '</span><span class="remove-role"><i class="icon-remove-sign"></i></span></li>';
            }
          }
      })
      $("#form_for_attribs ul.current-roles").html(html);
    }();

    var render_default_type_selectors =  function(){
      var html = "",
          keys = [];
      $.each(attributes.types,function(i, type){
        html+= "<option value='" + type.key + "'>" + type.human_readable + "</option>";
        keys.push(type.key);
      })
      $("#form_for_attribs select#type_selector").html(html).on("change",function(){
        var val = $(this).val();
        $("#form_for_attribs .attrb-selector").addClass("hide");
        $("#form_for_attribs #" + val + "_selector").removeClass("hide");
      });
      $.each(keys,function(i,key){
        var attribs = attributes[key],
            html = "";
        $.each(attribs,function(x,attrib){
          html+= "<option value='"+ attrib.key +"'>" + attrib.human_readable + "</option>";
        })
        $("#" + key + "_selector").html(html);
      })
    }();

    $(document).ready(function(){
      // Add Role function, get the current selected item value and append it to select element
      function addRole( e ) {
        var type = $("#form_for_attribs #type_selector").val(),
            attrib_key = $("#form_for_attribs #"+type+"_selector").val(),
            attrib_text = $("#form_for_attribs #"+type+"_selector option[value="+attrib_key+"]").text();
          // If the select is empty, stop appending or it will keep appending blank content to select element
          if(attrib_key != "email"){
            $( ".current-roles" ).append( "<li class=\"clearfix\" data-attrib-key=\"" + attrib_key + "\"  data-attrib-type=\"" + type + "\"><span class=\"role-value\">" + attrib_text + "</span><span class=\"remove-role\"><i class=\"icon-remove-sign\"></i></span><label class=\"checkbox link-to-show\"><input type=\"checkbox\" value=\"true\"> Link to show </label></li>" );
          }else{
            $( ".current-roles" ).append( "<li class=\"clearfix\" data-attrib-key=\"" + attrib_key + "\"  data-attrib-type=\"" + type + "\"><span class=\"role-value\">" + attrib_text + "</span><span class=\"remove-role\"><i class=\"icon-remove-sign\"></i></span></li>" );
          }
          e.preventDefault();
      }

      // Remove the select role and append it back to select element
      function removeRole( e ) {
        var el = $( this ).closest( "li" ).remove();
        $( "select" ).append( "<option>" + el.find( ".role-value" ).text() + "</option>" );
        e.preventDefault();
      }

      // Add event listeners
      $( ".add-role" ).on( "click", addRole );
      $( ".current-roles" ).on( "click", ".remove-role", removeRole );
      $("#form_for_attribs ul.current-roles").sortable();

      $("#form_for_attribs #form_for_attribs_btns").on("click",function(){
        var data = [];
        $("#form_for_attribs ul.current-roles li").each(function(i){
          var opts = {};
            opts["key"] = $(this).data("attrib-key");
            opts["type"] = $(this).data("attrib-type");
            opts["sort"] = i + 2;
            // opts["human_readable"] = $(this).find("span.role-value").text();
            if($(this).find("input[type=checkbox]").is(":checked")){
              opts["link_to_show"] = true;
            }
            if(opts["key"] == "discipline"){
              opts["max_length"] = 12;
            }
            data.push(opts);
        })
        $.ajax({
          url : "/pages/save_member_frontend_fields",
          data : {"fields" : data, "page_id" : $("#form_for_attribs input[type=hidden]").val()},
          type : "post",
          dataType : "json"
        }).done(function(){
          $("#modify_fields_to_show").modal("hide");
        })
        return false;
      })

    })



  </script>