Bulk editing is now separated from main logic

Created separate handler and js

code/GridFieldBulkActionEditHandler.php

@@ -20,22 +20,23 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 		'bulkedit/update' => 'update',
 		'bulkedit' => 'edit'
 	);
-	
-	
+
+
 	/**
-	 * Creates and return a Form
-	 * with a collection of editable fields for each selected records
+	 * Return a form for all the selected DataObject
+	 * with their respective editable fields.
 	 * 
-	 * @return Form Edit form with all the selected records
+	 * @return form Selected DataObject editable fields
 	 */
-	public function edit()
+	public function editForm()
 	{
-		$recordList = $this->getRecordIDList();
-		
 		$crumbs = $this->Breadcrumbs();
-		if($crumbs && $crumbs->count()>=2) $one_level_up = $crumbs->offsetGet($crumbs->count()-2);
+		if($crumbs && $crumbs->count()>=2)
+		{
+			$one_level_up = $crumbs->offsetGet($crumbs->count()-2);
+		}
 		
-		$actions = new FieldList();		
+		$actions = new FieldList();
 		
 		$actions->push(
 			FormAction::create('SaveAll', _t('GridFieldBulkTools.SAVE_BTN_LABEL', 'Save All'))
@@ -47,18 +48,16 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 		);
 		
 		$actions->push(
-			FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel & Delete All'))
+			FormAction::create('Cancel', _t('GridFieldBulkManager.CANCEL_BTN_LABEL', 'Cancel'))
 				->setAttribute('id', 'bulkEditingUpdateCancelBtn')
 				->addExtraClass('ss-ui-action-destructive cms-panel-link')
 				->setAttribute('data-icon', 'decline')
-				->setAttribute('data-url', $this->Link('cancel'))
+				->setAttribute('href', $one_level_up->Link)
 				->setUseButtonTag(true)
+				->setAttribute('src', '')//changes type to image so isn't hooked by default actions handlers
 		);
 		
-		/*
-		 * ********************************************************************
-		 */
-		
+		$recordList = $this->getRecordIDList();
 		$editedRecordList = new FieldList();
 		$config = $this->component->getConfig();
 				
@@ -81,45 +80,50 @@ class GridFieldBulkActionEditHandler extends GridFieldBulkActionHandler
 			);
 		}
 		
-		/*
-		 * ********************************************************************
-		 */
-		
 		$form = new Form(
 			$this,
 			'bulkEditingForm',
 			$editedRecordList,
 			$actions
-		);
-		
-		$form->setTemplate('LeftAndMain_EditForm');
-		$form->addExtraClass('center cms-content');
-		$form->setAttribute('data-pjax-fragment', 'CurrentForm Content');
+		);		
 		
 		if($crumbs && $crumbs->count()>=2){
 			$form->Backlink = $one_level_up->Link;
 		}
-		
-		$formHTML = $form->forTemplate();
+
+		return $form;
+	}
+	
+	
+	/**
+	 * Creates and return the editing interface
+	 * 
+	 * @return string Form's HTML
+	 */
+	public function edit()
+	{		
+		$form = $this->editForm();
+		$form->setTemplate('LeftAndMain_EditForm');
+		$form->addExtraClass('center cms-content');
+		$form->setAttribute('data-pjax-fragment', 'CurrentForm Content');
 				
-		Requirements::javascript(BULK_EDIT_TOOLS_PATH . '/javascript/GridFieldBulkManager.js');	
+		Requirements::javascript(BULK_EDIT_TOOLS_PATH . '/javascript/GridFieldBulkEditingForm.js');	
 		Requirements::css(BULK_EDIT_TOOLS_PATH . '/css/GridFieldBulkManager.css');	
 		Requirements::add_i18n_javascript(BULK_EDIT_TOOLS_PATH . '/javascript/lang');	
 		
-		$response = new SS_HTTPResponse($formHTML);
-		$response->addHeader('Content-Type', 'text/plain');
-		$response->addHeader('X-Title', 'SilverStripe - Bulk '.$this->gridField->list->dataClass.' Editing');
-		
 		if($this->request->isAjax())
 		{
+			$response = new SS_HTTPResponse(
+				Convert::raw2json(array( 'Content' => $form->forAjaxTemplate()->getValue() ))
+			);
+			$response->addHeader('X-Pjax', 'Content');
+			$response->addHeader('Content-Type', 'text/json');
+			$response->addHeader('X-Title', 'SilverStripe - Bulk '.$this->gridField->list->dataClass.' Editing');
 			return $response;
 		}
 		else {
 			$controller = $this->getToplevelController();
-			// If not requested by ajax, we need to render it within the controller context+template
-			return $controller->customise(array(
-				'Content' => $response->getBody(),
-			));	
+			return $controller->customise(array( 'Content' => $form ));
 		}
 	}
 

