views:

145

answers:

2

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>
A: 

In regard to the focus event, you can prevent an event from bubbling as well as from performing it's default action. In other words you could capture the focus event and have it perform whatever action (or non-action) you like. The answer to the other part of your question is similar.

I personally don't use any JavaScript libraries other than my own, so I can't help you out in the context of dojo or whatever other libraries you might be using for I haven't any experience with them.

Perhaps if you could articulate the context revolving around the question at hand once more to help my poor brain out? ;-)

Xaxis
I have updated the code above to show more of the context. If you run it you will get a better idea for that it does.
greg
By the way, the example code it not cut down much, so it works with my larger page where there are more Input fields, but it works like that stand alone.
greg
A: 

I got this working via here, if anyon wants to do similar.

Other Forum

greg