Bootstrap Popover and ToolTip not working inside Update Panel after postback

Waghmare
SOLVED CLOSED ACTIVE ANSWERED
User: Waghmare
Posted: on Nov 11, 2016 03:19 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 14616
Hiii,
I have used Bootstrap Tooltip and Popover in my asp.net website .
It works fine when page is loaded first time but after fired any event on page like dropdown select or button click it is not working .
My page is in update panel.
Have trid following links :
http://stackoverflow.com/questions/30140955/bootstrap-popover-doesnt-work-in-asp-net-updatepanel
http://www.codeproject.com/Articles/534587/ASP-NET-jQuery-is-not-Working-in-UpdatePanels
Download FREE API for Word, Excel and PDF in ASP.Net
Waghmare
0 3
Reply
User: Waghmare
Replied: on Nov 15, 2016 10:23 AM
Report
 <asp:UpdatePanel ID="upCrudGrid" runat="server">
        <ContentTemplate>
            <div class="panel panel-info" id="EstbApprovalPanel" runat="server">
                <div class="panel-heading">Sub Category </div>
                <div class="panel-body">
                    <%--<div class="form-horizontal">--%>

                    <div class="form-horizontal">
                        <div class="form-group">
                            <asp:Label ID="lblBill" runat="server" Text="Bill No" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-md-2 col-lg-2">
                                <asp:TextBox ID="txtBill" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                            </div>

                            <asp:Label ID="lblDate" runat="server" Text="Date" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-md-2 col-lg-2">
                                <div class="input-group ">
                                    <asp:TextBox ID="txtDate" runat="server" TextMode="SingleLine" Font-Size="14px" CssClass="form-control input-sm" data-toggle="tooltip" data-placement="bottom" title="Enter Date"></asp:TextBox>
                                    <span class="input-group-btn">
                                        <asp:LinkButton ID="btnPopDate" runat="server" CssClass="btn btn-primary btn-block Custbtn btn-sm" BorderStyle="Solid">
                                           <span aria-hidden="true" class="fa fa-calendar"></span>
                                        </asp:LinkButton>
                                        <cc1:CalendarExtender ID="CalExtBill" runat="server" PopupButtonID="btnPopDate" TargetControlID="txtDate" Format="dd/MM/yyyy" PopupPosition="BottomRight"></cc1:CalendarExtender>
                                    </span>
                                </div>
                            </div>

                            <asp:Label ID="lblName" runat="server" Text="Party" CssClass="control-label col-md-1 col-lg-1"></asp:Label>
                            <div class="col-md-4 col-lg-4">
                                <asp:DropDownList ID="drpCustName" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnSelectedIndexChanged="drpCustName_SelectedIndexChanged"></asp:DropDownList>
                            </div>

                            <div class="col-md-1 col-lg-1">
                                <asp:LinkButton ID="btnAddCust" runat="server" CssClass="btn btn-primary btn-block btn-sm"><span class="fa fa-plus"></span></asp:LinkButton>
                            </div>
                        </div>

                        <div class="form-group">
                            <asp:Label ID="lblAddress" runat="server" Text="Address" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-5 col-md-5">
                                <asp:TextBox ID="txtAddress" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:TextBox>
                            </div>
                            <asp:Label ID="lblLand" runat="server" Text="Landmark" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon "><i class="fa fa-street-view"></i></span>
                                    <asp:TextBox ID="txtLandmark" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:TextBox>
                                </div>
                            </div>

                            <asp:Label ID="lblCity" runat="server" Text="City" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <asp:TextBox ID="txtCity" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:TextBox>
                            </div>



                        </div>

                        <div class="form-group">

                            <asp:Label ID="lblState" runat="server" Text="State" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <asp:DropDownList ID="drpState" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:DropDownList>
                            </div>

                            <asp:Label ID="lblPin" runat="server" Text="Pin-Code" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-map-marker"></i></span>
                                    <asp:TextBox ID="txtPinCode" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                                </div>
                            </div>

                            <asp:Label ID="lblMbl1" runat="server" Text="Mobile 1" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-tablet"></i></span>
                                    <asp:TextBox ID="txtMobile1" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:TextBox>
                                </div>
                            </div>
                            <asp:Label ID="lblLandline" runat="server" Text="LandLine" CssClass="control-label col-lg-1 col-md-1"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                                    <asp:TextBox ID="txtLand1" runat="server" CssClass="form-control input-sm " Enabled="false"></asp:TextBox>
                                </div>
                            </div>

                        </div>
                    </div>
                    <br />


                    <div>
                        <div class="table-responsive">
                            <asp:GridView ID="gridSaleDetails" runat="server" CssClass="table table-condensed" AutoGenerateColumns="false" ViewStateMode="Enabled" HeaderStyle-CssClass="bg-info"
                                EmptyDataText="No records has been added.">
                                <Columns>
                                    <asp:TemplateField HeaderText="Product" HeaderStyle-Width="25%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblProductGrid" runat="server" Text='<%#Eval("Product") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Left" />
                                    </asp:TemplateField>

                                      <asp:TemplateField HeaderText="Weight" HeaderStyle-Width="11%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblWeightGrid" runat="server" Text='<%#Eval("Weight") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>

                                        <asp:TemplateField HeaderText="Price" HeaderStyle-Width="11%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblPriceGrid" runat="server" Text='<%#Eval("Price") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Quantity" HeaderStyle-Width="11%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblQuantityGrid" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Box" HeaderStyle-Width="11%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblBoxGrid" runat="server" Text='<%#Eval("Box") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                            <asp:TemplateField HeaderText="Pcs Per Box" HeaderStyle-Width="11%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblPcsPerBoxGrid" runat="server" Text='<%#Eval("PcsPerBox") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                    <asp:TemplateField HeaderText="Amount" HeaderStyle-Width="15%">
                                        <ItemTemplate>
                                            <asp:Label ID="lblTotal" runat="server" Text='<%#Eval("Amount") %>'></asp:Label>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Right" />
                                    </asp:TemplateField>

                                    <asp:TemplateField HeaderText="Remove" HeaderStyle-Width="5%">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lnkRemove" runat="server" OnClick="lnkRemove_Click"><span style="font-size:larger;color:red" class="glyphicon glyphicon-trash"></span></asp:LinkButton><%--<i class="fa fa-trash fa-2x"></i>--%>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>

                                </Columns>
                            </asp:GridView>
                        </div>
                    </div>



                    <div class="form-group col-md-3 col-lg-3">
                        <asp:Label ID="lblProduct" runat="server" Text="Product" CssClass="control-label"></asp:Label>
                        <%--<asp:DropDownList ID="drpProduct" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnSelectedIndexChanged="drpProduct_SelectedIndexChanged"></asp:DropDownList>--%>
                        <asp:DropDownList ID="drpProduct" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnSelectedIndexChanged="drpProduct_SelectedIndexChanged"></asp:DropDownList>
                    </div>

                    <div class="form-group col-md-2 col-lg-2">
                        <asp:Label ID="lblWeight" runat="server" Text="Weight" CssClass="control-label"></asp:Label>
                        <asp:DropDownList ID="drpWeight" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnSelectedIndexChanged="drpWeight_SelectedIndexChanged"></asp:DropDownList>
                    </div>

                    <div class="form-group col-md-2 col-lg-2">
                        <asp:Label ID="lblPrice" runat="server" Text="Price" CssClass="control-label"></asp:Label>
                        <asp:TextBox ID="txtPrice" runat="server" CssClass="form-control input-sm" Enabled="false" OnTextChanged="txtPrice_TextChanged" AutoPostBack="true"></asp:TextBox>
                    </div>

                    <div class="form-group col-md-1 col-lg-1">
                        <asp:Label ID="lblQty" runat="server" Text="Quantity" CssClass="control-label "></asp:Label>
                        <asp:TextBox ID="txtQuantity" runat="server" CssClass="form-control input-sm input-sm" data-toggle="tooltip" data-placement="bottom" title="Enter Qty" OnTextChanged="txtQuantity_TextChanged" AutoPostBack="true"></asp:TextBox>

                    </div>

                    <div class="form-group col-md-1 col-lg-1">
                        <asp:Label ID="lblBox" runat="server" Text="Box" CssClass="control-label"></asp:Label>
                        <asp:TextBox ID="txtBox" runat="server" CssClass="form-control input-sm" data-toggle="tooltip" data-placement="bottom" title="Enter Box"></asp:TextBox>
                    </div>

                    <div class="form-group col-md-1 col-lg-1">
                        <asp:Label ID="lblBoxPcs" runat="server" Text="Pcs" CssClass="control-label "></asp:Label>
                        <asp:TextBox ID="txtBoxPcs" runat="server" CssClass="form-control input-sm input-sm" data-toggle="tooltip" data-placement="bottom" title="Per Box"></asp:TextBox>

                    </div>

                    <div class="form-group col-md-2 col-lg-2">
                        <asp:Label ID="lblAmt" runat="server" Text="Amount" CssClass="control-label"></asp:Label>
                        <asp:TextBox ID="txtAmt" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                    </div>

                    <br />
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="control-label col-lg-offset-4 col-md-4  col-md-2 col-lg-2">
                                <asp:LinkButton ID="btnAddProduct" runat="server" CssClass="form-control  btn btn-success btn-block" OnClick="Insert"><span class="glyphicon glyphicon-plus"></span>&nbsp;Add Product</asp:LinkButton>
                            </div>
                            <div class="control-label col-md-2 col-lg-2">
                                <asp:LinkButton ID="btnClear" runat="server" CssClass="btn btn-default btn-block"><span class="glyphicon glyphicon-repeat"></span>&nbsp;Reset</asp:LinkButton>
                            </div>
                        </div>
                    </div>
                    <br />

                    <div class="form-horizontal">
                        <div class="form-group">
                            <asp:Label ID="lblSubTotal" runat="server" Text="Sub Total" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">
                                <asp:TextBox ID="txtSubTotal" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnTextChanged="txtSubTotal_TextChanged"></asp:TextBox>
                            </div>

                            <asp:Label ID="lblPaidAmt" runat="server" Text="Paid Amount" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">

                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-inr"></i></span>
                                    <asp:TextBox ID="txtPaidAmt" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnTextChanged="txtPaidAmt_TextChanged" data-toggle="tooltip" data-placement="bottom" title="Enter Paid Amount"></asp:TextBox>
                                    <span class="input-group-addon">.00</span>
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="control-label col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <asp:TextBox ID="txtDiscountRate" runat="server" CssClass="form-control input-sm" AutoPostBack="true" OnTextChanged="txtDiscountRate_TextChanged" Placeholder="Enter Rate" data-toggle="tooltip" data-placement="bottom" title="Enter Discount Rate"></asp:TextBox><span class="input-group-addon"><i class="fa fa-tags"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2">
                                <asp:TextBox ID="txtDiscAmt" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                            </div>

                            <asp:Label ID="lblDueAmt" runat="server" Text="Due Amount" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-inr"></i></span>
                                    <asp:TextBox ID="txtDueAmt" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                                    <span class="input-group-addon">.00</span>
                                </div>
                            </div>

                        </div>

                        <div class="form-group">
                            <asp:Label ID="lblTotAmt" runat="server" Text="Total Amount" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">

                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-inr"></i></span>
                                    <asp:TextBox ID="txtTotAmt" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                                    <span class="input-group-addon">.00</span>
                                </div>
                            </div>

                            <asp:Label ID="lblPayType" runat="server" Text="Payment Type" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">
                                <asp:DropDownList ID="drpPayType" runat="server" CssClass="form-control input-sm">
                                    <asp:ListItem Value="0" Text="Please Select"></asp:ListItem>
                                    <asp:ListItem Value="1" Text="Cash"></asp:ListItem>
                                    <asp:ListItem Value="2" Text="Cheque"></asp:ListItem>
                               
                                </asp:DropDownList>
                            </div>

                        </div>

                        <div class="form-group">
                            <asp:Label ID="lblVat" runat="server" Text="VAT %" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-2 col-md-2">
                                <div class="input-group">
                                    <asp:TextBox ID="txtVatRate" runat="server" CssClass="form-control input-sm" data-toggle="tooltip" data-placement="bottom" title="Enter VAT Rate" AutoPostBack="true" OnTextChanged="txtVatRate_TextChanged"></asp:TextBox>
                                    <span class="input-group-addon"><i class="fa fa-percent"></i></span>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-2">
                                <asp:TextBox ID="txtVatAmt" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                            </div>


                            <asp:Label ID="lblPAyStatus" runat="server" Text="Payment Status" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">
                                <asp:DropDownList ID="drpPayStatus" runat="server" CssClass="form-control input-sm">
                                    <asp:ListItem Value="0" Text="Please Select"></asp:ListItem>
                                    <asp:ListItem Value="1" Text="Complete"></asp:ListItem>
                                    <asp:ListItem Value="2" Text="Advance"></asp:ListItem>
                                    <asp:ListItem Value="3" Text="Half"></asp:ListItem>
                                </asp:DropDownList>
                            </div>
                        </div>

                        <div class="form-group">
                            <asp:Label ID="lblGrandTotal" runat="server" Text="Grand Total" CssClass="control-label  col-lg-2 col-md-2"></asp:Label>
                            <div class="col-lg-4 col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-inr"></i></span>
                                    <asp:TextBox ID="txtGrandTotal" runat="server" CssClass="form-control input-sm" Enabled="false"></asp:TextBox>
                                    <span class="input-group-addon">.00</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-lg-3">
                                <asp:LinkButton ID="btnSaveBill" runat="server" CssClass="form-control  btn btn-success btn-block" OnClick="btnSaveBill_Click"><span class="glyphicon glyphicon-save"></span>&nbsp;Save Bill</asp:LinkButton>
                            </div>
                            <div class=" col-md-3 col-lg-3">
                                <asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-default btn-block"><span class="glyphicon glyphicon-repeat"></span>&nbsp;Reset</asp:LinkButton>
                            </div>
                        </div>



                    </div>
                    <%--    </div>--%>
                </div>
            </div>
        </ContentTemplate>
        <Triggers>
        </Triggers>

    </asp:UpdatePanel>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html
Bootstrap Popover and ToolTip not working inside Update Panel after postback

Company

Explore

Follow us

Contact Us
