En los controladores de rieles, ¿cómo evitar el envío doble (cuando el usuario hace doble clic en el botón de envío o presiona intro dos veces)?

Question

Bueno, todo está en el título, pero voy a explicar un poco más :-)

Mi carriles de aplicación incluye muchas formas (Ajaxified o no).

Para evitar que los usuarios envíen dos o más formularios, utilizo Javascript.

Ahí está mi escenario para una forma Ajaxified:

• el usuario envía el formulario (click o enter)
• las javascript desactivar el botón de enviar
• el controlador rieles hacer cosas (como una solicitud de jabón o una inserción en un DB)
• la actualización del controlador rieles la página y permitir que el botón de enviar, si es necesario (en caso de errores)

Ahora Quiero agregar el código del lado del servidor para mantener las cosas realmente limpias si el usuario omite el javascript.

¿Alguna sugerencia?

Answer 1

Intente utilizar Redis bloqueo y rodear su bloque con algo así como

Redis.current.lock("#{current_user.id}.action_name") do 
    # Some code 
end 

Esta es la joya que estoy usando https://github.com/mlanett/redis-lock

Answer 2

No es una sugerencia real (no me sorprenderán los votos a la baja), pero ¿su sitio seguirá siendo utilizable sin JS? ¿Qué le parece mostrarle el mensaje apropiado de que para una operación normal necesita habilitar el JS, de lo contrario no le mostrará muchos formularios en la página.

Answer 3

1) También es bueno mostrar algún indicador en movimiento para que el usuario sepa que algo está sucediendo, que su solicitud está siendo procesada. Debe eliminar muchos envíos dobles.

2) Si el usuario ha desactivado javascript, ¿cómo va a enviar formularios 'ajaxified'? Si el sitio deja de ser funcional sin javascript, entonces probablemente sea mejor simplemente notificar al usuario (como sugiere Eimantas).

edición Un ejemplo de dicho indicador, para ser claro lo que quiero decir en 1.
http://www.netzgesta.de/busy/

Answer 4

Esto es lo que haría:

1. añadir un campo "token" a un objeto en db que está a punto de cambiarse.
2. Ponga esa ficha en una forma que modifique dicho objeto.
3. Inmediatamente después de la modificación guarde ese objeto con el token NUEVO.
4. Use ese token en otras páginas visitadas.

Esto no evitará el doble envío, pero al menos evitará los cambios de la segunda confirmación. Es decir. cuando el usuario envía el formulario por segunda vez, el código verificará el token enviado contra el de la base de datos y, si no coinciden, no hará una actualización del objeto.

Esto también tiene un inconveniente para los objetos recién creados (es decir, si el usuario quiere crear un comentario o algo así).Pero en este caso es posible que desee comprobar el intervalo de tiempo de creación del mismo usuario y, si es inferior a, por ejemplo, 5 segundos, evitará que el objeto se "cree".

Answer 5

No estoy seguro si esto es útil:

EN ServerSide:

1. En la carga fresca de la forma, establecer una sesión [ 'variable'] = false // es decir, la forma ISN' t enviado aún

2. El envío de formulario, marque:

   if session['variable'] == true 
   { 
       do nothing... 
   } 
   else 
   { 
       set session['variable'] = true; 
       //do submit logic here 
   } 
   

Answer 6

Usted puede añadir la opción: disable_with => "Por favor, espere ..." a la etiqueta de envío.

Answer 7

utilizo 4 método para 4 escenarios, por favor prefiere en primer lugar mi awnser aquí : Prevent double submits in a Rails AJAX form

única limitación para los usuarios, haga clic en:

stopImmedia uso tePropagation y agrega un evento click al dom dom.

/** 
    * 防止按钮重复点击。 
    * NOTICE: #1 需要在作用点之前调用此方法 #2 stopImmediatePropagation 会阻止后面的所有事件包括事件冒泡 
    * @delay_duration 两次点击的间隔时间 
    */ 
    $.fn.preventMultipleClick = function (delay_duration) { 
    delay_duration = delay_duration || 3000; 
    var last_click_time_stamp = 0; 
    var time_duration = 0; 
    $(this).bind('click', function (event) { 
     time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0; 
     //console.debug("preventMultipleClick", last_click_time_stamp, time_duration); 
     if (time_duration && time_duration < delay_duration) { 
     event.stopImmediatePropagation(); 
     } else { 
     //console.debug("skip preventMultipleClick~"); 
     last_click_time_stamp = event.timeStamp; 
     } 
    }); 
    }; 

límite de la presentar como AJAX: beforeSend attribut

uso de ajax.

/** 
    * 使用： 
    * 在jquery的ajax方法中加入参数:beforeSend 
    * 例如：beforeSend: function(){return $.preventMultipleAjax(event, 5000)} 
    * 
    * @param event 
    * @param delay_duration 
    * @returns {boolean} 
    */ 
    $.preventMultipleAjax = function (event, delay_duration) { 
    delay_duration = delay_duration || 3000; 
    var target = $(event.target); 
    var last_click_time_stamp = target.attr("_ajax_send_time_stamp") || 0; 
    var time_duration = last_click_time_stamp ? event.timeStamp - last_click_time_stamp : 0; 
    //console.debug("preventMultipleAjax", last_click_time_stamp, time_duration); 
    if (time_duration && time_duration < delay_duration) { 
     return false; 
    } else { 
     //console.debug("skip preventMultipleAjax~"); 
     target.attr("_ajax_send_time_stamp", event.timeStamp); 
     return true; 
    } 
    }; 

sólo para el formato:

<%= f.submit "Save annotation", :disable_with => "Saving...", :class => "btn btn-primary", :id => "annotation-submit-button" %> 

o: desactivar: 仅仅 对 表单 元素, 按钮 等 起作用, 会 otros 阻止 其 上 的 事件 触发

<input type="submit" value="submit" /> 
<input type="button" value="button" /> 
<input type="image" value="image" /> 

:

Esta es la gema: https://github.com/mlanett/redis-lock

Redis.current.lock("#{current_user.id}.action_name") do 
    # Some code 
end