Question 87046 in ASP.NET Question posted in
The official documentation can be found here.

How to prevent function with parameters from being called on page load? – Asp.net

I have a function that is called after button is clicked. it looks like this

<button class=".." data-bind="click: $root.openModal">

Now I am trying to pass parameters to this function. Resulting in this code

<button class=".." data-bind="click: $root.openModal(Object.Keys(params))">

Parameters are passed successfully, but now whenever I load the page, before even clicking the button, openModal function is called. Same happens even if I leave ‘()‘ instead of openModal(Object.Keys(params)).

function itself, looks like this

self.openModal = function (keys) {
    popupObservable(true);

    self.modal = $.openModalDefault({
        url: '#js-confirmation-dialog-template',
        className: 'doc',
        onLoad: function () {
            popupObservable(false);
            if (!$(selectors.confirmationModal)[0]) {
                return;
            }
            var viewModel = new ConfirmationDialogViewModel(function () {
                self.confirm(keys);
                self.modal.close();
            }, "This part is irrelevant");
            ko.applyBindings(viewModel, $(selectors.confirmationModal)[0]);
        }
    });
};

What is the difference between openModal and openModal() and how do I pass parameters to this function without triggering it on page load?

Tags:

2

Answers


  1. 0

    That is because you are invoking the function on data-bind="click: $root.openModal(Object.Keys(params))" instead you want to construct a function dynamically with those parameters and execute that on click.

    self.openModalWithParam = function (keys) {

// keys come from the outer function and returns a function for those values

return function () {
    popupObservable(true);

    self.modal = $.openModalDefault({
        url: '#js-confirmation-dialog-template',
        className: 'doc',
        onLoad: function () {
            popupObservable(false);
            if (!$(selectors.confirmationModal)[0]) {
                return;
            }
            var viewModel = new ConfirmationDialogViewModel(function () {
                self.confirm(keys);
                self.modal.close();
            }, "This part is irrelevant");
            ko.applyBindings(viewModel, $(selectors.confirmationModal)[0]);
        }
    });
 };
};
    Login or Signup to reply.
  2. 0

    Alternatively, you could just pass a function literal as the click handler:

    <button data-bind="click: () => $root.openModal(Object.Keys(params))">

    Which I would personally prefer because it means you don’t have to duplicate your openModal function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search