Javascriptを

Question

私はダムそれ少しダウンよ、私はいくつかの要素の1つの方法を示して私のサイトのコードのビットを持っているの復帰、私はこれを持っていたと言うことができます：

「私はりんごを持っている」

私はJavaScriptが少し使用されているので、ドロップダウンが変わったときにオレンジ色で表示されます。

「私はオレンジ色です」

私が持っているフォームでsubmitをクリックすると、新しい値がデータベースに渡されていますが、ページはリフレッシュされません。私は新しいエントリを作成するために行くとき、私の初期値は次のとおりです。

「私はオレンジを持っている」しかし、それはそれはの初期状態をだために戻って戻った場合、私は希望：

「私はりんごを持っています」

サイトへの通知方法はありますか？提出が完了したら、すべての変更をクリアします。

はここに私の最初のJavaScriptのだ：

function getRequirements(client_name,location) {   
var strURL="display/getRequirements.php?client_name="+client_name+"&location="+location; 
var req = getXMLHTTP(); 

    if (req) { 
     req.onreadystatechange = function() { 

      if (req.readyState == 4) { 
       // only if "OK" 
       if (req.status == 200) {       
        document.getElementById('requirementsdiv').innerHTML=req.responseText;      
       } else { 
        alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
       } 
      }    
     }   
     req.open("GET", strURL, true); 
     req.send(null); 
    }  
} 

Answer 1

一つの解決策は、あなたのAJAX要求を送信した後、元の状態に変数を戻りますボタンにリスナーを追加することです。

revert()という名前の関数を使用して、必要に応じてすべての変数をリセットすることができます。 jQueryのを使用して例えば

、...

$('#button').click(function(){ 
    $.get("myurl",function(data){ 
    if(data.status == 200){ 
     //Successful AJAX request. 
     revert(); 
    } 
    }); 
}); 

Answer 2

DOMはない自分自身のレコードの変更を行いますので、現在の状態のみを追跡します。

あなた自身のコードは、ページの最初のinnerHTML、または変更したものを追跡し、ajax呼び出し後にページを元の状態に戻すことができます。何らかのページリロードなしで自動的にそれを行うためのjavascript関数はありません。

変更する各要素と元の状態を把握するのは難しくありません。ページを復元する場合は、その要素のリストを繰り返してコンテンツを元々のやり方。

ここでは、自分で変更を追跡する方法を説明します。要素を変更する直前にmarkElement()に電話してください。それらをすべて復元する場合はrestoreElements()に電話してください。

var changedElements = {}; 
var changedCntr = 1; 

// call this right before you change the contents of any element 
// that you want later restored 
function markElement(elem) { 
    if (!elem.id) { 
     elem.id = "_changeCnt" + changedCntr++; 
    } 
    // if we haven't already saved the state of this element, save it now 
    if (!(elem.id in changedElements)) { 
     changedElements[elem.id] = elem.innerHTML; 
    } 
} 

// call this when you want to restore all elements 
function restoreElements() { 
    for (var id in changedElements) { 
     var elem = document.getElementById(id); 
     elem.innerHTML = changedElements[id]; 
    } 
    changedElements = {}; 
} 

あなたが復元ないとき任意のイベントハンドラを失うリスクを実行しないように、あなたはおそらく唯一のリーフノード（子を持たない要素）にmarkElementを呼び出す必要があります。

注：このコードは、子オブジェクトの作成/削除前に親ノードでmarkElementを呼び出さない限り、要素の変更のみを処理し、作成/削除は処理しません。

Answer 3

フォームフィールドとして設定していた場合は、フォームをリセットするだけで済みます。ユーザーが入力できるようにしたくない場合は、readonly属性を追加するだけで、入力要素のように見えないようにスタイルを変更することもできます。