Im using knockout.js and MVC .NET
I was hoping to create a button foreach service that I have. That button should just populate some values in textboxes.
But, however, that function click: $parent.populateUserData(($index() + 1)) is being called on GET page, and I don't understand why.
Here is my part of html which is relevant for this question:
<!-- ko foreach: bundleSchedules -->
<div class="top-details">
<div>
<!--<button class="button" data-bind="click: $parent.populateUserData(($index() + 1))">У своје име</button>-->
<a href="#" data-bind="click: $parent.populateUserData(($index() + 1))">Test</a>
</div>
</div>
<!-- /ko -->
also this is my js part:
define(['durandal/services/logger', 'plugins/dialog', 'viewmodels/shell', 'toastr', 'knockout', 'scheduler', 'customerService', 'jqueryui'],
function (logger, dialog, shell, toastr, ko, scheduler, customerService, jqueryui) {
var vm = {
activate: activate,
shell: shell,
bundleSchedules: ko.observableArray([]),
serviceDetails: ko.observable({}),
customer: ko.observable({}),
employee: ko.observable({}),
isEmployeeRequested: ko.observable(),
hourDetais: ko.observable(),
close: function () {
$(window).off('popstate', vm.goBack);
$(window).off('resize', adjustModalPosition);
dialog.close(vm, 'cancel');
},
goBack: function () {
$(window).off('popstate', vm.goBack);
$(window).off('resize', adjustModalPosition);
dialog.close(vm, 'back');
},
step: ko.observable(1),
employeeWorkingDayId: ko.observable(),
serviceTypeName: ko.observable(),
customers: ko.observableArray([]),
locationName: ko.observable(),
employees: ko.observableArray([]),
note: ko.observable(),
obj: ko.observable(),
scheduleTypes: ko.observableArray(),
selectedScheduleType: ko.observable(),
customerSearchCriteria: ko.observable(),
customerToEdit: {
id: ko.observable(1),
email: ko.observable().extend({ email: true }),
firstName: ko.observable("").extend({ required: true }),
lastName: ko.observable("").extend({ required: true }),
JMBG: ko.observable().extend({ required: true }),
note: ko.observable(),
ContactPhone: ko.observable().extend({ required: true, digit: true }),
ResidenceAddress: ko.observable()
},
customerToEdit1: {
id: ko.observable(1),
email: ko.observable().extend({ email: true }),
firstName: ko.observable("").extend({ required: true }),
lastName: ko.observable("").extend({ required: true }),
JMBG: ko.observable().extend({ required: true }),
ContactPhone: ko.observable().extend({ required: true, digit: true }),
ResidenceAddress: ko.observable()
},
customerToEdit2: {
id: ko.observable(1),
email: ko.observable().extend({ email: true }),
firstName: ko.observable("").extend({ required: true }),
lastName: ko.observable("").extend({ required: true }),
JMBG: ko.observable().extend({ required: true }),
ContactPhone: ko.observable().extend({ required: true, digit: true }),
ResidenceAddress: ko.observable()
},
customerToEdit3: {
id: ko.observable(1),
email: ko.observable().extend({ email: true }),
firstName: ko.observable("").extend({ required: true }),
lastName: ko.observable("").extend({ required: true }),
JMBG: ko.observable().extend({ required: true }),
ContactPhone: ko.observable().extend({ required: true, digit: true }),
ResidenceAddress: ko.observable()
},
customerToEdit4: {
id: ko.observable(1),
email: ko.observable().extend({ email: true }),
firstName: ko.observable("").extend({ required: true }),
lastName: ko.observable("").extend({ required: true }),
JMBG: ko.observable().extend({ required: true }),
ContactPhone: ko.observable().extend({ required: true, digit: true }),
ResidenceAddress: ko.observable()
},
//populateUserData: populateUserData,
applyCustomerSearch: applyCustomerSearch
};
vm.populateUserData = function populateUserData(orderNumber) {
if (orderNumber == 1) {
vm.customerToEdit.firstName(shell.currentUser().firstName());
vm.customerToEdit.lastName(shell.currentUser().lastName());
vm.customerToEdit.JMBG(shell.currentUser().userName());
vm.customerToEdit.email(shell.currentUser().email());
vm.customerToEdit.ContactPhone(shell.currentUser().contactPhone());
return;
}
if (orderNumber == 2) {
vm.customerToEdit1.firstName(shell.currentUser().firstName());
vm.customerToEdit1.lastName(shell.currentUser().lastName());
vm.customerToEdit1.JMBG(shell.currentUser().userName());
vm.customerToEdit1.email(shell.currentUser().email());
vm.customerToEdit1.ContactPhone(shell.currentUser().contactPhone());
return;
}
if (orderNumber == 3) {
vm.customerToEdit2.firstName(shell.currentUser().firstName());
vm.customerToEdit2.lastName(shell.currentUser().lastName());
vm.customerToEdit2.JMBG(shell.currentUser().userName());
vm.customerToEdit2.email(shell.currentUser().email());
vm.customerToEdit2.ContactPhone(shell.currentUser().contactPhone());
return;
}
if (orderNumber == 4) {
vm.customerToEdit3.firstName(shell.currentUser().firstName());
vm.customerToEdit3.lastName(shell.currentUser().lastName());
vm.customerToEdit3.JMBG(shell.currentUser().userName());
vm.customerToEdit3.email(shell.currentUser().email());
vm.customerToEdit3.ContactPhone(shell.currentUser().contactPhone());
return;
}
if (orderNumber == 5) {
vm.customerToEdit4.firstName(shell.currentUser().firstName());
vm.customerToEdit4.lastName(shell.currentUser().lastName());
vm.customerToEdit4.JMBG(shell.currentUser().userName());
vm.customerToEdit4.email(shell.currentUser().email());
vm.customerToEdit4.ContactPhone(shell.currentUser().contactPhone());
return;
}
}
function applyCustomerSearch() {
jQuery.post(rootUrl + 'spaemployeeadmin/getcustomers', {
q: vm.customerSearchCriteria()
})
.done(function (data) {
vm.customers(data);
});
}
var theDialog = null;
vm.setIsEmployeeRequested = function () {
vm.isEmployeeRequested(!vm.isEmployeeRequested());
}
vm.errors = ko.validation.group(vm.customerToEdit);
vm.errors1 = ko.validation.group(vm.customerToEdit1);
vm.errors2 = ko.validation.group(vm.customerToEdit2);
vm.errors3 = ko.validation.group(vm.customerToEdit3);
vm.errors4 = ko.validation.group(vm.customerToEdit4);
vm.previousStep = function () {
//if (vm.step() > 1) {
// var step = vm.step() - 1;
// vm.step(step);
//} else {
// vm.close();
//}
//ClearCustomerData();
//vm.close();
vm.editCustomer();
}
vm.nextStep = function () {
if (vm.step() < 3) {
var step = vm.step() + 1;
vm.step(step);
} else {
vm.accept();
}
}
function skipOnlyOneEmployeeStep(step) {
if (step == 3) {
if (vm.employees().length == 1) {
vm.employee(vm.employees()[0]);
return true;
}
}
return false;
}
vm.modalHeight = ko.computed(function () {
if (shell.isWide()) {
return "100%";
} else {
return (shell.bodyHeight() - 40) + "px";
}
});
vm.modalWidth = ko.computed(function () {
if (shell.isWide()) {
return "740px";
} else {
return shell.bodyWidth() + "px";
}
});
vm.maxBodyHeight = ko.computed(function () {
return (shell.bodyHeight() - 44) + "px";
});
vm.scheduleBundleEventByAdminView = ko.computed(function () {
if (shell.isWide()) {
return "schedulebundleeventbyadminwide";
} else {
return 'schedulebundleeventbyadminwide';
}
});
vm.selectCustomer = function () {
vm.customer(this);
vm.step(2);
}
vm.selectEmployee = function () {
vm.employee(this);
vm.employeeWorkingDayId(this.EmployeeWorkingDayId);
vm.step(4);
}
vm.setScheduleType = function (scheduleTypeId) {
vm.selectedScheduleType(scheduleTypeId);
}
function getEquipmentIds() {
var result = [];
(vm.employee().AvailableEquipment || []).forEach(function (item) {
if (item.Equipment && item.Equipment.length > 0) {
result.push(item.Equipment[0].EquipmentId);
}
});
return result;
}
vm.missingCustomerData = ko.computed(function () {
if (vm.customer()) {
return !vm.customer().firstName ||
!vm.customer().lastName ||
!vm.customer().mobile ||
!vm.customer().email ||
!vm.customer().note ||
!vm.customer().birthday ||
!vm.customer().address ||
!vm.customer().loyaltyCardNumber;
}
});
vm.saveCustomer = function () {
if (vm.customerToEdit.JMBG() != undefined && vm.customerToEdit.JMBG() !== "") {
jQuery.post(rootUrl + 'spa/checkjmbg', {
jmbg: vm.customerToEdit.JMBG()
}).done(function (data) {
console.log(data);
if (!data.success) {
vm.customerToEdit.JMBG.setError(data.message);
}
else {
vm.customerToEdit.JMBG.clearError();
}
});
}
if (vm.customerToEdit1.JMBG() != undefined && vm.customerToEdit1.JMBG() !== "") {
jQuery.post(rootUrl + 'spa/checkjmbg', {
jmbg: vm.customerToEdit1.JMBG()
}).done(function (data) {
console.log(data);
if (!data.success) {
vm.customerToEdit1.JMBG.setError(data.message);
return;
}
else {
vm.customerToEdit1.JMBG.clearError();
}
});
}
if (vm.customerToEdit2.JMBG() != undefined && vm.customerToEdit2.JMBG() !== "") {
jQuery.post(rootUrl + 'spa/checkjmbg', {
jmbg: vm.customerToEdit2.JMBG()
}).done(function (data) {
console.log(data);
if (!data.success) {
vm.customerToEdit2.JMBG.setError(data.message);
return;
}
else {
vm.customerToEdit2.JMBG.clearError();
}
});
}
if (vm.customerToEdit3.JMBG() != undefined && vm.customerToEdit3.JMBG() !== "") {
jQuery.post(rootUrl + 'spa/checkjmbg', {
jmbg: vm.customerToEdit3.JMBG()
}).done(function (data) {
console.log(data);
if (!data.success) {
vm.customerToEdit3.JMBG.setError(data.message);
return;
}
else {
vm.customerToEdit3.JMBG.clearError();
}
});
}
if (vm.customerToEdit4.JMBG() != undefined && vm.customerToEdit4.JMBG() !== "") {
jQuery.post(rootUrl + 'spa/checkjmbg', {
jmbg: vm.customerToEdit4.JMBG()
}).done(function (data) {
console.log(data);
if (!data.success) {
vm.customerToEdit4.JMBG.setError(data.message);
return;
}
else {
vm.customerToEdit4.JMBG.clearError();
}
});
}
if (vm.bundleSchedules().length == 1 && vm.errors().length > 0) {
vm.errors1.showAllMessages(true);
vm.errors2.showAllMessages(true);
vm.errors3.showAllMessages(true);
vm.errors4.showAllMessages(true);
vm.errors.showAllMessages(true);
return;
}
if (vm.bundleSchedules().length == 2 && (vm.errors().length > 0 || vm.errors1().length)) {
vm.errors1.showAllMessages(true);
vm.errors2.showAllMessages(true);
vm.errors3.showAllMessages(true);
vm.errors4.showAllMessages(true);
vm.errors.showAllMessages(true);
return;
}
if (vm.bundleSchedules().length == 3 && (vm.errors().length > 0 || vm.errors1().length || vm.errors2().length)) {
vm.errors1.showAllMessages(true);
vm.errors2.showAllMessages(true);
vm.errors3.showAllMessages(true);
vm.errors4.showAllMessages(true);
vm.errors.showAllMessages(true);
return;
}
if (vm.bundleSchedules().length == 4 && (vm.errors().length > 0 || vm.errors1().length || vm.errors2().length || vm.errors3().length)) {
vm.errors1.showAllMessages(true);
vm.errors2.showAllMessages(true);
vm.errors3.showAllMessages(true);
vm.errors4.showAllMessages(true);
vm.errors.showAllMessages(true);
return;
}
if (vm.bundleSchedules().length == 5 && (vm.errors().length > 0 || vm.errors1().length || vm.errors2().length || vm.errors3().length || vm.errors4().length)) {
vm.errors1.showAllMessages(true);
vm.errors2.showAllMessages(true);
vm.errors3.showAllMessages(true);
vm.errors4.showAllMessages(true);
vm.errors.showAllMessages(true);
return;
}
vm.customer({
id: 1,
firstName: vm.customerToEdit.firstName(),
lastName: vm.customerToEdit.lastName(),
JMBG: vm.customerToEdit.JMBG(),
email: vm.customerToEdit.email(),
contactPhone: vm.customerToEdit.ContactPhone(),
residenceAddress: vm.customerToEdit.ResidenceAddress(),
secondPersonFirstName: vm.customerToEdit1.firstName(),
secondPersonLastName: vm.customerToEdit1.lastName(),
secondPersonJMBG: vm.customerToEdit1.JMBG(),
secondPersonEmail: vm.customerToEdit1.email(),
secondPersonContactPhone: vm.customerToEdit1.ContactPhone(),
secondPersonResidenceAddress: vm.customerToEdit1.ResidenceAddress(),
thirdPersonFirstName: vm.customerToEdit2.firstName(),
thirdPersonLastName: vm.customerToEdit2.lastName(),
thirdPersonJMBG: vm.customerToEdit2.JMBG(),
thirdPersonEmail: vm.customerToEdit2.email(),
thirdPersonContactPhone: vm.customerToEdit2.ContactPhone(),
thirdPersonResidenceAddress: vm.customerToEdit2.ResidenceAddress(),
fourthPersonFirstName: vm.customerToEdit3.firstName(),
fourthPersonLastName: vm.customerToEdit3.lastName(),
fourthPersonJMBG: vm.customerToEdit3.JMBG(),
fourthPersonEmail: vm.customerToEdit3.email(),
fourthPersonContactPhone: vm.customerToEdit3.ContactPhone(),
fourthPersonResidenceAddress: vm.customerToEdit3.ResidenceAddress(),
fifthPersonFirstName: vm.customerToEdit4.firstName(),
fifthPersonLastName: vm.customerToEdit4.lastName(),
fifthPersonJMBG: vm.customerToEdit4.JMBG(),
fifthPersonEmail: vm.customerToEdit4.email(),
fifthPersonContactPhone: vm.customerToEdit4.ContactPhone(),
fifthPersonResidenceAddress: vm.customerToEdit4.ResidenceAddress(),
note: vm.customerToEdit.note()
});
vm.step(2);
};
vm.cancelSaveCustomer = function () {
ClearCustomerData();
vm.close();
};
vm.addNewCustomer = function () {
vm.step(10);
customerService.get(null, vm.customerToEdit);
};
vm.editCustomer = function () {
vm.step(10);
customerService.get(vm.customer().id, vm.customerToEdit);
};
vm.SendSuspicious = function () {
vm.accept();
};
vm.accept = function () {
}
var obj = {
note: vm.customerToEdit.note(),
year: vm.obj().year,
month: vm.obj().month,
day: vm.obj().day,
customerId: vm.customer().id,
isEmployeeRequested: vm.isEmployeeRequested(),
schedules: vm.bundleSchedules(),
note: vm.customer().note,
jMBG: vm.customer().JMBG,
email: vm.customer().email,
firstName: vm.customer().firstName,
lastName: vm.customer().lastName,
contactPhone: vm.customer().contactPhone,
residenceAddress: vm.customer().residenceAddress,
secondPersonJMBG: vm.customer().secondPersonJMBG,
secondPersonEmail: vm.customer().secondPersonEmail,
secondPersonFirstName: vm.customer().secondPersonFirstName,
secondPersonLastName: vm.customer().secondPersonLastName,
secondPersonContactPhone: vm.customer().secondPersonContactPhone,
secondPersonResidenceAddress: vm.customer().secondPersonResidenceAddress,
thirdPersonJMBG: vm.customer().thirdPersonJMBG,
thirdPersonEmail: vm.customer().thirdPersonEmail,
thirdPersonFirstName: vm.customer().thirdPersonFirstName,
thirdPersonLastName: vm.customer().thirdPersonLastName,
thirdPersonContactPhone: vm.customer().thirdPersonContactPhone,
thirdPersonResidenceAddress: vm.customer().thirdPersonResidenceAddress,
fourthPersonJMBG: vm.customer().fourthPersonJMBG,
fourthPersonEmail: vm.customer().fourthPersonEmail,
fourthPersonFirstName: vm.customer().fourthPersonFirstName,
fourthPersonLastName: vm.customer().fourthPersonLastName,
fourthPersonContactPhone: vm.customer().fourthPersonContactPhone,
fourthPersonResidenceAddress: vm.customer().fourthPersonResidenceAddress,
fifthPersonJMBG: vm.customer().fifthPersonJMBG,
fifthPersonEmail: vm.customer().fifthPersonEmail,
fifthPersonFirstName: vm.customer().fifthPersonFirstName,
fifthPersonLastName: vm.customer().fifthPersonLastName,
fifthPersonContactPhone: vm.customer().fifthPersonContactPhone,
fifthPersonResidenceAddress: vm.customer().fifthPersonResidenceAddress
};
(obj.schedules).forEach(function (schedule) {
schedule.EmployeeWorkingDayId = getEmployeeWorkingDay(schedule);
});
shell.isLoading(true);
jQuery.post(rootUrl + 'SpaSchedule/BundleScheduleByEmployeeAdminOS', {
data: obj
}).done(function (result) {
if (result.success === true) {
ClearCustomerData();
$(window).off('popstate', vm.goBack);
$(window).off('resize', adjustModalPosition);
dialog.close(vm, result.id);
setTimeout(function () {
shell.isLoading(false);
}, 50);
var style = getDialogStyle();
var dialogMessage = '';
if (shell.currentUser().permissions().length == 0) {
dialogMessage = shell.successfullyScheduled();
}
else {
dialogMessage = shell.successfullyScheduledOL();
}
theDialog = dialog.showMessage(dialogMessage, ' ', [shell.btnOkText()], false, {
style: style
}).then(function (dialogResult) {
vm.close();
});
} else {
if (result.errorCode === 100) {
var style = getDialogStyle();
theDialog = dialog.showMessage(result.message, ' ', [shell.cancelButtonText()], false, {
style: style
}).then(function (dialogResult) {
vm.close();
});
}
else {
toastr.error(result.message);
}
setTimeout(function () {
shell.isLoading(false);
}, 200);
}
});
};
return vm;
//#region Internal Methods
function activate(obj) {
vm.isEmployeeRequested(false);
vm.customerSearchCriteria('');
vm.obj(obj);
vm.bundleSchedules(obj.bundleSchedules());
(vm.bundleSchedules() || []).forEach(function (item) {
item.employeeId = ko.observable(item.Employee.Id);
});
vm.step(10);
$(window).on('popstate', vm.goBack);
$(window).on('resize', adjustModalPosition);
vm.note("");
vm.customer({});
vm.employee({});
if (obj.IsClient) {
vm.customerToEdit.firstName(shell.currentUser().firstName());
vm.customerToEdit.lastName(shell.currentUser().lastName());
vm.customerToEdit.JMBG(shell.currentUser().userName());
vm.customerToEdit.email(shell.currentUser().email());
vm.customerToEdit.ContactPhone(shell.currentUser().contactPhone());
}
else {
vm.customerToEdit.firstName("");
vm.customerToEdit.firstName.isModified(false);
vm.customerToEdit.lastName("");
vm.customerToEdit.lastName.isModified(false);
vm.customerToEdit.JMBG("");
vm.customerToEdit.JMBG.isModified(false);
vm.customerToEdit.email("");
vm.customerToEdit.email.isModified(false);
}
applyCustomerSearch();
return true;
}
//#endregion
});
Mention: function is working ok, on click also, but I want just to call it on click, not every time on loading the page.