IE10 event :(change) with confirm does not reset value to previous value

Question

I have a problem with Internet Explorer (v 10 for now) I have 2 radio button yes/no with a confirm box, if the user click on Cancel, the value should go back to original value

Ex: yes is default value. user click no, popup show - user cancel should go back to yes. Problem... the value does not change it's staying on No

My code work fine on FireFox and GoogleChrome

See jsFiddle (You must open it in IE10 I think...)

enter code here

https://jsfiddle.net/grosjambon/nxy0g1cg/

Please comment if jsfiddle does not work

EDIT1

Found something on here which work but have a little problems. When I try to bind multiple parameter to the function in the way Knockout is doing in the Click Binding, when the "person" confirm to change the value, the value is not updated in the radio button (both radio have nothing inside them)

HTML

ViewModel(Knockout) Method that have problems with Ok confirm (both radio are empty)

 m.confirmCheck2 = function (propertyName, inputValue, stepName, data, event) {
                console.log(event);
                if (!confirm("Are you sure?")) {
                    event.stopImmediatePropagation();            
                    return false;
                }
                return true;
            }

Method that work but does not have extra property

html

viewmodel

m.confirmCheck = function (data, event) {
                console.log(data);
                console.log(event);
                if (!confirm("Are you sure?")) {
                    event.stopImmediatePropagation();
                    return false;
                }
                return true;
            }

EDIT 2 So in between the reply I found a solution using the old answer of Roy. P.S If we complicate the problems : So I have multiple property m.Property1 m.Property2, m.Property3. When 1 is True all other are false, if the True Property goes False everything is false. Only 1 value can be true.

So, with the previous answer of RoyJ when you change a value, it will trigger the subscribe on each property that has the Confirm Popup because all 3 property trigger the same confirm.

    var showPopup = true; 
    m.Property1.subscribe(function () {
                var inputValue = m.Property1();
                if (showPopup) {
                    if (confirm(f.lang("Message"))) {
                        showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                        resetValueWithCondition("Property1"), inputValue);
                    } else { // if cancel
                        showPopup = false;
                        m.Property1(!inputValue);
                        return true;//Exit code
                    }
                }
                showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                resetValueWithCondition("Property2", inputValue);
                showPopup = true;

            });
            m.Property2.subscribe(function () {
                var inputValue = m.Property2();
                if (showPopup) {
                    if (confirm(f.lang("Message"))) {
                        showPopup = false;//Disable showPopup because we set value inside resetValueFunction
                        resetValueWithCondition("Property2", inputValue);
                    } else { // if cancel
                        showPopup = false;
                        m.Property2(!inputValue);
                        return true;//Exit code
                    }
                }

                showPopup = true;

            });

Function resetValueWithCondition

function resetValueWithCondition(propertyName,inputValue) {
                if (!m.Property1() && !m.Property2()) {//In this If I hide every field in my form and set Property 1 and Property2.... to false.
                    //m.Step1Visiblity(false);  
                    resetFormValueAfterStepPosition('1Group0');//Reset all form field      
                    setPropertyValue(false, false);//Here is simply m.Property1(false) etc...
                } else {
                    resetFormValueAfterStepPosition('1Group0');//Reset all form field
                    if (inputValue == true) {//Only perform this method if Property goes to True, otherwise don't execute (otherwise it trigger the confirm box multiple time when I Set Propertyvalue
                        m.visibilityLogic(propertyName);//Set PropertyValue to either true,false or false,true if is it property1 or property2
                    }

                }

            }

Roy J · Accepted Answer

You're paying too much attention to the form and not enough to your model. Instead of fiddling with events related to the radio buttons, work with your observables. In this case, you need a layer between your data item and the front end to check for the confirm.

var ViewModel = function() {
  var self = this,
    savedHS01 = ko.observable(true);

  self.HS01 = ko.computed({
    read: savedHS01,
    write: function(newValue) {
      if (confirm("Are you sure?")) {
        savedHS01(newValue);
      }
      self.HS01.notifySubscribers();
    }
  });
  self.HS02 = ko.observable();
};

ko.applyBindings(new ViewModel());

body {
  font-family: arial;
  font-size: 14px;
}



  
  yes

  
  no
  
Hs01:
  
  
ShouldBe:

IE10 event :(change) with confirm does not reset value to previous value

Answers (1)

Related Questions