Alright, let's dive into this with some suggestions.
Firstly, your onclick=addDeskid(e)
isn't properly formatted to call your function and it's placed in the markup instead of the code, so let's correct that.
I've made some adjustments to your markup to enhance compatibility with my event handlers by using a class for myAddButton and myRemButton. Feel free to modify it as needed, but I found this approach useful. I also included a button to display the results logged after all events have been triggered. Currently, you're getting []
because there is no data present when it's logged. I haven't made any changes to the submit functionality; it's up to you to handle that (perhaps through an ajax call?).
<div class="button myAddButton" data-info='2' data-id='8-7'>add</div>
<div class="button myRemButton" data-info='4' data-id='2-5'>remove</div>
<div class="button mySubmitButton">submit</div>
<button id="ShowResults" type='button'>ShowResults</button>
Now onto the code - I've refactored this to establish a "class" for the object using makeClass
. While there are other approaches, this method allows for creating instance objects when necessary and simplifies namespace management for certain functions. I deliberately added a private function to demonstrate its use along with a public function. Note that inside the function, "this" refers to the instance object, not a global one. (Refer to makeClass with credited authors for more details.)
I defined a "class" with generic attributes. You could opt for separate functions for "add" and "remove" rather than the SetChangeObject
function - each addressing a specific action...I chose a generic approach for consistent object signature.
Here's the adjusted code which may seem somewhat contrived in places solely for illustrative purposes:
// makeClass - By Hubert Kauker (MIT Licensed)
// originally by John Resig (MIT Licensed).
function makeClass() {
var isInternal;
return function (args) {
if (this instanceof arguments.callee) {
if (typeof this.init == "function") {
this.init.apply(this, isInternal ? args : arguments);
}
} else {
isInternal = true;
var instance = new arguments.callee(arguments);
isInternal = false;
return instance;
}
};
}
var SeatGroup = makeClass(); //initialize our class
//method invoked upon creation of a class instance
SeatGroup.prototype.init = function (id, changeType, name, desk, seat, setToValue, previousseat, previousseatnewvalue) {
// default values
var defaultSeat = "default";
var defaultName = "default";
this.ID = id;
this.ChangeType = changeType;
this.Name = name ? name : defaultName;
this.Desk = desk ? desk : "";
this.Seat = seat ? seat : privateFunction(defaultSeat);;
this.SetTo = setToValue ? setToValue : this.ID;
this.PreviousSeatValue = previousseat ? previousseat : "";
this.PreviousSeatNewValue = previousseatnewvalue ? previousseatnewvalue : "";
this.changeObject = {};
//public method
this.SetChangeObject = function () {
this.changeObject.ID = this.ID;
this.changeObject.ChangeType = this.ChangeType;
this.changeObject.Name = this.Name;
this.changeObject.Seat = this.Seat;
this.changeObject.Desk = this.Desk;
this.changeObject.SetTo = this.SetTo;
this.changeObject.PreviousSeatValue = this.PreviousSeatValue;
this.changeObject.PreviousSeatNewValue = this.PreviousSeatNewValue;
};
function privateFunction(name) {
return name + "Seat";
}
};
var userMoves = [];//global warning-global object!!
//event handlers
$('.myAddButton').on('click', addDeskId);
$('.myRemButton').on('click', remDeskId);
$('#ShowResults').on('click', function () {
console.log(JSON.stringify(userMoves));//log this after all are pushed
});
//function called on "add", can be customized
function addDeskId(e) {
var uo = $(this);//jQuery object of the "myAddButton" element
var userObjectChange = 'CHANGE_SEAT_TO';
var userObjectID = uo.data('info');
var userObjectDeskID = uo.data('id');
var userObjectSeatID = '9-4';
//create a private instance of our class (invokes init function)
var uChange = SeatGroup(userObjectID, userObjectChange, userObjectDeskID, userObjectSeatID);
uChange.SetChangeObject();//invoke public function
//display what we created
console.dir(uChange.changeObject);
//this doesn't work, it's private: console.log( uChange.privateFunction('hi'));
//push to our global
userMoves.push(uChange.changeObject);
}
//event function, customize as required
function remDeskId() {
var userObject = $(this);
var userObjectChange = 'REMOVESEAT';
var userObjectID = userObject.data('info');//use jQuery data attribute for ease
var userObjectDeskID = userObject.data('id');
var userObjectDeskIDVal = 0;
var remUserObject = SeatGroup(userObjectID, userObjectChange, userObjectDeskID);
remUserObject.PreviousSeatValue = "FreddySeat";//demonstrating setting an object property
remUserObject.SetChangeObject();//invoke public function
console.dir(remUserObject.changeObject);
userMoves.push(remUserObject.changeObject);
}
Experiment with it here: http://jsfiddle.net/q43cp0vd/2/