Improved ModelAdmin.js - removed formData and showRecord, creating .fn('loadForm') instead; used livequery more to reduce the amount of behaviour reapplication that was necesary.

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@62335 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/ModelAdmin.php

@@ -110,6 +110,7 @@ abstract class ModelAdmin extends LeftAndMain {
 		Requirements::javascript('jsparty/jquery/ui/ui.core.js');
 		Requirements::javascript('jsparty/jquery/ui/ui.tabs.js');
 		Requirements::javascript('jsparty/jquery/plugins/form/jquery.form.js');
+		Requirements::javascript('jsparty/jquery/plugins/effen/jquery.fn.js');
 		Requirements::javascript('jsparty/jquery/jquery_improvements.js');
 		Requirements::javascript('cms/javascript/ModelAdmin.js');
 	}

javascript/ModelAdmin.js

@@ -13,12 +13,14 @@ $(document).ready(function() {
 	/**
 	 * Attach tabs plugin to the set of search filter and edit forms
 	 */
-	$('ul.tabstrip').tabs();
+	$('ul.tabstrip').livequery(function() {
+	    $(this).tabs();
+	});
 
     /*
      * Highlight buttons on click
      */
-	$('input[type=submit]').click(function() {
+	$('input[type=submit]').livequery('click', function() {
 	    $(this).addClass('loading');
 	});
 
@@ -104,14 +106,16 @@ $(document).ready(function() {
 	
 	/**
 	 * Table record handler for search result record
+	 * @todo: Shouldn't this be part of TableListField?
 	 */
 	$('#right #Form_ResultsForm tbody td a')
 	    .livequery('click', function(){
 	        $(this).parent().parent().addClass('loading');
     		var el = $(this);
-    		showRecord(el.attr('href'));
+    		$('#ModelAdminPanel').fn('loadForm', el.attr('href'));
     		return false;
-    	})
+    	});
+    	/* this isn't being used currently; the real hover code is part of TableListField
     	.hover(
     	    function(){
         		$(this).addClass('over').siblings().addClass('over')
@@ -120,6 +124,7 @@ $(document).ready(function() {
         		$(this).removeClass('over').siblings().removeClass('over')
         	}
         );
+        */
 
 	////////////////////////////////////////////////////////////////// 
 	// RHS detail form
@@ -129,8 +134,6 @@ $(document).ready(function() {
      * RHS panel Back button
      */
 	$('#Form_EditForm_action_goBack').livequery('click', function() {
-	    $(this).addClass('loading');
-
 		if(__lastSearch) __lastSearch.trigger('submit');
 		return false;
 	});
@@ -139,13 +142,11 @@ $(document).ready(function() {
 	 * RHS panel Save button 
 	 */
 	$('#right #form_actions_right input[name=action_doSave]').livequery('click', function(){
-	    $(this).addClass('loading');
-
 		var form = $('#right form');
 		var formAction = form.attr('action') + '?' + $(this).fieldSerialize();
 		
 		// Post the data to save
-		$.post(formAction, formData(form), function(result){
+		$.post(formAction, form.formToArray(), function(result){
 			$('#right #ModelAdminPanel').html(result);
 			
 			statusMessage("Saved");
@@ -153,7 +154,6 @@ $(document).ready(function() {
 			// TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. 
 			// Is livequery a solution?
 			Behaviour.apply(); // refreshes ComplexTableField
-			$('#right ul.tabstrip').tabs();
 		});
 
 		return false;
@@ -166,22 +166,19 @@ $(document).ready(function() {
 		var confirmed = confirm("Do you really want to delete?");
 		if(!confirmed) return false;
 
-	    $(this).addClass('loading');
 		var form = $('#right form');
 		var formAction = form.attr('action') + '?' + $(this).fieldSerialize();
 
         // The POST actually handles the delete
-		$.post(formAction, formData(form), function(result){
+		$.post(formAction, form.formToArray(), function(result){
 		    // On success, the panel is refreshed and a status message shown.
 			$('#right #ModelAdminPanel').html(result);
 			
 			statusMessage("Deleted");
     		$('#form_actions_right').remove();
             
-			// TODO/SAM: It seems a bit of a hack to have to list all the little updaters here. 
+            // To do - convert everything to jQuery so that this isn't needed
-			// Is livequery a solution?
 			Behaviour.apply(); // refreshes ComplexTableField
-			$('#right ul.tabstrip').tabs();
 		});
 		
 		return false;
@@ -198,7 +195,7 @@ $(document).ready(function() {
 	$('#Form_ManagedModelsSelect').submit(function(){
 		className = $('select option:selected', this).val();
 		requestPath = $(this).attr('action').replace('ManagedModelsSelect', className + '/add');
-		showRecord(requestPath);
+		$('#ModelAdminPanel').fn('loadForm', requestPath);
 		return false;
 	});
 	
@@ -215,32 +212,17 @@ $(document).ready(function() {
 	// Helper functions
 	////////////////////////////////////////////////////////////////// 
 	
+    $('#ModelAdminPanel').fn({
         /**
-	 * GET a fragment of HTML to display in the right panel
+         * Load a detail editing form into the main edit panel
- 	 * @todo Should this be turned into a method on the #Form_EditForm using effen or something?
+         * @todo Convert everything to jQuery so that the built-in load method can be used with this instead
          */
-	function showRecord(uri) {
+        loadForm: function(url) {
-	    $('#right #ModelAdminPanel').load(uri, standardStatusHandler(function(result) {
+    	    $('#right #ModelAdminPanel').load(url, standardStatusHandler(function(result) {
-			$('#SearchForm_holder').tabs();
     			Behaviour.apply(); // refreshes ComplexTableField
-			$('#right ul.tabstrip').tabs();
     		}));
     	}
-	
-	/**
-	 * Returns a flattened array of data from each field of the given form.
-	 * @todo Surely jQuery has a built-in version of this?
-	 */
-	function formData(scope) {
-		var data = {};
-		$('*[name]', scope).each(function(){
-			var t = $(this);
-			if(t.attr('type') != 'checkbox' || t.attr('checked') == true) {
-				data[t.attr('name')] = t.val();
-			}
     });
-		return data;
-	}
 	
 	/**
 	 * Standard SilverStripe status handler for ajax responses