0

一度に 1 つのフィールドを編集して保存できる AJAX ページを作成しようとしています。このページは AJAX ロードで作成されているため、すべてのフィールドと DIV 送信 ID 名がわかりません。

しかし、アイデアは、フィールドを編集し、Enter キーを押す (または [保存] をクリックする) と、DIV の ID を送信する関数を機能させるというものです。

したがって、誰かがタブで移動すると、onfocus が関数を呼び出しますが、これは私が望んでいるものではありません。onclick はクリックされた場合にのみ実行されますが、これは foundNode.click(); では実行できません。したがって、treatenterastab のアイデアにはあまり役に立ちません。

誰でも提案を提供できますか?

ありがとうグレッグ

       <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>
4

1 に答える 1

0

フォーカスイベントに関しては、イベントがバブリングするのを防ぐだけでなく、デフォルトのアクションを実行するのを防ぐことができます。つまり、フォーカスイベントをキャプチャして、好きなアクション（または非アクション）を実行させることができます。あなたの質問の他の部分への答えも同様です。

私は個人的に自分以外のJavaScriptライブラリを使用していないので、dojoや、使用している可能性のある他のライブラリのコンテキストであなたを助けることはできません。

おそらく、私の貧しい脳を助けるために、目の前の質問を中心に展開する文脈をもう一度明確に表現できたら？;-)

于 2010-09-07T02:56:24.977 に答える