CODEWITHSUNDEEP
javascriptjqueryfirefox
Milan Nosáľ
Milan Nosáľ

Reputation: 19767

JavaScript (JQuery): Cancelling a selection in select control in FireFox

In my application, I have a list of <select> controls. Change of selection in each of these controls can be made only after user confirmation. So I deal with it as follows:

<select onchange="changeSelect(this)" onmousedown="clickSelect(this)">
    <option value="1" selected="true">A</option> // here is 'default' value 1
    <option value="2" >B</option>
</select>

<select onchange="changeSelect(this)" onmousedown="clickSelect(this)">
    <option value="1" >A</option>
    <option value="2" selected="true">B</option> // here is 'default' value 2
</select>

// more select controls with arbitrary 'default' values, they can be added and removed dynamically

When the user clicks the select to choose another option, the clickSelect(this) method saves the currently chosen (old) selection:

function clickSelect(select) {
    globalScope.previouslySelected = $(select).val();
}

And now, if the user really tries to change the selection, I ask the user for confirmation, and if she does not confirm, I use the saved value to restore the previous state:

function changeSelect(select) {
    var response = confirm("Current changes to the threat log will be lost. Continue anyway?");
        if (response == false) {
            // change it back
            $(select).val(globalScope.previouslySelected);
            return;
        }
    }
}

Now, on IE, Chrome and Opera it works just fine. However, when I use Firefox, it does not work. THe reason is that FF calls the onmousedown handler twice during the selection -- first time when the user clicks to roll down the select control, and second time when she selects a new selection. Therefore the last remembered value of globalScope.previouslySelected will become the new selected value and not really the old one, as in other browsers.

I know using global variables is considered bad practice. This is not the issue here. Using any other storage will not make it work.

My only idea right now is to write a Firefox specific piece of code in the clickSelect(select) handler and ignore the second notification. However, for some reason the following code I found on stack overflow does not work:

if($.browser.mozilla) {
     console.log("Olalala");
}

E.g., in Chrome it throws following exception:

Uncaught TypeError: Cannot read property 'mozilla' of undefined

So how can I make it work so that ti would only run in FF? Or if any of you guys have a better solution to the problem of confirmation, I would gladly hear it. Just remember, there is a dynamic set of select controls, not just a single one. It has to work for all of them. Plus they can be added or removed dynamically, so in a single page request their number can vary. User loads page with a single select control, presses a '+' button and adds another select control, etc., but the solution has to work uniformly with all the controls.

Upvotes: 0

Views: 36

Answers (1)

bumpy
bumpy

Reputation: 2002

Is there a specific reason you're saving the currently selected option using the onmousedown listener? You can just initialize your global variable to hold the default option, and update it whenever a new selection is made.

Something like this:

HTML

<select id="mySelect" onchange="changeSelect(this)">
    <option value="1" >A</option>
    <option value="2" >B</option>
</select>

JS

var globalScope = {previouslySelected: $("#mySelect").val()};
function changeSelect(select) {
    var response = confirm("Current changes to the threat log will be lost. Continue anyway?");
    if (response == false) {
        // change it back
        $(select).val(globalScope.previouslySelected);
        return;
    }

    globalScope.previouslySelected = $(select).val();
}

EDIT

I noticed that on Firefox, the second mousedown event's target is the option, so you can use the following code to ignore the event in this case:

$("select").mousedown(function(e) {
    if ($(e.target).is('option'))
        return;

    globalScope.previouslySelected = $(this).val();
});

With this code you can remove the onmousedown registration from your DOM.

Upvotes: 2

Related Questions