Hello All, I am trying to make a AJAX page that allows people to edit one field at a time, and save it. The page is made via a AJAX load, so I dont know all the field and DIV submit ID names.
But the idea is they edit a field, press enter (or click Save) and it funs a function sending the ID of the DIV.
So a onfocus will call the function if someone tabs through, which is not what I want. And a onclick will only run if clicked, which i cant do a foundNode.click(); so it doesnt really help with the treatenterastab idea.
Is anyone able to offer suggestions?
thanks greg
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
// Show and Hide the input element
function ShowHideFields(objName){
dojo.query("." + objName).forEach(function(node, index, arr){
console.debug(node.innerHTML);
var myTextField = dojo.byId(node);
if(myTextField.style.display == "none") {
myTextField.style.display = "block";
} else {
myTextField.style.display = "none";
}
});
}
// allow edit and save the data
function Edit(id) {
var task = id.substr(0, 4)
var id = id.substr(4)
if (task == "COMM"){
if(dojo.byId('discom' + id).style.display == 'none'){
dojo.byId('discom' + id).style.display = 'block';
dojo.byId('edicom' + id).style.display = 'none';
dojo.byId('COMM' + id).innderHTML = 'edit';
EditSave('discom' + id , 'edicom' + id, id );
} else if (dojo.byId('discom' + id).style.display == 'block') {
dojo.byId('discom' + id).style.display = 'none';
dojo.byId('edicom' + id).style.display = 'block';
dojo.byId('COMM' + id).innerHTML= 'save';
}
} else if (task == "NAME"){
if(dojo.byId('disnam' + id).style.display == 'none'){
dojo.byId('disnam' + id).style.display = 'block';
dojo.byId('edinam' + id).style.display = 'none';
dojo.byId('NAME' + id).innerHTML = 'edit';
EditSave('disnam' + id , 'edinam' + id, id );
} else if (dojo.byId('disnam' + id).style.display == 'block') {
dojo.byId('disnam' + id).style.display = 'none';
dojo.byId('edinam' + id).style.display = 'block';
dojo.byId('NAME' + id).innerHTML = 'save';
}
}
}
function EditSave(destination, source, id ){
//AJAX here, but for the sake of example this will work.
if(dojo.byId(destination) ) {
dojo.byId(destination).innerHTML = dojo.byId(source).value;
}
}
// capture the enter, and make it a tab to execute
function treatEnterAsTab(evt) {
if (evt.keyCode == dojo.keys.ENTER) {
var formElements = null;
if (formElements = dojo.query('*')) {
var foundNode = false;
for (var i = 0; i < formElements.length; i++) {
if (evt.target == formElements[i] && formElements[(i + 1)]) {
nextNode = formElements[(i + 1)];
foundNode = formElements[(i + 1)];
break;
}
}
if (foundNode && foundNode.focus) {
//set focus, but really set Click would be better.. Any ideas?
foundNode.focus();
}
}
}
}
// connect the key press event to the input boxes
dojo.addOnLoad(function(){
dojo.query("input").forEach(function(node, index, arr){
dojo.connect(dojo.byId(node),"keypress", treatEnterAsTab);
});
});
</script>
</head>
<body>
<div style="position: relative; float: left;">
<b style="float:left;">My Comment:</b><div id="disnam001" style="float:left; display: block;" > My Comment Here</div><input style="display:none; float:left;" id="edinam001" type="text" name="edinam001" value=" My Comment Here"/>
<div tabindex="0" onfocus="Edit(this.id);" id="NAME001" style="position: relative; float: right; margin-left: 10px; cursor:pointer; height:16px; padding: 0px 0px 0px 20px;" >edit</div>
</div>
</body>