자바 스크립트 되 돌리면

Question

거 야 그 아래로 조금,하지만 일부 요소를 한 가지 방법을 보여줍니다 내 사이트에서 코드의 비트 바보, 나는이 있었다 말할 수 :

I "내가 사과해야" 자바 스크립트 비트를 사용하여 드롭 다운이 변경되면, 오렌지색을 말하면서 p 태그가 이제 쓰여집니다 :

"오렌지색입니다"

내가 가지고있는 양식에서 submit을 클릭하면 새 값이 데이터베이스로 전달되지만 페이지가 새로 고쳐지지 않습니다. 나는 새 항목을 만들어 갈 때, 내 초기 값은 다음과 같습니다

"나는 오렌지를 가지고"그러나 그것의 초기 상태를의에 다시 복귀하면 내가 좋아하는 것 :

"나는 사과해야"

제출이 완료되면 사이트에 알릴 수있는 방법이 있습니까? 새로 고치지 않고 모든 변경 사항을 지우시겠습니까?

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 호출 후에 코드가 페이지를 초기 상태로 복원 할 수 있습니다. 일종의 페이지를 새로 고치지 않고도 자동으로 수행 할 수있는 자바 스크립트 기능은 없습니다.

수정하는 각 요소와 원본 상태를 추적하기가 어려울뿐만 아니라 페이지를 복원하려는 경우 해당 요소 목록을 순환하여 콘텐츠를 다시 저장하면됩니다. 그것이 원래 있었던 방식.

다음은 변경 사항을 직접 추적하는 방법을 구현하는 방법입니다. 요소를 변경하기 바로 전에 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 속성을 추가하고 선택적으로 더 이상 입력 요소처럼 보이지 않도록 스타일을 지정하십시오.