양식에 저장되지 않은 데이터가 포함되어 있고 데이터 테이블 필터 필드가 포함되지 않은 경우 사용자에게 경고합니다.

Question

양식 내에서 저장되지 않은 데이터임을 경고하는 방법을 찾고 있습니다. 사용자가 다른 사이트로 이동하거나 브라우저를 닫을 때 경고가 표시됩니다. 어떤 종류의 작품을 찾았는지 this solution. 때때로 브라우저가 닫히면 반응하지 않습니다.

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // Set the unload message whenever any input element get changed. 
     $(':input').change(function() { 
      setConfirmUnload(true); 
     }); 

     // Turn off the unload message whenever a form get submitted properly. 
     $('form').submit(function() { 
      setConfirmUnload(false); 
     }); 
    }); 

    function setConfirmUnload(on) { 
     var message = "You have unsaved data. Are you sure to leave the page?"; 
     window.onbeforeunload = (on) ? function() { return message; } : null; 
    } 
</script> 

이제 문제가 하나 있습니다. 내 페이지에 <p:datatable>이 있습니다. 각 열에는 필터 필드가 있습니다. 이 필드는 입력 필드이기도하므로 선택기는 필터 필드에 무엇인가가 있으면 일치합니다. 선택기가 필터 필드를 확인하지 않도록 할 수 있습니까?

Answer 1

찾고있는 셀렉터는 :input:not(.ui-column-filter)입니다 (데이터 테이블 필터 입력은 ui-column-filter 클래스입니다). 브라우저에서 해당 필드를 검사하고 설정된 클래스를 볼 수 있습니다. Chrome에서 필드를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택합니다.

$(':input').change(function() { 

에 :

$(':input:not(.ui-column-filter)').change(function() { 

당신은 자바 스크립트 콘솔에서 두 선택기를 테스트하고 그 차이를 볼 수 있습니다

그래서이 줄을 변경합니다.

은 참조 :

• https://api.jquery.com/category/selectors/
• https://api.jquery.com/not-selector/

또한, 당신이 jQuery를로드하는 스크립트를 제거해야합니다. jQuery는 PrimeFaces와 번들로 제공되며 페이지에서 PrimeFaces 구성 요소를 사용할 때로드됩니다. Multiple instances of jQuery will cause uncaught type errors.

Answer 2

$(':input') 대신에 더 구체적인 선택기를 쓸 수 있습니다. 데이터 태그가 양식 태그 안에 없으면 $('form :input')과 같은 작업을 수행 할 수 있습니다. 또는 .not() 메서드를 사용하여 특정 요소를 제외 할 수 있습니다.