javascript/GridFieldBulkEditingForm.js

@@ -0,0 +1,81 @@
+(function($) {	
+	$.entwine('colymba', function($) {	    
+		
+		
+		$('.bulkEditingFieldHolder').entwine({
+			onmatch: function(){
+				var id, name = 'bulkEditingForm';
+				id = $(this).attr('id').split('_')[3];
+				$(this).wrap('<form name="'+name+'_'+id+'" id="'+name+'_'+id+'" class="'+name+'"/>');
+			},
+			onunmatch: function(){					
+			}
+		});
+
+		$('.bulkEditingForm').entwine({
+			onsubmit: function(){
+				return false;
+			}
+		});
+		
+		$('.bulkEditingForm input, .bulkEditingForm select, .bulkEditingForm textarea').entwine({
+			onchange: function(){
+				var form;
+
+				form = this.parents('form.bulkEditingForm');
+
+				if ( !$(form).hasClass('hasUpdate') ) {
+					$(form).addClass('hasUpdate');
+				}
+			}
+		});		
+		
+		$('#bulkEditingUpdateBtn').entwine({
+				onmatch: function(){
+					$(this).data('completedForms', 0);
+				},
+				onunmatch: function(){					
+				},
+				onclick: function(e){
+					var formsWithUpadtes, url, data, cacheBuster;
+					
+					formsWithUpadtes = $('form.bulkEditingForm.hasUpdate');
+					$(this).data('formsToUpdate', $(formsWithUpadtes).length);
+					url = $(this).data('url');
+					
+					if ( $(formsWithUpadtes).length > 0 ) $(this).addClass('loading');
+														
+					$(formsWithUpadtes).each(function(){
+						cacheBuster = new Date().getTime() + '_' + $(this).attr('name');
+						data = $(this).serialize();
+						
+						if ( url.indexOf('?') !== -1 ) cacheBuster = '&cacheBuster=' + cacheBuster;
+						else cacheBuster = '?cacheBuster=' + cacheBuster;
+
+						$.ajax({
+							url: url + '/' + cacheBuster,
+							data: data,
+							type: "POST",
+							context: $(this)
+						}).done(function() { 							
+							var btn = $('#bulkEditingUpdateBtn');
+							var totalForms = parseInt( $(btn).data('formsToUpdate') );				
+							var counter = parseInt( $(btn).data('completedForms') );							
+							counter = counter + 1;							
+							$(btn).data('completedForms', counter);
+							
+							$(this).removeClass('hasUpdate');		
+														
+							if ( counter == totalForms ) {
+								$('#bulkEditingUpdateBtn').data('completedForms', 0);
+								$('#bulkEditingUpdateBtn').removeClass('loading');
+							}							
+						});
+					})
+					
+				}
+		});
+
+		
+	});	
+}(jQuery));

javascript/GridFieldBulkManager.js

