뒤로 버튼은 동적 형태를 처리합니다

https://stackoverflow.com/questions/1724739

19-09-2019
|

문제

다양한 텍스트 필드가있는 양식이 있습니다. 사용자 (JavaScript를 통해)는 양식에 임의의 수의 텍스트 필드를 추가 할 수 있습니다. 양식을 제출하고 뒤로 버튼을 누른 후 양식은 처음 렌더링 될 때 원래 양식에 있던 필드로만 표시됩니다 (추가 된 텍스트 필드가 손실 됨). 백 버튼이 사용자가 제출했을 때 상태에서 양식을 렌더링하도록 허용하는 가장 좋은 방법은 무엇입니까? 모든 아이디어는 환영합니다. 내가 시도한 것은 다음과 같습니다.

양식 데이터를 쿠키에 넣습니다 (이것은 몇 가지 이유로 잘 작동하지 않지만 가장 큰 킬러는 쿠키가 4K 크기로 제한된다는 것입니다)
양식 데이터를 세션에 넣으십시오
Ajax를 통해 양식을 제출 한 다음 역사를 관리하십시오.

도와 주셔서 감사합니다. 내 웹 사이트에 테스트 양식을 게시했습니다 http://fishtale.org/formtest/f1.php. 또한 여기에 내가 언급 한 행동을 보여주는 간단한 형태가 있습니다.

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

이것은 내가 얼마 전에 게시 한 질문과 비슷합니다. 뒤로 버튼이 양식 데이터를 남기는 가장 좋은 방법, 그러나이 양식의 요소는 사용자가 수정합니다.

해결책

나는 이것을 위해 전술 한 라이브러리를 찾을 수 없지만 이전에 해결 된 것이 확실합니다. 내가 직접해야한다면 나는이 접근법을 취할 것이다.

사용 명령 패턴 컨트롤을 추가하여 페이지의 UI를 수정하는 각 메소드는 AJAX 메소드를 호출하여 호출 된 메소드 (텍스트 javaScript 표현)를 서버 세션에 저장된 큐로 푸시합니다.
본체 온로드가 완료되면 AJAX 메소드를 사용하여 사용자가 켜진 페이지의 명령 큐에 대한 서버 세션을 쿼리하십시오. 하나가 검색되면, 그냥 eval 큐의 각 멤버는 사용자와 동일한 순서로 페이지 UI를 재구성하기 위해 큐의 구성원입니다.

이 접근법을 명심하십시오. 제어의 추가뿐만 아니라 제거도 기록하고 있습니다. 텍스트 상자와 같은 사용자 입력 컨트롤을위한 별도의 상태 보유자가 필요합니다 (AJAX 메소드 액세스가있는 서버 측 세션이 필요할 수도 있습니다).

다른 팁

an을 만드는 것은 어떻습니까 <input type="hidden"> (아니요 name 또는 양식 외부에서 제출되지 않도록) 추가 할 추가 필드 목록과 그 값을 저장 하는가? 브라우저는 '백'에서 새로 구매 된 필드를 기억하지 못하지만 ~ 할 것이다 처음부터 형태에 있던 숨겨진 필드의 값을 기억하십시오.

다음은 문서 언로드에 추가 필드를 저장하고 준비 시점을 검색하는 예입니다.

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

메모:

당신이 사용할 수있는 form.onsubmit 대신에 window.onbeforeunload 제출물을 통해 값을 기억하기 만하면 필요한 경우. onunload 일부 브라우저는 해당 이벤트가 발생하기 전에 이전 양식 값을 이미 저장 했으므로 작동하지 않습니다.
Firefox에서는 숨겨진 입력의 위치가 중요합니다. 어떤 이유로, 동적으로 접속 된 필드 아래에 놓으면 Firefox는 어떤 입력이 어떤 입력인지 혼동하고 그 값을 기억하지 못한다.
이 예제는 오페라에서는 작동하지 않습니다. 오페라에서 일하도록 만들 수는 있지만 고통입니다. Opera의 부하 및 언로드 이벤트 호출은 일관성이 없으므로 대신 OnSubmit을 사용하거나 투표 간격으로 숨겨진 필드를 설정해야합니다. 더 나쁜 것은, 오페라가 이전 양식 필드 값을 기억할 때, 실제로는이를 채우지 않습니다. ~ 후에 onload가 해고되었습니다! 이로 인해 이미 많은 양식 스크립팅 문제가 발생합니다. 오페라 호환성이 필요한 경우 양식 값이 들어올 때까지 대기하기 위해 onload에 작은 타임 아웃을 넣어서이를 해결할 수 있습니다.

