1

I have a knockout click binding function that works in Chrome and IE, but errors in firefox with the following error:

ReferenceError: event is not defined

I realise that I have to pass in the event as it's not part of the window in FF, but it looks like FF changes the binding so that I am unable to pass in the event.

My template as written looks like this:

<button class="btn subplan" data-bind="click: function(data, event) { $root.openPlanModal(data, event) }, css: {'btn-success': (percentComplete()==100 && statusOverride()=='' && SOCexpired()==false) || (statusOverride()=='pass' && SOCexpired()==false), 'btn-warning':percentComplete()<100 && percentComplete()>0 && statusOverride()=='' && SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

However, when rendered by FF is looks like this (without the params):

<button class="btn subplan btn-success" data-bind="click: function(){ ($root.openPlanModal || $root.trainingModel().openPlanModal)($data, event) }, css: {'btn-success': (percentComplete()==100 &amp;&amp; statusOverride()=='' &amp;&amp; SOCexpired()==false) || (statusOverride()=='pass' &amp;&amp; SOCexpired()==false), 'btn-warning':percentComplete()<100 &amp;&amp; percentComplete()>0 &amp;&amp; statusOverride()=='' &amp;&amp; SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

The CSS binding still seems to work and colour the button accordingly, but the params to the click binding function have gone.

Ben Drury
  • 1,356
  • 2
  • 16
  • 34
  • Could this question https://stackoverflow.com/questions/18221569/event-parameter-not-defined-for-knockout-click-binding-using-firefox resolve your issue? – Jose Luis Aug 23 '18 at 16:38
  • Unfortunately not, as I have the event in the function params already, but FF strips it out. – Ben Drury Aug 23 '18 at 16:46
  • 1
    I've tried in this fiddle: https://jsfiddle.net/sqL85cfe/. It seens to work. I've added an `id` attribute at your button, but don't have this error. Could you add your model view? – Jose Luis Aug 23 '18 at 17:07
  • Thanks Jose. I'll have to check with the code owner as its proprietary. – Ben Drury Aug 23 '18 at 17:59

1 Answers1

4

Pardon me if I am miss-understanding the goal here but why are you trying to pass data/event when those are already passed for you by ko click binding (see Note 1 in black)?

To get that id all you really need is to pass the function name you want to be the handler for your button click and since that function is part of your model it would automatically get the data/event parameters:

data-bind="click: openPlanModal"


function VM() {
  var self = this;

  self.percentComplete = ko.observable();
  self.statusOverride = ko.observable();
  self.SOCexpired = ko.observable();
  self.name = ko.observable('name');
  self.latestSOCDateDisplay = ko.observable('latestSOCDateDisplay');

  self.openPlanModal = function(data, event) {
    console.log(event.currentTarget.id);
  }
}

ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button class="btn subplan" id='id1' data-bind="click: openPlanModal, css: {'btn-success': (percentComplete()==100 && statusOverride()=='' && SOCexpired()==false) || (statusOverride()=='pass' && SOCexpired()==false), 'btn-warning':percentComplete()<100 && percentComplete()>0 && statusOverride()=='' && SOCexpired()==false, 'btn-danger': statusOverride()=='fail' || SOCexpired()==true}">
  <span data-bind="text: name()">Navigationserklärung</span>
  <span style="display: block" data-bind="text: latestSOCDateDisplay()"></span>
</button>

Here is the jsFiddle

Akrion
  • 18,117
  • 1
  • 34
  • 54
  • Does this work in FF? FF has an issue with the event needing to be specifically sent as it's not part of the window as with other browsers. – Ben Drury Aug 24 '18 at 07:01
  • Interesting, it actually does work in FF, so that can't be the issue that's causing my problem. Thanks. – Ben Drury Aug 24 '18 at 07:03
  • Yes it does work. I tested it before posting etc. Thanks – Akrion Aug 24 '18 at 07:06
  • @BenDrury did this solve your problem or helped you in any way? – Akrion Aug 28 '18 at 15:21
  • I hasn't solved the problem, but it has eliminated my original avenue of investigation. – Ben Drury Aug 29 '18 at 06:03
  • So what is the current problem? I thought it was that the parameters for your event ware not showing in FF and thus ignored. – Akrion Aug 29 '18 at 06:13
  • I thought the problem was that, because I thought I needed to pass them to solve the known issue with FF about the event not being part of the window, but the fiddle has proved that's not the case, so that's not the issue. There is some other reason that that event is not available in the called function. – Ben Drury Aug 30 '18 at 05:34
  • I actually haven't had time to get back to this as yet..(changing priorities!) – Ben Drury Aug 30 '18 at 05:34