Having issues getting JavaScript onClientClick event working in IE10

Question

I'm still really new to coding, and my JavaScripting is virtually non-existent. I've tried looking for another answer, but I'm not sure what I'm looking for / at, so apologies if this is duplicate. Anyways...

I have an asp.net c# page that pulls a series of data across from a database into a GridView. One of the options I want to give users of the page is to be able to delete rows and as part of this, I've included some JavaScript in my page to prompt them to double-check if they want to go ahead deleting. My issue is that although the script works fine in Chrome, it doesn't work in IE10 (probably because Chrome is more forgiving). Can anyone please advise where I might be going wrong?

My JavaScript function is:

<script type="text/javascript">
    function confirmDelete(id) {
        try {
            console.log('trying');
            if (confirm('Do you really want to delete this entry?')) {
                $('#' + id).html('Processing... <i class="fa fa-spinner fa-spin"></i>').attr('disabled', 'disabled').addClass('disabled');
                return true;
            }
            $('#' + id).html('<span class="btn btn-small btn-spinner">Delete</span>').removeClass('disabled').removeAttr('disabled');
        } catch (e) { console.log(e.message);}
        return false;

    }
</script>

And it's linked to the following GridView:

<asp:UpdatePanel ID="upCurrentServicesGrid" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:GridView ID="grdviewCurrentSystems" CssClass="table-data" UseAccessibleHeader="true" AutoGenerateColumns="false" runat="server">
            <Columns>
                <asp:BoundField DataField="systemName" HeaderText="System" ItemStyle-Width="10%"/>
                <asp:TemplateField HeaderText="Status" ItemStyle-Width="46%">
                    <ItemTemplate>
                            <div style="display:none">
                            <asp:TextBox ID="RowId" runat="server" Text='<%# Eval("id") %>' />
                            </div>
                            <div style="display:none">
                                <asp:TextBox ID="SelectedVal" runat="server" Text='<%# Eval("systemStatus") %>' />
                            </div>
                            <pfp:DropDownList ID="pfpdropSystemStatus"  CausesValidation="false" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Further information" ItemStyle-Width="50%">
                    <ItemTemplate>
                        <div>
                            <pfp:TextBox ID="pfptxtSystemStatusInfo" TextMode="MultiLine" MaxLength="300" CssClass="textarea1" runat="server" Text='<%# Eval("systemInformation") %>' />
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
                    <ItemTemplate>
                        <div>
                            <asp:LinkButton ID="lnkbtnDelSystem" CausesValidation="false" OnClick="lnkbtnDelSystem_Click" OnClientClick="return confirmDelete(this.id); return false;" CommandArgument='<%# Eval("id") %>' runat="server">
                                <span class="btn btn-small btn-spinner">Delete</span> 
                            </asp:LinkButton>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

It's this last row (the linkbutton) that's causing me grief - like I say, it works perfectly in Chrome, but it just hangs in IE10 (although I've checked the console, and I know it's getting so far because it reads 'trying').

Any advice at all?

Thanks :)

Answer 1

If you disable a button in IE before it posts back, the postback won't happen. You have to do a settimeout or something to disable the button after the postback launches.

Example:

function confirmDelete(id) {
        try {
            console.log('trying');
            if (confirm('Do you really want to delete this entry?')) {
                $('#' + id).html('Processing... <i class="fa fa-spinner fa-spin"></i>').addClass('disabled');
                // new code here
                setTimeout( function(){
                    $('#' + id).attr('disabled', 'disabled');
                }, 0);
                return true;
            }
            $('#' + id).html('<span class="btn btn-small btn-spinner">Delete</span>').removeClass('disabled').removeAttr('disabled');
        } catch (e) { console.log(e.message);}
        return false;

    }