How to prevent multiple html selection box displayed on screen?

Question

Hi All:

I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...

Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).

Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).

If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.

The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.

You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.

I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...

Puzzled, screwed up for this afternoon...

Thanks for any suggestons in advance!

Answer 1

JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.

At the top of gridview-helper.js:

var is_choice_visible = false;

In your double-click handler:

$(this).dblclick(function()
{
    if (is_choice_visible)
        return;
    is_choice_visible = true;
...

For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.

Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:

var html = ["<select>..."];
for (var i in consultantnames)
{
    html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");

Answer 2

Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.