저장 버튼을 클릭하지 않고 휴가 페이지를 확인하십시오.

Question

모델을 만드는 곳이 있으며 저장/생성 버튼을 클릭하지 않는 한 사용자가 페이지에서 나가면 대화 상자가 나타나기를 원합니다.

나는 사용자가 페이지를 떠날 때마다 작동하는이 자바 스크립트 코드를 가지고 있습니다. 이 대화 상자는 사용자가 저장/작성을 클릭 할 때 계속 나타납니다.

#javascripts/workouts.js.coffee 
window.confirmExit =() -> 
    "Your changes will not be saved."; 

#workouts/new.html.haml 
= render 'form' 
:javascript 
    window.onbeforeunload = confirmExit 

#workouts_form.html.haml 
= simple_form_for(@workout) do |f| 
# some input fields 
= f.button :submit 

지금 나는 단지 submit 버튼을 클릭하지 않은 경우라고 확인 출구를 원하는 것을 알고,하지만 난이 일에 대해 이동하는 방법을 잘 모르겠습니다.

Answer 1

나는 그것을 알아 냈다. 적어도 지금은 크롬과 사파리로 작동하지만 지금은 효과가 없다고 생각한다. 내가 한 것은 거짓으로 설정되고 제출 단추가 선택되었을 때만 true로 설정되는 부울을 만드는 것입니다.

#javascripts/workouts.js.coffee 
window.submitButtonClicked = false 
window.confirmExit =() -> 
    if window.submitButtonClicked 
    null 
    else 
    "Your changes will not be saved." 

$(document).ready -> 
    $('#target').submit -> 
    window.submitButtonClicked = true 

#workouts/new.html.haml 
:javascript 
    window.onbeforeunload = confirmExit 

#workouts_form.html.haml 
#target 
    = simple_form_for(@workout) do |f| 
    # some input fields 
    = f.button :submit 

나는이 호기심에 도움이되기를 바랍니다. #target 행은 실제 haml이며 주석이 아닙니다.

Answer 2

내가 일반적으로하는 일은 실제로 양식에 변경 사항이 적용되었을 때 확인 만 표시하는 것입니다. 그렇게하려면 페이지의 양식을 스캔하여 직렬화하고 메모리에 저장해야합니다. 그런 다음 사용자가 페이지를 떠날 때 양식을 다시 직렬화하고 차이점이 있는지 확인하십시오.

그렇지 않은 경우 일부 기능을 바인드하여 양식의 이벤트를 제출하고 window.formSubmitted과 같은 일부 글로벌 부울을 참으로 설정할 수 있습니다. 확인 상자를 표시할지 결정하기 위해 페이지를 떠날 때 변수를 확인하십시오.