Restore Selected Value on Cancel

[Frinavale]

I have a control that is supposed to allow the user to either allow or cancel what they were doing.

When I apply this to a <select> element (or DropDownList), I cannot save the original value to restore it later.




The following JavaScript is a "property" that loops through all of the controls associated with the custom confirm control and adds Listeners depending on the type of control it is.

set_AssociatedControlIDs: function(listOfControlIDs) {
        this._listOfControlIDs = listOfControlIDs;
        var len = this._listOfControlIDs.length;
        for (var i = 0; i < len; i++) {
            this._displayDelegate = Function.createDelegate(this, this._displayControl);
            this._saveOriginalDropDownListValueDelegate = Function.createDelegate(this, this.save_originalDropDownListSettings);
 
            var associatedControl = $get(this._listOfControlIDs[i]);
            if (associatedControl.type == 'select' || associatedControl.type == 'select-one') {
 
                $addHandler(associatedControl, 'change', this._displayDelegate);
                $addHandler(associatedControl, 'click', this._saveOriginalDropDownListValueDelegate);
            }
            else
            { $addHandler(associatedControl, 'click', this._displayDelegate); }
        }
    },

So, now when the user clicks on the a <select> element associated with the control the "save_originalDropDownListSettings" method is called.

This method saves the <select> element that was clicked on and the current selected index:

save_originalDropDownListSettings: function(e) {
        this.dropDownList = e.target;
        this.originalDropDownListIndex = e.target.selectedIndex;
 
        e.preventDefault();
        e.stopPropagation();
    },

If the <select> element associated with the control is changed (ie the selected index is changed) the control is displayed which allows the user to click Ok or Cancel.

If the user clicks cancel, I call a the method that "restores" the selected index....well at least I'm attempting to restore the selected index:

restore_originalDropDownListSettings: function() {
        if (this.dropDownList != null && this.originalDropDownListIndex != null) {
            this.dropDownList.selectedIndex = this.originalDropDownListIndex;
        }
    },

In this method the stored this.dropDownList is an <option> element (??) and the this.originalDropDownListIndex is undefined.....therefore the <select> element associated with the control is not reset to its original state.

Where am I going wrong here?
Is there a better way to cancel a select element's index change?

Thanks for your time,

-Frinny

[Dormilich]

what object refers "this" to, maybe the problem lies there (especially since event handlers change the context of "this")?

[Frinavale]

"this" refers to my Object.

[Dormilich]

and you are sure, that this' context is not changed to anything else?

[Frinavale]

Double checking:

"this" is the Object in the method saves which <select> was clicked and it's original selected index.

"this" is the same Object in the method that should restore the <select> to its original selected value.


Why, then, are the values saved null in the method that restores the <select>?

save_originalDropDownListSettings: function(e) {
   this.dropDownListsID = e.target.id;
   this.originalDropDownListIndex = e.target.selectedIndex;
 
   e.preventDefault();
   e.stopPropagation();
},
restore_originalDropDownListSettings: function() {
   if (this.dropDownListID != null && this.originalDropDownListIndex != null) {
     $get(this.dropDownListID).selectedIndex = this.originalDropDownListIndex;
   }
},

Also, why is it going into the If block since this.dropDownLIstID is null???

[Frinavale]

Oh wait I think I see a type-o!

Right, I fixed the type-o but I'm still having the same problem..........

save_originalDropDownListSettings: function(e) {
   this.dropDownListID = e.target.id;
   this.originalDropDownListIndex = e.target.selectedIndex;
 
   e.preventDefault();
   e.stopPropagation();
},
restore_originalDropDownListSettings: function() {
   if (this.dropDownListID != null && this.originalDropDownListIndex != null) {
     $get(this.dropDownListID).selectedIndex = this.originalDropDownListIndex;
   }
},

[Frinavale]

I solved the problem.

Here's what was happening:

• The user clicks the select element
  • The original selected index was saved
• The user selects a new value
  • The onchange event was executed...
  • The onclick event for the option selected....
    • the option's onclick event bubbled up to the Select element's onclick
• The index was being saved again, but it couldn't because it was an option type

To get around this I saved a boolean value which indicated that the index had already been saved....if this was true, then the value would not be saved again.


-Frinny