C
Christopher Nelson
I want to set up an edit-in-place of a binary value using a select.
If I create the select element in a script in my page, it works OK but
if it's created in an on-click for the text I want to change, I can't
select items with the mouse in some browsers. My code looks like:
<body>
<div>Fails: <div id='dhtml'>foo</div></div>
<div>Works: <div id='dhtml-2'>foo</div></div>
<script language='JavaScript'>
function createSelect(div) {
var editor=document.createElement('select');
var labels = [ 'false', 'true' ];
editor.name=div.id+'_edit';
editor.size='1';
for (var i = 0; i < 2; ++i) {
var opt=document.createElement('option');
opt.value=i;
// opt.text=labels;
opt.appendChild(document.createTextNode(labels));
if (i == 0) opt.selected = true;
// editor.appendChild(opt);
editor.insertBefore(opt, null);
}
editor.onblur=doneEdit;
div.replaceChild(editor,div.firstChild);
return editor;
}
function initEdit() {
var div=this;
var editor=createSelect(div);
}
function doneEdit() {
var editor=this;
var div = editor.parentNode;
text=document.createTextNode(editor.value);
div.replaceChild(text,editor);
}
var div=document.getElementById('dhtml');
div.onclick=initEdit;
var div=document.getElementById('dhtml-2');
var editor=createSelect(div);
</script>
</body>
The action I'm testing is click the select, drag to the other value,
and release the mouse button.
The first select works only in Opera 9.10. The second select works in
Firefox 2, IE 7 and Opera 9.1. I've Googled this groups history
without finding a clear pointer to what I'm doing wrong. Any
thoughts...?
If I create the select element in a script in my page, it works OK but
if it's created in an on-click for the text I want to change, I can't
select items with the mouse in some browsers. My code looks like:
<body>
<div>Fails: <div id='dhtml'>foo</div></div>
<div>Works: <div id='dhtml-2'>foo</div></div>
<script language='JavaScript'>
function createSelect(div) {
var editor=document.createElement('select');
var labels = [ 'false', 'true' ];
editor.name=div.id+'_edit';
editor.size='1';
for (var i = 0; i < 2; ++i) {
var opt=document.createElement('option');
opt.value=i;
// opt.text=labels;
opt.appendChild(document.createTextNode(labels));
if (i == 0) opt.selected = true;
// editor.appendChild(opt);
editor.insertBefore(opt, null);
}
editor.onblur=doneEdit;
div.replaceChild(editor,div.firstChild);
return editor;
}
function initEdit() {
var div=this;
var editor=createSelect(div);
}
function doneEdit() {
var editor=this;
var div = editor.parentNode;
text=document.createTextNode(editor.value);
div.replaceChild(text,editor);
}
var div=document.getElementById('dhtml');
div.onclick=initEdit;
var div=document.getElementById('dhtml-2');
var editor=createSelect(div);
</script>
</body>
The action I'm testing is click the select, drag to the other value,
and release the mouse button.
The first select works only in Opera 9.10. The second select works in
Firefox 2, IE 7 and Opera 9.1. I've Googled this groups history
without finding a clear pointer to what I'm doing wrong. Any
thoughts...?