좋은 브라우저에서는 단순히 완벽하게 작동하도록 할 수 있습니다. 그것을 깨뜨리지 않습니다.

Firefox 1.5는 단일 브라우저 세션에 JavaScript 상태를 포함한 전체 웹 페이지에 인 메모리 캐싱을 사용합니다. 방문한 페이지 사이를 뒤로 그리고 앞뒤로 가면 페이지로드가 필요하지 않으며 JavaScript 상태는 보존됩니다. 원천

이것은 지원됩니다 오페라 그리고 웹 키트 도. 그러나 DOM 캐시는 규칙을 고수하는 경우에만 가능합니다.

사용하지 마십시오 onunload, onbeforeunload.
사용하지 마십시오 Cache-control: no-store 또는 must-revalidate.
PHP에서는 변경해야합니다 session.cache_limiter ~에서 patently_ridiculous (나는 그들이 철자라고 생각합니다 nocache) 에게 none.
```
session_cache_limiter('none');
```
불행히도 HTTPS도 나왔습니다.

브라우저가 페이지를 다시로드하도록 강요하지 않으면 그렇지 않습니다. 그들은 정확히 RFC 2616 제안.

하지만, 데이터를 보관할 장소를 찾고 있다면 엄청나게 영리한 해킹이 있습니다. Window.Name은 메가 바이트의 데이터를 저장할 수 있습니다. 서버로 전송되지 않으며 Windows간에 공유되지 않습니다.

플래시 쿠키와 HTML 5도 있습니다 localStorage IE8 및 Safari 4에서 구현됩니다.

2 단계 : 양식을 처리하는 스크립트는 입력 된 값을 배열에 넣고 배열을 세션 변수 (또는 적절한 텍스트 / DB /)로 저장합니다.

1 단계 : 양식을 출력하는 스크립트는 해당 세션 변수가 발견되면 (세션 변수도 지우므로) 자바 스크립트 (양식을 채우는)를 추가합니다.

웹 페이지 상단에서 직접 백 버튼을 만들고 표준 웹 브라우저 뒤로 버튼보다 크고 더 예쁘게 만들 수 있습니다.

후드 아래에서 코드는 이전 상태가 무엇인지 알 수 있고 이전 상태가없는 경우 브라우저의 후면 기능을 호출 할 수 있습니까?

뒤로 버튼 사용을 차단하십시오. 뒤로 버튼을 누르면 새 필드가 포함 된 사용자의 이전 페이지를 다시 말하면 눈에 띄게 또는 숨겨져 있습니다. 이렇게하면 사용자가 뒤로 버튼을 정상적으로 사용할 수 있으며``이전 ''페이지의 모양을 완전히 제어 할 수 있습니다.

특정 사용 사례에서는 모든 필드가 표시되고 제출 된 값으로 채워진 페이지를 렌더링하면됩니다.

이는 사용자가 채울 수있는 양식 시퀀스를 제공하는 마법사 유형의 프로세스에 대해 따라야 할 좋은 패턴이며 이전 양식으로 돌아갈 수 있습니다.

완벽하게 명확하게하기 위해, 나는 당신이 Onunload 이벤트 캡처에 대한이 조언 양식 제출을 트리거하려면 (입력 된 값을 얻을 수 있도록)와 "백"가 표시된 이전 페이지를 다시 렌더링하려면 (값없이). 유일한 대안은 AJAX를 사용하여 사용자가 필드를 떠날 때마다 입력 한 값을 보내고 AJAX를 통해 모든 페이지에서 서버를 확인하여 추가 값을 검색 할 수있는 것입니다.

다음은 뒤로 버튼의 기능을 제어하고 언로드 이벤트를 사용하여 양식 데이터를 유지하는 몇 가지 추가 페이지입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow