hooking forms with ajax callback, clean up

src/main/webapp/js/goatApp/model/LessonContentData.js

@@ -10,25 +10,19 @@ define(['jquery',
 			selectedItem:null
 		},
 		initialize: function (options) {
+			this.screenParam = null;
+			this.menuParam = null;
 			this.baseUrlRoot = 'attack?Screen=';//
 		},
 		loadData: function(options) {
 			this.urlRoot = this.baseUrlRoot + +options.screen + '&menu=' + options.menu;
+			this.set('menuParam',options.menu);
+			this.set('screenParam',options.screen);
+
 			var self=this;
 			this.fetch().then(function(data) {
 				self.setContent(data);
 			});
-			// 	success: function(content) {
-			// 		console.log("content:" + content);
-			// 	},
-			// 	error: function(err) {
-			// 		console.log("error:" + err);
-			// 	},
-			// 	done: function(a,b) {
-			// 		console.log(a);
-			// 		console.log(b);
-			// 	}
-			// });
 		},
 		setContent: function(content) {
 			this.set('content',content);

src/main/webapp/js/goatApp/support/GoatUtils.js

@@ -1,9 +1,12 @@
 define(['jquery',
     'underscore',
-    'backbone'], 
+    'backbone',
+    'libs/jquery.form'
+    ], 
     function($,
         _,
-        Backbone) {
+        Backbone,
+        JQueryForm) {
             var goatUtils = {
                 makeId: function(lessonName) {
                     //var id =

src/main/webapp/js/goatApp/view/LessonContentView.js

@@ -2,8 +2,9 @@
 define(['jquery',
 	'underscore',
 	'backbone',
+	'libs/jquery.form',
 	'goatApp/model/LessonContentData'], 
-function($,_,Backbone,LessonData) {
+function($,_,Backbone,JQueryForm,LessonData) {
 	return Backbone.View.extend({
 		el:'#lessonContentWrapper', //TODO << get this fixed up in DOM
 		initialize: function(options) {
@@ -12,6 +13,32 @@ function($,_,Backbone,LessonData) {
 		render: function() {
 			//alert('render');
 			this.$el.html(this.model.get('content'));
+			this.makeFormsAjax();
+		},
+		//TODO: reimplement this in custom fashion maybe?
+		makeFormsAjax: function () {
+			var options = {
+			    //target: '#lesson_content', // target element(s) to be updated with server response                     
+			    //beforeSubmit: GoatUtils.showRequest, // pre-submit callback, comment out after debugging 
+			    //success: GoatUtils.showResponse  // post-submit callback, comment out after debugging 
+			    success:this.reLoadView.bind(this),
+			    url:'attack?Screen=' + this.model.get('screenParam') + '&menu=' + this.model.get('menuParam'),
+			            // other available options: 
+			            //url:       url         // override for form's 'action' attribute 
+			            //type:      type        // 'get' or 'post', override for form's 'method' attribute 
+			            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
+			            //clearForm: true        // clear all form fields after successful submit 
+			            //resetForm: true        // reset the form after successful submit 
+
+			            // $.ajax options can be used here too, for example: 
+			            //timeout:   3000 
+			};
+			//hook forms //TODO: clarify form selectors later
+		    $("form").ajaxForm(options);
+        },
+        reLoadView: function(content) {
+        	this.model.setContent(content);
+        	this.render();
         }
 	});
 

src/main/webapp/js/goatApp/view/MenuModel.js

@@ -1,37 +0,0 @@
-// define(['jquery',
-// 	'underscore',
-// 	'backbone',
-// 	'goatApp/model/MenuItemModel',
-// 	'goatApp/model/MenuItemCollection'],
-// 	function($,_,Backbone,MenuItemModel,MenuItemCollection) {
-
-// 	return Backbone.View.extend({
-// 		initialize: function(options) {
-// 			options = options || {};
-// 			//if children, generate Stage views
-// 			this.collection = new MenuItemCollection();
-// 			this.collection.set(options.collection);
-// 		},
-// 		render: function() {
-// 			//example
-// 			/*
-// 			"name": "Using an Access Control Matrix",
-// 			"type": "LESSON",
-// 			"children": [ ],
-// 			"complete": false,
-// 			"link": "#attack/18/200",
-// 			"showSource": true,
-// 			"showHints": true
-// 			*/
-// 			var link = $('<a>',{});
-// 			var listItem = $('<li>',{class:'sub-menu',text:this.model.get('name')});
-
-// 			listItem.append(link);
-// 				//this.model.get('name') + this.model.get('children').length + '</li>';
-// 			return listItem;
-// 		}
-
-
-// 	});
-
-// });