ENHANCEMENT Allow submitting form data alongside TreeDropdownField ajax request, which can be used to retain state

javascript/TreeDropdownField.js

@@ -7,8 +7,6 @@
 		};
 		
 		/**
-		 * @todo Locale support/form serialization
-		 * @todo Multiselect: Select items after tree load, serialize titles, override title on select but keep panel open
 		 * @todo Error display
 		 * @todo No results display for search
 		 * @todo Automatic expansion of ajax children when multiselect is triggered
@@ -58,7 +56,7 @@
 			},
 			loadTree: function(params, callback) {
 				var self = this, panel = this.getPanel(), treeHolder = $(panel).find('.tree-holder');
-				var params = params || {};
+				var params = (params) ? this.getRequestParams().concat(params) : this.getRequestParams();
 				panel.addClass('loading');
 				treeHolder.load(this.attr('href'), params, function(html, status, xhr) {
 					var firstLoad = true;
@@ -84,6 +82,7 @@
 				});
 			},
 			getTreeConfig: function() {
+				var self = this;
 				return {
 					'core': {
 						'initially_open': ['record-0'],
@@ -95,7 +94,9 @@
 						'ajax': {
 							'url': this.attr('href'),
 							'data': function(node) {
-								return { ID : $(node).data("id") ? $(node).data("id") : 0 , ajax: 1};
+								var id = $(node).data("id") ? $(node).data("id") : 0, params = self.getRequestParams();
+								params = params.concat([{name: 'ID', value: id}, {name: 'ajax', value: 1}]);
+								return params;
 							}
 						}
 					},
@@ -108,6 +109,16 @@
 					},
 					'plugins': ['html_data', 'ui', 'themes']
 				};
+			},
+			/**
+			 * If the field is contained in a form, submit all form parameters by default.
+			 * This is useful to keep state like locale values which are typically
+			 * encoded in hidden fields through the form.
+			 * 
+			 * @return {array}
+			 */
+			getRequestParams: function() {
+				return [];
 			}
 		});
 		$('.TreeDropdownField *').entwine({
@@ -173,7 +184,7 @@
 			},
 			loadTree: function(params, callback) {
 				var self = this, panel = this.getPanel(), treeHolder = $(panel).find('.tree-holder');
-				var params = params || {};
+				var params = (params) ? this.getRequestParams().concat(params) : this.getRequestParams();
 				panel.addClass('loading');
 				treeHolder.load(this.attr('href'), params, function(html, status, xhr) {
 					var firstLoad = true;

tests/javascript/TreeDropDownField/TreeDropdownField.js

@@ -190,7 +190,7 @@
 				
 				it('it sets the selected titles', function() {
 					var f = $('#testfield'), panel = f.entwine('ss').getPanel();
-					loadTree(f);
+					var xhr = loadTree(f);
 					
 					// TODO loaded.jstree event works with timeouts, so we have to wait before inspection
 					waits(200);
@@ -201,6 +201,39 @@
 				});
 				
 			});
+			
+		});
+		
+		describe('when field is contained in a form', function() {
+			
+			beforeEach(function() {
+				$('#myform .TreeDropdownField').entwine('ss', {
+					getRequestParams: function() {
+						return this.parents('form:first').serializeArray();
+					}
+				});
+				
+				// load fixture
+				$('body').append(
+					'<form id="myform" url="/myform">' +
+					'<div id="testfield" class="TreeDropdownField" href="/myurl" data-title="Selected">' +
+					'<input type="hidden" name="testfield" value="1" />' +
+					'</div>' +
+					'<input type="hidden" name="MyFormValue" value="foo" />' +
+					'</form>'
+				);
+		  });
+		
+			afterEach(function() {
+				$('#testfield').remove();
+			});
+			
+			it('sends all form values with ajax requests', function() {
+				var f = $('#testfield'), panel = f.entwine('ss').getPanel();
+				loadTree(f);
+				var xhr = mostRecentAjaxRequest();
+				expect(xhr.params).toContain('MyFormValue=foo');
+			});
 		});
 	});
 }(jQuery));