Why my function is being called on by itself

55 Views Asked by At

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.

0

There are 0 best solutions below