避免形成多个提交并在完成后重新启用 [英] Avoid form multiple submissions and re-enable when done

问题描述

我有一个表单，允许查看页面中的数据或根据按下的提交按钮在csv中下载。

I have a form which allows to view data in a page or download it in csv according to the submit button pressed.

因为它是长数据库查询我想避免用户多次提交（你知道用户的食指在鼠标左键上有多重......）以避免数据库过载并使用户更轻松...

Since it's a long database query I want to avoid the user to submit more than once (you know how heavy is users' index finger on left mouse button...) to avoid database overload and also to make user more relaxed...

我写了这个小jQuery代码，用处理代替提交按钮，请等待和经典动画旋转gif

I wrote this little jQuery code to substitute submit button(s) with a Processing, please wait and the classic animated spinning gif

$(document).ready(function(){
    //preload wait img
    var $waitImg = $('<img />').attr('src', '/img/wait.gif')
    $('.wait').click(function(){
        $(':submit').hide();
        $(this).after($('<span>Processing, please wait...</span>').prepend($waitImg));
    });
});

一切正常但有一些缺点：

All works but has some drawbacks:

• 当用户看到结果然后按下浏览器的后退按钮时，他将再次获得处理，请等待句子并且没有提交按钮（如果他只想编辑某些内容，那该怎么办？在提示用户下载CSV文件后，他继续被告知等待...

• when user sees results and then press the browser's back button he will get again the Processing, please wait sentence and no submit buttons (what if he just wants to edit something and make a new query)
• after user is prompted to download the CSV file he keeps on being told to wait...

解决方案可能是检测用户回来或下载盯着或以其他方式告诉他工作正在进行中。

Solutions could be to detect someway user is back or download stared or another way to tell him work is in progress.

更容易，更好。

推荐答案

发现这个：

在浏览器中检测文件下载对话框

这是我的代码基于它：

html

<form ...> 
    <fieldset> 
    ...
    <div> 
        <input class="wait" id="submit" name="submit" type="submit" value="View" /> 
        <input class="wait" id="submit" name="submit" type="submit" value="Download as CSV" /> 
    </div> 
    </fieldset> 
</form> 

javascript

$(document).ready(function(){
    var cookieCheckTimer;
    var cookieName = 'download_token';
    var $wait = $('.wait');
    var $waitMsg = $('<span>Processing, please wait...</span>').prepend(
        $('<img />').attr('src', '/img/wait.gif').css({
            'vertical-align': 'middle',
            'margin-right': '1em'
        }));
    //add hidden field to forms with .wait submit
    $wait.parent().each(function(){
        $(this).append($('<input />').attr({
            'type': 'hidden',
            'name': cookieName,
            'id': cookieName
        }));
    });
    $wait.click(function(){
        var token = new Date().getTime();
        //set token value
        $('#' + cookieName).val(token);
        //hide submit buttons
        $(':submit').hide();
        //append wait msg
        $(this).after($waitMsg);

        cookieCheckTimer = window.setInterval(function () {
            if ($.cookie(cookieName) == token){
                //clear timer
                window.clearInterval(cookieCheckTimer);
                //clear cookie value
                $.cookie(cookieName, null);
                //detach wait msg
                $waitMsg.detach();
                //show again submit buttons
                $(':submit').show();
            }
        }, 1000);
    });
});

服务器端如果 download_token 在请求参数中找到了一个cookie，其中设置了名称和值。

Server side if a download_token key is found in request parameters a cookie with its name and value is set.

这是我的python（pylons）代码，用于控制器的 __在__ 之前：

Here's my python (pylons) code for a controller's __before__ :

python

cookieName = 'download_token'
#set file download coockie if asked
if cookieName in request.params:
    response.set_cookie(cookieName,
        #str: see http://groups.google.com/group/pylons-discuss/browse_thread/thread/7d42f3b28bc6f447
        str(request.params.get(self._downloadTokenName)),
        expires=datetime.now() + timedelta(minutes=15))

我设置cookie到期时间为15分钟不填客户端cookie，您根据任务所需的时间选择适当的持续时间。

I set cookie expire time to 15 minutes to not fill up client cookies, you choose an appropriate duration based on time needed by task.

这也适用于浏览器后退按钮问题，因为当返回cookie时找到并恢复按钮。

This also will work with browser back button issue as when going back the cookie will be found and buttons restored.

这篇关于避免形成多个提交并在完成后重新启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！