prevent button inside a gridview to postback using javascript

Question

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..

You can refer to jQuery`s ajax functionality fro here,http://api.jquery.com/jQuery.ajax/.to answer your question, how to avoid user fro clicking the button twice or more times to post the data is to disable the button after one click using jquery like this.` $('#buttonId').click(function() { $(this).attr('disabled', 'disabled'); });`. — dreamweiver, Jun 06 '13 at 09:58

kostas ch. · Answer 1 · 2013-06-06T10:30:49.200

0

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

<div id="mask" class="loader">
</div>

jquery onload

 $('#mask').css('display', 'none');

jquery on button press

$('#mask').css('display', 'block');

after finish click procedure

$('#mask').css('display', 'none');

With this way user will click once. After procedure finsished will press it only.

edited Jun 06 '13 at 10:30

answered Jun 06 '13 at 10:00

kostas ch.

1,960
1
17
30

I don't get your point. This piece of code just brings i front a div with a loader in order to prevent user to click again. this div maybe locate on the whole record. – kostas ch. Jun 06 '13 at 10:33
Agapite Kosta, I delete my comments, and accept what you say. – Aristos Jun 06 '13 at 11:04
To make it "ολοκληρωμένο" you need to warp it with the UpdatePanel events that trigger the press/onload and finish. From the other is looks like the plesk panel that do the same and is nice interface. – Aristos Jun 06 '13 at 11:10
I use it many times for ajax calls (jquery) or throuth PageMethods. I am avoiding ajax panel. – kostas ch. Jun 06 '13 at 11:13
Ok, cool, (I just say it because the question say so - well not direct, but you can not connect ajax to gridview) anyway, is fine – Aristos Jun 06 '13 at 11:14
You r right. I gave just a hint, the solution depending the whole code maybe much more complicated. – kostas ch. Jun 06 '13 at 11:16

score 0 · Answer 2 · edited May 23 '17 at 11:49

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

prevent button inside a gridview to postback using javascript

2 Answers2