Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

Estas en el tema de Deshabilitar botón dentro de UpdatePanel para evitar duplicidad en el foro de Frameworks JS en Foros del Web. Muy buenas. He visto muchos ejemplos de cómo deshabilitar un botón al enviar un formulario para evitar que se pulse varias veces. La cuestión es ...
  #1 (permalink)  
Antiguo 17/05/2011, 11:30
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

Muy buenas. He visto muchos ejemplos de cómo deshabilitar un botón al enviar un formulario para evitar que se pulse varias veces. La cuestión es que el botón (y otros controles) que quiero deshabilitar temporalmente están dentro de un UpdatePanel de .Net y al deshabilitarlos no se realiza el submit. Este es el ejemplo:


Código vb:
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         $('#<%= btnBuscarSolicitud.ClientID %>').click(function() {
  4.            $(this).attr('disabled', 'disabled');
  5.        });
  6.     });
  7. </script>
  8. <asp:UpdatePanel ID="updPrueba" runat="server">
  9.     <ContentTemplate>
  10.         Código de solicitud: <asp:TextBox ID="txtCodSolicitud" runat="server" Width="12em" MaxLength="16"></asp:TextBox>
  11.         <asp:Button ID="btnBuscarSolicitud" runat="server" Text="Buscar" />
  12.     </ContentTemplate>
  13. </asp:UpdatePanel>
Gracias y un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #2 (permalink)  
Antiguo 17/05/2011, 13:24
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años
Puntos: 66
Respuesta: Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

trata deshabilitandolo en el evento submit del formulario
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #3 (permalink)  
Antiguo 18/05/2011, 00:44
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
Respuesta: Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

Gracias por la respuesta. Efectivamente esa fue mi primera opción.

El problema está en que entonces debería recoger el control que ha generado el envío del formulario, ya que la página tiene varios UpdatePanel con sus respectivos controles que pueden realizar el submit para refrescar sólo su contenedor.

Otra opción sería hacer una llamada AJAX directamente sin utilizar UpdatePanel, pero hay algunas operaciones más complejas que usando UpdatePanel se simplifican.

Un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #4 (permalink)  
Antiguo 18/05/2011, 09:48
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años
Puntos: 66
Respuesta: Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

ok, entonces trata colocando un div transparente encima del boton, para que no pueda ser presionado.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #5 (permalink)  
Antiguo 19/05/2011, 02:21
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 22 años
Puntos: 4
Respuesta: Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

Gracias tredio por las respuestas. Al final he optado directamente por AJAX y quitarme de en medio los UpdatePanel, además de que así, se mejora en carga de transferencia. Este es el resultado:
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         $('#btnBuscarSolicitud').click(function() {
  4.             CodSolicitud();
  5.         });
  6.     });
  7.     function CodSolicitud() {
  8.         var codSolicitud = $('#<%= txtCodSolicitud.ClientID %>').val();
  9.         $('#updProgSolicitudes').show();
  10.         $('#desSolicitudes > input').attr('disabled', 'disabled');
  11.         PageMethods.wmValidaCodSolicitud(codSolicitud, CodSolicitudComplete, CodSolicitudError);
  12.     }
  13.     function CodSolicitudComplete(resultado) {
  14.         $('#updProgSolicitudes').hide();
  15.         $('#desSolicitudes > input').removeAttr('disabled');
  16.         if (resultado != "") { $('#lblMensajeSolicitud').html(resultado); }
  17.     }
  18.     function CodSolicitudError(ex) {
  19.         $('#updProgSolicitudes').hide();
  20.         $('#desSolicitudes > input').removeAttr('disabled');
  21.         $('#lblMensajeSolicitud').html(ex.get_message());
  22.         alert(ex.get_message());
  23.     }
  24. </script>
Código HTML:
Ver original
  1. <ControlesPersonalizados:MarcoContenidos ID="marcoSolicitudes" runat="server"
  2.        Titulo="Solicitudes" EstiloMarcoContenidos="width: 400px; float: left;">
  3.             <div id="updProgSolicitudes" class="updProg">
  4.                 <asp:Image ID="imgProcesoSolicitudes" runat="server" ImageUrl="~/imagenes/progreso.gif" /> Comprobando...
  5.             </div>
  6.             <div id="desSolicitudes">
  7.             Código de solicitud: <asp:TextBox ID="txtCodSolicitud" runat="server" Width="12em" MaxLength="16"></asp:TextBox>
  8.             <input type="button" id="btnBuscarSolicitud" value="Buscar" /><br />
  9.             </div>
  10.             <span id="lblMensajeSolicitud" class="alerta"></span>
  11. </ControlesPersonalizados:MarcoContenidos>
Un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #6 (permalink)  
Antiguo 19/05/2011, 09:30
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años
Puntos: 66
Respuesta: Deshabilitar botón dentro de UpdatePanel para evitar duplicidad

sin duda hacerlo todo con ajax directamente es mas rapido (cargando) pero no sabia si sugerirte cambiar todos los update panel era buena idea jeje, bueno ya solucionaste que es lo importante.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:28.