Updating an Update Panel requires two clicks of a button

Question

I apologize if this has been asked but i cant seem to find the exact right answer to my question.

I have a button that updates a gridview that is inside of an update panel. also inside the update panel are 3 labels. the labels are used for errors. if a button is clicked and data is added to the database that should add to the gridview, i do not see it. however, if the button is clicked again, one of the error labels displays saying that the data already exists, and then i see the new data in the gridview. I actually have a couple of update panels that the same button click updates, inside those i have drop down menus, same thing happens, it takes two clicks. update panel looks like this:

<asp:UpdatePanel ID="upSloPitchLeague" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:GridView ID="gvLeague" runat="server" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" CellPadding="5" DataKeyNames="leagueID">
                                    <Columns>
                                        <asp:BoundField DataField="leagueDay" HeaderText="Day" />
                                        <asp:BoundField DataField="leagueType" HeaderText="Type" />
                                    </Columns>
                                </asp:GridView>
                                <br />
                                <asp:Label ID="lblDayError" runat="server" ForeColor="Red" Visible="False"></asp:Label>
                                <br />
                                <asp:Label ID="lblTypeError" runat="server" ForeColor="Red" Visible="False"></asp:Label>
                                <br />
                                <asp:Label ID="lblDBError" runat="server" ForeColor="Red" Visible="False"></asp:Label>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnAddLeague" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>

Answer 1

The original answer to this question was deleted due to it being a link-only answer to JS Bin. For reference only: jsbin[dot]com/nanuvihune/1/edit

Here is the version I was editing when it got deleted:

 $("#autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: [{ id: 1, Name: "Apples" }, { id: 2, Name: "Oranges" }, { id: 3, Name: "Carrots" } ], select: function(e) { var dataItem = this.dataItem(e.item.index()); alert(dataItem.id); } }); var autocomplete = $("#autocomplete").data("kendoAutoComplete"); 

 <link href="https://kendo.cdn.telerik.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2014.1.416/js/kendo.all.min.js"></script> <input id="autocomplete" />