@@ -1,6 +1,6 @@
-(function($) {
-	
+(function($) {	
 	$.entwine('colymba', function($) {
+
 		    
 		$('td.col-bulkSelect').entwine({
 			onmatch: function(){
@@ -149,85 +149,6 @@
 			} 
 		});
 
-		/* **************************************************************************************
-		 * EDITING */
 		
-		$('.bulkEditingFieldHolder').entwine({
-			onmatch: function(){
-				var id, name = 'bulkEditingForm';
-				id = $(this).attr('id').split('_')[3];
-				$(this).wrap('<form name="'+name+'_'+id+'" id="'+name+'_'+id+'" class="'+name+'"/>');
-			},
-			onunmatch: function(){					
-			}
-		});
-
-		$('.bulkEditingForm').entwine({
-			onsubmit: function(){
-				return false;
-			}
-		});
-		
-		$('.bulkEditingForm input, .bulkEditingForm select, .bulkEditingForm textarea').entwine({
-			onchange: function(){
-				var form;
-
-				form = this.parents('form.bulkEditingForm');
-
-				if ( !$(form).hasClass('hasUpdate') ) {
-					$(form).addClass('hasUpdate');
-				}
-			}
-		});		
-		
-		$('#bulkEditingUpdateBtn').entwine({
-				onmatch: function(){
-					$(this).data('completedForms', 0);
-				},
-				onunmatch: function(){					
-				},
-				onclick: function(e){
-					var formsWithUpadtes, url, data, cacheBuster;
-					
-					formsWithUpadtes = $('form.bulkEditingForm.hasUpdate');
-					$(this).data('formsToUpdate', $(formsWithUpadtes).length);
-					url = $(this).data('url');
-					
-					if ( $(formsWithUpadtes).length > 0 ) $(this).addClass('loading');
-														
-					$(formsWithUpadtes).each(function(){
-						cacheBuster = new Date().getTime() + '_' + $(this).attr('name');
-						data = $(this).serialize();
-						
-						if ( url.indexOf('?') !== -1 ) cacheBuster = '&cacheBuster=' + cacheBuster;
-						else cacheBuster = '?cacheBuster=' + cacheBuster;
-
-						$.ajax({
-							url: url + '/' + cacheBuster,
-							data: data,
-							type: "POST",
-							context: $(this)
-						}).done(function() { 
-							
-							var btn = $('#bulkEditingUpdateBtn');
-							var totalForms = parseInt( $(btn).data('formsToUpdate') );				
-							var counter = parseInt( $(btn).data('completedForms') );							
-							counter = counter + 1;							
-							$(btn).data('completedForms', counter);
-							
-							$(this).removeClass('hasUpdate');		
-														
-							if ( counter == totalForms ) {
-								$('#bulkEditingUpdateBtn').data('completedForms', 0);
-								$('#bulkEditingUpdateBtn').removeClass('loading');
-							}
-							
-						});
-					})
-					
-				}
-			});
-		
-	});
-	
+	});	
 }(jQuery));

lang/en.yml

@@ -8,4 +8,6 @@ en:
     UNLINK_SELECT_LABEL: Unlink
     DELETE_SELECT_LABEL: Delete
     ACTION_BTN_LABEL: Go
-    SELECT_ALL_LABEL: Select all
+    SELECT_ALL_LABEL: Select all
+  GridFieldBulkManager:
+    CANCEL_BTN_LABEL: Cancel

lang/fr.yml

@@ -8,4 +8,6 @@ fr:
     UNLINK_SELECT_LABEL: Retirer
     DELETE_SELECT_LABEL: Supprimer
     ACTION_BTN_LABEL: Go
-    SELECT_ALL_LABEL: Sélectionner tout
+    SELECT_ALL_LABEL: Sélectionner tout
+  GridFieldBulkManager:
+    CANCEL_BTN_LABEL: Annuler

lang/nl.yml

@@ -9,3 +9,5 @@ nl:
     DELETE_SELECT_LABEL: Verwijderen
     ACTION_BTN_LABEL: Gaan
     SELECT_ALL_LABEL: Selecteer alles
+  GridFieldBulkManager:
+    CANCEL_BTN_LABEL: Annuleren