소스 검색

HUE-199. Add support for SubmitOnChange on inputs, select, and textarea elements in addition to containers of such inputs.

Aaron Newton 15 년 전
부모
커밋
93c525bdd9

+ 15 - 1
apps/jframegallery/src/jframegallery/templates/submit.form.on.change.html

@@ -34,7 +34,7 @@ limitations under the License.
 		<p>
 			The form below will submit as soon as you select a value.
 		</p>
-		<form action="/jframegallery/submit.form.on.change.html" method="post" style="margin: 6px 0px 0px;">
+		<form action="/jframegallery/submit.form.on.change.html" method="post" style="margin: 6px 0px 0px;" data-filters="SubmitOnChange">
 			<select name="select_list">
 				<option value="option 1">option 1</option>
 				<option value="option 2">option 2</option>
@@ -42,6 +42,20 @@ limitations under the License.
 			</select>
 			<input type="submit" class="ccs-hidden" name="submit"/>
 		</form>
+		
+		<hr/>
+		<p>This form works exactly as the one above, but the SubmitOnChange data filter is on the select, rather than the form.</p>
+		<form action="/jframegallery/submit.form.on.change.html" method="post" style="margin: 6px 0px 0px;">
+			<select name="select_list" data-filters="SubmitOnChange">
+				<option value="option 1">option 1</option>
+				<option value="option 2">option 2</option>
+				<option value="option 3">option 3</option>
+			</select>
+			<input type="text" name="textinput" value="If you change me, I don't submit the form.">
+			<input type="submit" class="ccs-hidden" name="submit"/>
+		</form>
+		
+		
 		{% endif %}
 	</body>
 </html>

+ 26 - 15
desktop/core/static/js/Source/BehaviorFilters/Behavior.SubmitOnChange.js

@@ -25,6 +25,23 @@ script: Behavior.SubmitOnChange.js
 ...
 */
 
+(function(){
+
+var setupInput = function(input, form, cleanupElement){
+	var events = {
+		change: function(e){
+			if (e) form.fireEvent('submit', e);
+			else form.fireEvent('submit');
+		},
+		keydown: function(e) {
+			if (e.key == 'enter' && document.id(e.target).get('tag') != 'textarea') form.fireEvent('submit', e);
+		}
+	};
+	input.addEvents(events);
+	this.markForCleanup(cleanupElement, function(){
+		input.removeEvents(events);
+	});
+};
 
 Behavior.addGlobalFilters({
 	
@@ -41,21 +58,15 @@ Behavior.addGlobalFilters({
 	*/
 
 	SubmitOnChange: function(element, methods) {
-		element.getElements('input, select, textarea').each(function(input){
-			var events = {
-				change: function(e){
-					if (e) element.fireEvent('submit', e);
-					else element.fireEvent('submit');
-				},
-				keydown: function(e) {
-					if (e.key == 'enter' && document.id(e.target).get('tag') != 'textarea') element.fireEvent('submit', e);
-				}
-			};
-			input.addEvents(events);
-			this.markForCleanup(element, function(){
-				input.removeEvents(events);
-			});
-		}, this);
+		if (['input', 'select', 'textarea'].contains(element.get('tag'))) {
+			setupInput.call(this, element, element.getParent('form'), element);
+		} else {
+			element.getElements('input, select, textarea').each(function(el){
+				setupInput.call(this, el, element, element);
+			}, this);
+		}
 	}
 
 });
+
+})();