收录日期:2020/10/28 10:04:24 时间:2010-09-07 03:41:21 标签:javascript,dojo,onclick,onfocus

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>

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? ;-)