Cómo puedo deshabilitar un botón después de hacer clic sobre él
Me interesa que un usuario no pueda realizar más de una misma petición al servidor, mientras el servidor todavía está procesando la primera petición.
Para ello querría deshabilitar el botón de la petición y mostrar una barra de progreso con una imagen gif mientras el servidor todavía está procesando la petición. Una vez la petición está procesada, la barra de progreso tendría que desaparecer y el botón se tendría que habilitar.
Respuesta
- código fuente realizado con el IDE NetBeans versión 6.5, compatible versiones 6.0 y 6.1
Al hacer clic sobre el componente Button de Woodstock
aparece una imagen de una barra de progreso y el botón se deshabilita.
Nota: En Internet podemos encontrar imágenes en formato gif de barras de progreso en movimiento
una vez el proceso del servidor ha finalizado, la barra de progreso desaparece y el btón se habilita
Este el el código de la pagina JSP Page1.jsp
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<webuijsf:page id="page1">
<webuijsf:html id="html1">
<webuijsf:head id="head1">
<webuijsf:link id="link1" url="/resources/stylesheet.css"/>
<webuijsf:script>
function deshabilitarBoton(){
var domNodeBoton = document.getElementById("form1:button1");
domNodeBoton.setProps({disabled : true});
var domNodeImagen = document.getElementById("form1:image1");
domNodeImagen.setAttribute("src", "/proDeshabilitarBoton/resources/imagenes/barraProgreso.gif");
}
</webuijsf:script>
</webuijsf:head>
<webuijsf:body id="body1" style="-rave-layout: grid">
<webuijsf:form id="form1">
<webuijsf:button id="button1" onClick="setTimeout('deshabilitarBoton()', 0)"
style="position: absolute; left: 48px; top: 48px" text="Button"
/>
<webuijsf:image id="image1"
style="position: absolute; left: 144px; top: 48px" url="/resources/imagenBlanca.gif"
/>
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>
</webuijsf:page>
</f:view>
</jsp:root> |
Y este es el código del backing bean Page1
package prodeshabilitarboton;
import com.sun.rave.web.ui.appbase.AbstractPageBean;
import javax.faces.FacesException;
public class Page1 extends AbstractPageBean {
...
public String button1_action() {
System.out.println("---- button1_action()");
int j = 0;
for (int i = 0; i <= 1200000000; i++) {
j++;
}
System.out.println("j: " + j);
return null;
}
...
} |
- public String button1_action() {
- hasta que este listener del backing bean no haya finalizado su ejecución, el botón se mantendrá deshabilitado
Ignasi Pérez Valls
asesor-formador independiente
ignasiperez[ARROBA]javadabbadoo[PUNTO]org
