[CLOSED] avoiding the user from clicking the button more than once

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] avoiding the user from clicking the button more than once

    hi..
    in my application ,user enters data and clicks the button to save the data..if he clicks the button 3 times ,same records wiil be saved 3 times...
    so to avoid this i have kept Event mask in butoon..
    
        <ext:ToolbarButton ID="btnDetailsSave" runat="server" Text="Save" Icon="Disk"  >                
                                <AjaxEvents>
                                    <Click OnEvent="btnDetailsSave_Click" ViewStateMode="Include">   
                                    <EventMask Msg="saving..." ShowMask="true" />                                 
                                    </Click>
                                </AjaxEvents>
                            </ext:ToolbarButton>
    whenever user clicks the button the evenmask will be displayed...but if he clicks the button more than once before event maskfiring, how much time he will click that many times the same record is saved...
    so to avoid this i kept java script function
    
    <script language="javascript" type="text/javascript" >
    
    
        var delay = function(millis) {
    //        var date = new Date();
    //        var curDate = null;
    //        do {
    //            curDate = new Date();
    //        }
    //        while (curDate - date < millis);
        }
    
        var Loading = function() {
            Ext.getBody().mask("Saving Please Wait..", "x-mask-loading");
        }
        var executionJavascript = function() {
            Loading();
            setTimeout("delay(1000); Ext.getBody().unmask();", 1000); 
        }
    
           </script>
    
     <ext:ToolbarButton ID="btnDetailsSave" runat="server" Text="Save" Icon="Disk" OnClientClick="executionJavascript();"  >
                            <%--<Listeners >
                            <Click Fn="executionJavascript" />
                            </Listeners>--%>
                                <AjaxEvents>
                                    <Click OnEvent="btnDetailsSave_Click" ViewStateMode="Include">   
                                                                   
                                    </Click>
                                </AjaxEvents>
                            </ext:ToolbarButton>
    but no use....

    please help me ... if the user clicks the button more than one time then the button should be disabled or is their any alternate ....please dont give suggestion to write code in .cs file
    Last edited by Daniil; Nov 09, 2010 at 8:34 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I would suggest you to disable a Button in a client side Click's listener and to enable using in a AjaxEvent Success's handler.

    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <script runat="server">
        protected void ButtonClick(object sender, AjaxEventArgs e)
        {
            Ext.Msg.Alert("", "Hello from server!").Show();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Coolite 0.8.X Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:Button ID="Button1" runat="server" Text="Click me">
            <Listeners>
                <Click Handler="this.disable();" />
            </Listeners>
            <AjaxEvents>
                <Click OnEvent="ButtonClick" Success="Button1.enable()">
                    <EventMask ShowMask="true" MinDelay="1000" />
                </Click>
            </AjaxEvents>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    ya i applied ur code..it is working fine ..what about if validation fails?....
  4. #4
    Quote Originally Posted by Vasudhaika View Post
    ya i applied ur code..it is working fine ..what about if validation fails?....i have applied javascript validation for btnDetailsSave Button
    
      <ext:ToolbarButton ID="btnDetailsSave " runat="server" Icon="Disk" Text="Save" OnClientClick="return ValidateForReceiptsSave
                    (ReceiptEntryWindow_DtDate,ReceiptEntryWindow_cmbFeeType,ReceiptEntryWindow_cmbReceiptType,ReceiptEntryWindow_txtTotal,ReceiptEntryWindow_cmbOfficerName);" >
                      
                        <AjaxEvents>
                            <Click OnEvent="btnDetailsSave _Click">
                                <EventMask ShowMask="true" Msg="Saving..." />
                            </Click>
                        </AjaxEvents>
                        <Listeners>
                         <Click Handler="this.disable();" />
                        
                        </Listeners>
                    </ext:ToolbarButton>
  5. #5
    Hi,

    Please clarify would you like to avoid AjaxEvent if validation fails?

    You could return false from Click's listener.

    Example
    <ext:Button ID="Button1" runat="server" Text="Click me">
        <Listeners>
            <Click Handler="if (!yourValidationHere) { return false; } this.disable();" />
        </Listeners>
        <AjaxEvents>
            <Click OnEvent="ButtonClick" Success="Button1.enable()">
                <EventMask ShowMask="true" MinDelay="1000" />
            </Click>
        </AjaxEvents>
    </ext:Button>
  6. #6
    Quote Originally Posted by Daniil View Post
    Hi,

    Please clarify would you like to avoid AjaxEvent if validation fails?

    You could return false from Click's listener.

    Example
    <ext:Button ID="Button1" runat="server" Text="Click me">
        <Listeners>
            <Click Handler="if (!yourValidationHere) { return false; } this.disable();" />
        </Listeners>
        <AjaxEvents>
            <Click OnEvent="ButtonClick" Success="Button1.enable()">
                <EventMask ShowMask="true" MinDelay="1000" />
            </Click>
        </AjaxEvents>
    </ext:Button>

    ya i have kept your code but it is not working..

    
    
    <ext:ToolbarButton ID="btnSave" runat="server" Icon="Disk" Text="Save" OnClientClick="return ValidateForReceiptsSave
                    (ReceiptEntryWindow_DtDate,ReceiptEntryWindow_cmbFeeType,ReceiptEntryWindow_cmbReceiptType,ReceiptEntryWindow_txtTotal,ReceiptEntryWindow_cmbOfficerName);"    >
                        
                        <AjaxEvents>
                            <Click OnEvent="btnSave_Click">
                                <EventMask ShowMask="true" Msg="Saving..." />
                            </Click>
                        </AjaxEvents>
                        <Listeners>
            <Click Handler="if (!ValidateForReceiptsSave) { return false; } this.disable();" />
        </Listeners>
                    </ext:ToolbarButton>
  7. #7
    Hi,

    I guess here is the problem
    <Click Handler="if (!ValidateForReceiptsSave) { return false; } this.disable();" />
    There should be function's invoking
    ValidateForReceiptsSave()
    Why are you using both OnClientClick and Click's listener? I guess you should use Click's listener only.
  8. #8
    Quote Originally Posted by Daniil View Post
    Hi,

    I guess here is the problem
    <Click Handler="if (!ValidateForReceiptsSave) { return false; } this.disable();" />
    There should be function's invoking
    ValidateForReceiptsSave()
    Why are you using both OnClientClick and Click's listener? I guess you should use Click's listener only.

    ya thank u now it is working..but Success="btnSave.enable()" is not working..
    after the completion of save process,button should enable..
  9. #9
    I can't see the Success handler in the code that you provided.

    Please post code where Success handler doesn't work.
  10. #10
    Quote Originally Posted by Daniil View Post
    I can't see the Success handler in the code that you provided.

    Please post code where Success handler doesn't work.
    
      <ext:ToolbarButton ID="btnSave" runat="server" Icon="Disk" Text="Save" Success="btnSave.enable()"     >
                        
                        <AjaxEvents>
                            <Click OnEvent="btnSave_Click" >
                                <EventMask ShowMask="true" Msg="Saving..." />
                            </Click>
                        </AjaxEvents>
                        <Listeners>
            <Click Handler="if(!ValidateForReceiptsSave(ReceiptEntryWindow_DtDate,ReceiptEntryWindow_cmbFeeType,ReceiptEntryWindow_cmbReceiptType,
            ReceiptEntryWindow_txtTotal,ReceiptEntryWindow_cmbOfficerName)) {return false;}  this.disable();"/>
        </Listeners>
                    </ext:ToolbarButton>
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Apr 07, 2011, 8:48 PM
  2. how to user Coolite.Ext.Web.Button in new 1.0 version
    By harshad.jadhav in forum 1.x Help
    Replies: 2
    Last Post: Jul 08, 2010, 11:52 AM
  3. Icon button and user controls
    By maxdiable in forum 1.x Help
    Replies: 3
    Last Post: May 14, 2010, 2:33 AM
  4. not find button in user control
    By maxdiable in forum 1.x Help
    Replies: 0
    Last Post: May 09, 2010, 6:38 AM
  5. Replies: 0
    Last Post: Apr 07, 2009, 8:57 AM

Posting Permissions