prevent button inside a gridview to postback using javascript

问题

i have gridview that uses template and i have two buttons inside the template. Here is my code for gridview:

      <asp:GridView ID="gvtransaction" runat="server" AutoGenerateColumns="False" Width="60%">
            <Columns>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblid" runat="server" Text='<%# Bind("id") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Consumer">
                    <ItemTemplate>
                        <asp:Label ID="lblfirstname" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lbllastname" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Amount">
                    <ItemTemplate>
                        <asp:Label ID="lblamount" runat="server" Text='<%# Bind("Amount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblcurrencyID" runat="server" Text='<%# Bind("CurrencyID") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Account Name">
                    <ItemTemplate>
                        <asp:Label ID="lblcurrencyname" runat="server" Text='<%# Bind("CurrencyName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:Label ID="lblstatus" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="DateCreated">
                    <ItemTemplate>
                        <asp:Label ID="lbldatecreated" runat="server" Text='<%# Bind("DateCreated") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="btnApprove" runat="server" Text="Approve" CommandName="Select" OnClick="btnApprove_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="btnReject" runat="server" Text="Reject" CommandName="Select" OnClick="btnReject_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

now what i want to happen is to prevent the button (if clicked twice ) to postback. If the user clicks the button for the second time, it shouldn't post back when it sees that the status field of the row is not equal to pending. How can i do this using jquery.? I have no idea on how to code this. Some articles that i've read suggests that i should use AJAX (i dont know how to code AJAX)... please help..

回答1:

You can use a javascript function together with an attribute on the form to prevent the second submission.

<script type="text/javascript"> 
    // start with true to allow the first submit.
    var _fAllowToSubmit = true;
    // here we check if the form all ready have been submited
    function fAllowToSubmit() 
    {
        if(_fAllowToSubmit)
        {
          _fAllowToSubmit = false;
          return true;
        }
        else
        {
          alert("Please wait for the page to be updated");
          return false;
        }
     }
</script>

and add this on code behind for the form

Page.Form.Attributes["onsubmit"] = "return fAllowToSubmit();";

Now on each call the flag is set to false, is not second click to occur.

The same idea is applied a little diferent if you use UpdatePanel : How to prevent double submit with jQuery in ASP.NET app with UpdatePanels

回答2:

When button click you can add a loader throught javascript css

.loader 
{    
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
-moz-opacity:0.6; /* Mozilla */
opacity: 0.6; /* CSS3 */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)'; /* first!*/
filter: alpha(opacity=40); /* second!*/    
background: #C0C0C0
            url('../images/Loader.gif')    
            50% 50%              
            no-repeat
 }

html