1

サーバーによって生成された HTML 入力要素があり、次のようになります。

サーバー側はこちら

"<input id='" + cRoadList.getRoadListNumber() + ",start_km' style='' type=\"text\" value='"+ cRoadList.getStartKm() + "' onkeypress='handleRoadListDataUpdate(\""+cRoadList.getStartKm()+"\")'

ご覧のとおり、入力要素の属性は動的に生成されますが、そうではないため、次のような静的データを配置して単純化しましょう。

"<input id='myID' style='' type=\"text\" value='100' onkeypress='handleRoadListDataUpdate(\"100\")'

この HTML 入力要素の最も重要な部分は、関数handleRoadListDataUpdateを呼び出すonkeypressイベントです。

これがクライアント部分です

function handleRoadListDataUpdate(oValue) // The function accpets the old value of the *input* element
{
   var event = handleRoadListDataUpdate.caller.arguments[0] || window.event ;

   var keyPressed = event.keyCode;
   if(keyPressed == 13)
   {
        var roadListNumber = event.target.id.split(",")[0];
        var inputId        = event.target.id.split(",")[1];
        var nValue         = event.target.value;

        if(nValue != oValue)
        {
               var userAction = confirm("Are you sure you want to change this value?\nPrevious value:   " + oValue + "\nNew value: " + nValue);
               if(userAction == true)
               {   
                    var url = "/GBS/RoadListController";
                    var params = "type=updateRoadList&roadListNumber=" + roadListNumber + "&updateData="+inputId + "&newValue="+ nValue;
                    dhtmlxAjax.post(url,params,function(loader) 
                    {
                            var xmlDoc = loader.xmlDoc.responseXML;

                            var sqlResponse = xmlDoc.documentElement.getElementsByTagName("response");
                            var result      = sqlResponse[0].getAttribute("value");

                            if(result == "sql_error")
                            {
                                alert("The operation could not be completed because of an network error!");
                                event.target.value = oValue;
                            }
                            else if(result == "sql_success")
                            {
                                alert("The operation completed successfully!");
                                //Change the parameter oValue of the parent function
                            }  
                    });
               }
               else
               {
                   event.target.value = oValue;
               }
        }     
   }    
}

基本的に、この関数は、ユーザーが入力要素内に入力した新しい値でデータベースを (ajax を使用して) 更新し、キーEnterを押します。パラメータ oValue が入力要素のパラメータと異なる場合、Ajax リクエストが作成され、データベースを新しい値で更新できます。

操作が完了すると、入力要素 (ユーザーが入力したもの)に新しい値が入りますが、問題は、パラメーター oValue が新しい値で変更されていないため、もう一度 Enter キーを押すと、関数が再度実行されることです。

だから私の質問は次のとおりです。

handleRoadListDataUpdate() 関数のパラメーターoValueをnValueと同じになるように変更して、ユーザーが誤って Enter キーを押した場合に関数が ajax 部分を再度実行しないようにする方法は?

PS

jQuery コードは使用しないでください。純粋な JavaScript のみ!

4

0 に答える 0