register_modules/app/views/admin/admin_modules/index.html.erb

<%= javascript_include_tag "plugin/jquery.form.min" %>
<span id="index_table">
  <%= render 'index'%>
</span>
<div id="approveModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Module Approval</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="approveModuleBtn">Approve</button>
  </div>
</div>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Edit Module</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="editModuleBtn">Save</button>
  </div>
</div>
<div id="actionsModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="submitModalBtn"></button>
  </div>
</div>
<script type="text/javascript">
	var updateTableData = function(){
		$.ajax({
			"url" : "/admin/admin_modules",
			"dataType" : "html",
			"type" : "get"
		}).done(function(data){
			$("#index_table").html(data);
			bindHandlers();
		})
	}

	var bindHandlers = function(){
		var actionsModal = $("#actionsModal");
		var btn_type = null;
		var module_id = null;
		$(".action-btns").on("click",function(){
			btn_type = $(this).attr("for");
			module_id = $(this).data("id");
			$.ajax({
				"url" : $(this).attr("href"),
				"type" : "get",
				"dataType" : "html"
			}).done(function(data){
				actionsModal.find(".modal-body").html(data);
				actionsModal.modal("show");
				changeModalTitle(btn_type);
			})
			return false;
		})

		$("#submitModalBtn").on("click",function(){
			var websites = [],
				url = null;
			actionsModal.find("input[type=checkbox]:checked").each(function(){
				websites.push($(this).val());
			})
			switch(btn_type){
				case "installation":
					url = "/admin/admin_modules/install";
					break;
				case "uninstallation":
					url = "/admin/admin_modules/uninstall";
					break;
				case "revoke_access":
					url = "/admin/admin_modules/revoke";
					break;
				case "grant_access":
					url = "/admin/admin_modules/grant";
					break;
			}
			if(websites.length > 0 && confirm("Are you sure?")){
				$.ajax({
					"url" : url,
					"data" : {"websites" : websites,"module" : module_id},
					"dataType" : "json",
					"type" : "post"
				}).done(function(){
					actionsModal.modal("hide");
				})
			}
		})

		var changeModalTitle = function(type){
			var title = "",
				btn_title = "";
			switch(type){
				case "installation":
					title = "Select the sites to install this module.";
					btn_title = "Install";
					break;
				case "uninstallation":
					title = "Select the sites to unistall this module.";
					btn_title = "Uninstall";
					break;
				case "revoke_access":
					title = "Select the sites to revoke the access.";
					btn_title = "Revoke";
					break;
				case "grant_access":
					title = "Select the sites to grant the access.";
					btn_title = "Grant";
					break;
			}
			actionsModal.find(".modal-header h3").text(title);
			$("#submitModalBtn").text(btn_title);
		}

		$(".edit-btn").on("click",function(){
			var el  = $(this);
			$.ajax({
				"url" : el.attr("href"),
				"type" : "get",
				"dataType" : "html"
			}).done(function(form){
				$("#editModal .modal-body").html(form);
				$("#editModal").modal("show");
				$("#editModal #editModuleBtn").on("click",function(){
					$("#approveSiteForm").ajaxSubmit({
						success : function(){
							updateTableData();
							$("#editModal").modal("hide");
						}
					})
				})
			})
			return false;
		})
		$(".approve-btn").on("click",function(){
			var el  = $(this);
			$.ajax({
				"url" : el.attr("href"),
				"type" : "get",
				"dataType" : "html"
			}).done(function(form){
				$("#approveModal .modal-body").html(form);
				$("#approveModal").modal("show");
				$("#approveModal #approveModuleBtn").on("click",function(){
					$("#approveSiteForm").ajaxSubmit({
						success : function(){
							updateTableData();
							$("#approveModal").modal("hide");
						}
					})
				})
			})
			return false;
		})
	}
	bindHandlers();
</script>