后退按钮处理动态表格

Question

我有一个包含文本字段数组的表单.用户(通过javascript)可以向表单添加任意数量的文本字段.提交表单并按下后退按钮后,表单仅显示首次呈现时原始表单上的字段(任何添加的文本字段都将丢失).在用户提交表单时,允许后退按钮呈现状态的最佳方法是什么？欢迎任何想法,我尝试过的一些事情是:

• 将表单数据放入cookie中(由于几个原因,这不是很好,但对我来说最大的杀手是cookie大小限制为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>

这类似于我前一段时间发布的问题,返回按钮的最佳方式是保留表单数据,但是,此表单的元素由用户修改.

Answer 1

如何创建一个<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中不起作用.它可以在Opera中工作,但这很痛苦.Opera调用加载和卸载事件是不一致的,因此您必须改为使用onsubmit,或者在轮询间隔设置隐藏字段等.更糟的是,当歌剧记得以前表单字段值,它实际上不填充它们,直到后 onload事件已经被解雇了!这已经导致许多形式脚本问题.如果需要Opera兼容性,可以通过在onload中加入一个小超时来等待表单值进入,从而解决这个问题.

Answer 2

我找不到一个预先编写的库,但我确信它之前已经解决了.如果我不得不自己采取这种做法:

1. 使用命令模式,以便通过添加控件修改页面UI的每个方法也调用AJAX方法将调用的方法(文本Javascript表示)推送到存储在服务器会话中的队列.

2. body onLoad完成后,使用AJAX方法在服务器的会话中查询用户所在页面的命令队列.如果检索到一个,则只需eval队列中的每个成员以用户执行的相同顺序重建页面的UI.

请记住,这种方法不仅可以记录控件的添加,还可以记录删除.对于用户输入控件,您需要单独的状态持有者,例如文本框(您可能还需要使用AJAX方法访问的服务器端会话).

Answer 3

在优秀的浏览器中,只需不破坏它就可以让它完美运行.

对于单个浏览器会话,Firefox 1.5对整个Web页面(包括其JavaScript状态)使用内存中缓存.在访问页面之间前后移动不需要加载页面,并且保留JavaScript状态.资源

Opera和WebKit也支持这一点.但是,DOM缓存只有在您遵守规则时才有可能:

1. 不要使用onunload,onbeforeunload.

2. 不要使用Cache-control: no-store或must-revalidate.
   在PHP中,你必须session.cache_limiter从patently_ridiculous(我认为它们拼写nocache)改为none.

   session_cache_limiter('none');
   

3. 不幸的是,HTTPS也出局了.

如果您不强制浏览器重新加载页面,则不会.它们将保持DOM及其值不变,正如RFC 2616所暗示的那样.

但是,如果您正在寻找存储数据的地方,那就是非常聪明的黑客 - window.name可以存储数兆字节的数据.它不会发送到服务器,也不会在Windows之间共享.

还有Flash cookie和HTML 5 localStorage在IE8和Safari 4中实现.