Jquery is not working while full-page Update Panels are used in ASP .Net webforms. The issue I am facing is that when I apply update panel on the full page then Jquery function is not working. (For example: when I click on bootstrap dropdown so dropdown
are showing for 1 second and automatically disappear)
The problem with is that I want Jquery to fully work (no need to reload it again) while any partial postback request from UpdatePanels in ASP .Net occurs.
The UpdatePanel overwrites the dropdown-menu which break the event handler. You need to recreate the event handler for the newly rendered dropdown-menu elements.
<script>
function pageLoad(){
$('.dropdown-menu').on('click', function (e) {
if ($(this).hasClass('dropdown-menu-form')) {
e.stopPropagation();
}
});
$('.dropdown-menu').on('click', function (e) {
if ($(this).hasClass('dropdown-menu-showhide')) {
e.stopPropagation();
}
});
}
</script>
UpdatePane is used for page partial refresh, is to submit the page to the server, asynchronously re-render the HTML in the UpdatePanel after executing the server code. During this process, there are no state changes in other parts of the page, avoiding PostBack
for the entire page.
JQuery: You can add various properties and event handlers to HTML elements with simple code. Your "change" event will run once after the DOM is fully loaded.
bahmad143
when I apply update panel on the full page then Jquery function is not working
So after the UpdatePanel is partially refreshed, the elements are overwritten and the entire DOM tree is not reloaded, so the jQuery ready event is not fired, so your code is not working.
As mgebhard says, you can use function pageLoad()，that gets called each time the page posts back, be it full or partial from an UpdatePanel.
Best regards,
Sam
IIS.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
None
0 Points
1 Post
jQuery are not working in full page update panel in asp.net webforms
Jul 09, 2019 12:02 PM|bahmad143|LINK
Jquery is not working while full-page Update Panels are used in ASP .Net webforms. The issue I am facing is that when I apply update panel on the full page then Jquery function is not working. (For example: when I click on bootstrap dropdown so dropdown are showing for 1 second and automatically disappear)
The problem with is that I want Jquery to fully work (no need to reload it again) while any partial postback request from UpdatePanels in ASP .Net occurs.
<asp:Content ID="content4" runat="server" ContentPlaceHolderID="ContentPlaceHolder1"> <asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager> <script> //import dropdown-menu script $("document").ready(function () { $('.dropdown-menu').on('click', function (e) { if ($(this).hasClass('dropdown-menu-form')) { e.stopPropagation(); } }); $('.dropdown-menu').on('click', function (e) { if ($(this).hasClass('dropdown-menu-showhide')) { e.stopPropagation(); } }); }); </script> <style> /*import dropdown-menu css*/ .dropdown-menu-form { min-width:192px; } .dropdown-menu-form > li > a{ padding:8px 18px; } .dropdown-header-imp{ font-weight: 600; background-color: #f1f3f6; padding-bottom: 6px; color: #6a6c6f; font-size: 14px; padding-top: 6px; padding-left: 17px; } .dropdown-menu-form li a:hover{ background-color:#6a6c6f; color:#fff; transition: all 0.4s ease 0s; } /*Show Hide col dropdown-menu css*/ .dropdown-menu-showhide{ min-width:250px; height:300px; overflow-y:scroll; } .dropdown-menu-showhide > li { padding:6px 8px; } .dropdown-header-showhide{ font-weight: 600; background-color: #f1f3f6; padding-bottom: 6px; color: #6a6c6f; font-size: 14px; text-align:center; padding-top: 6px; padding-left: 17px; } .dropdown-menu-showhide li:hover{ background-color:#f1f3f6; color:#6a6c6f; transition: all 0.4s ease 0s; } </style> <asp:PlaceHolder runat="server" ID="PlaceHolder2" /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"> <ContentTemplate> <div class="row"> <div class="col-md-9"> <div class="form-group pull-right"> <div> <asp:LinkButton ID="LinkButton1" CssClass="btn btn-primary" runat="server" ToolTip="Insert New Vendor" data-toggle="tooltip" data-placement="top" OnClick="InsertVendorImageButton_Click"><i class="fa fa-plus" aria-hidden="true"></i> Add</asp:LinkButton> <asp:LinkButton ID="LinkButton2" CssClass="btn btn-info" runat="server" data-toggle="tooltip" data-placement="top" ToolTip="Update Selected Vendor(s) Record" OnClick="UpdateVendorImageButton_Click"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</asp:LinkButton> <asp:LinkButton ID="LinkButton3" CssClass="btn btn-danger" runat="server" data-toggle="tooltip" data-placement="top" ToolTip="Delete Selected Vendor(s) Record" OnClientClick="return DeleteRecord();" OnClick="DeleteVendorImageButton_Click"><i class="fa fa-trash" aria-hidden="true"></i> Delete</asp:LinkButton> </div> </div> </div> </div> <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always"> <Triggers> <asp:AsyncPostBackTrigger ControlID="CheckBoxEmail" EventName="CheckedChanged" /> </Triggers> <ContentTemplate> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <div class="row"> <div class="col-lg-12"> <div class="hpanel hblue"> <div class="panel-heading hbuilt"> <div class="panel-tools"> <div class="small text-bold left"> Show <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> <asp:ListItem Value="1">5</asp:ListItem> <asp:ListItem Value="2" Selected="True">10</asp:ListItem> <asp:ListItem Value="3">20</asp:ListItem> <asp:ListItem Value="4">50</asp:ListItem> <asp:ListItem Value="5">100</asp:ListItem> <asp:ListItem Value="6">500</asp:ListItem> </asp:DropDownList> entries </div> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <i class="fa fa-cog"></i> </a> <ul class="dropdown-menu dropdown-menu-showhide pull-right" style="font-size: 14px;"> <li class="dropdown-header-showhide">Show Hide Column </li> <li> <div class="checkbox checkbox-primary"> <asp:CheckBox ID="CheckBox1" Checked="true" runat="server" Text="Email" AutoPostBack="true" /> </div> </li> <li> <div class="checkbox checkbox-primary"> <asp:CheckBox ID="CheckBox3" Checked="true" runat="server" Text="Skype ID" /> </div> </li> <li> <div class="checkbox checkbox-primary"> <asp:CheckBox ID="CheckBox4" Checked="false" runat="server" Text="Tax" /> </div> </li> </ul> </div> <h3 class="panel-heading-primary-h3">Vendor(s)</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-4 pull-right"> <div class="form-group"> <input type="text" id="txt_search" class="form-control" placeholder="Search Vendor(s)..." data-toggle="tooltip" data-placement="top" title="Search Vendor(s)" /> <%--<asp:TextBox ID="VendorTextBox" runat="server" CssClass="form-control" placeholder="Search Vendor(s)..." data-toggle="tooltip" data-placement="top" ToolTip="Search Vendor(s) "></asp:TextBox> --%> </div> </div> </div> <asp:HiddenField ID="HiddenField1" runat="server" /> <div class="row"> <div class="col-lg-12"> <div class="table-responsive"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="10" PagerSettings-Position="Bottom" OnPageIndexChanging="VendorGridView_PageIndexChanging" EnableModelValidation="True" OnRowCommand="CustomerGridView_RowCommand" CssClass="webposgridview-primary" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" AllowSorting="true" OnSorting="VendorGridView_Sorting" ShowFooter="true" OnRowCreated="VendorGridView_RowCreated"> <Columns> <asp:TemplateField HeaderText="Select" HeaderStyle-Width="10px" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Bottom" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Bottom"> <HeaderTemplate> <div class="checkbox checkbox-primary" data-toggle="tooltip" data-placement="top" title="Select All Records"> <input id="Checkbox2" type="checkbox" onclick="CheckAll(this)" runat="server" aria-label="Single checkbox One" /> <label></label> </div> </HeaderTemplate> <ItemTemplate> <div class="checkbox checkbox-primary"> <asp:CheckBox ID="SelectCheckBox_item" runat="server" /> <label></label> </div> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Vendor ID" Visible="false"> <ItemTemplate> <asp:Label ID="VendorLabel_item" runat="server" Text='<%# Eval("VendorID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Vendor(s) Name<span class='fa fa-sort-alpha-asc gridview-desc-ion'></span>" SortExpression="VendorName"> <ItemTemplate> <asp:Label ID="VendorNameLabel" runat="server" Text='<%# Eval("VendorName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="E-Mail"> <ItemTemplate> <asp:Label ID="ZIPLabel" runat="server" Text='<%# Eval("Email") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="View Detail" HeaderStyle-Width="110px"> <ItemTemplate> <%--<asp:ImageButton ID="detailImageButton_item" runat="server" CommandName="Detail" CommandArgument='<%#Eval("CustomerID") %>' Height="18px" ImageUrl="~/Images/customerdetail1.png" Width="70px" />--%> <asp:LinkButton ID="detailImageButton_item" runat="server" CommandName="Detail" CssClass="btn btn-default btn-sm" CommandArgument='<%#Eval("VendorID") %>' data-toggle="tooltip" data-placement="left" ToolTip="View Detail"><i class="ion-eye"></i> View</asp:LinkButton> </ItemTemplate> <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> </asp:TemplateField> </Columns> <PagerSettings Mode="NumericFirstLast" PageButtonCount="20" /> </asp:GridView> </div> </div> </div> </div> </div> </div> </div> </asp:View> <asp:View ID="View2" runat="server"> <div class="row"> <div class="col-lg-12"> <div class="hpanel hblue"> <div class="panel-heading hbuilt text-center"> <label id="Label3" runat="server" class="panel-inner-heading-primary-h3"></label> </div> <div class="panel-body"> <div class="row"> <div class="col-lg-4"> <div class="form-group"> <asp:HiddenField ID="HiddenField2" runat="server" /> <label>Company Name:</label> <asp:TextBox ID="TextBox3" CssClass="form-control" runat="server"></asp:TextBox> </div> </div> <div class="col-lg-4"> <div class="form-group"> <label>Email Address:</label> <asp:TextBox ID="TextBox4" runat="server" CssClass="form-control" /> </div> </div> <div class="col-lg-4"> <div class="form-group"> <label>Tax Number:</label> <asp:TextBox ID="TextBox5" runat="server" CssClass="form-control" /> </div> </div> </div> <script> Sys.Application.add_load(initdropdownInsertCategoryDDL); </script> <div class="row"> <div class="col-lg-4"> <div class="form-group"> <label>Classes</label> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="InsertCategoryDDL" Display="Dynamic" ErrorMessage="Please Select Category and then Press Save" InitialValue="0" Text="<i class='ion-ios-medical'> </i>" ToolTip="Please Select Category and then Press Save" ValidationGroup="InsertCategoryGrp" /> <asp:Panel ID="Panel1" runat="server"> <asp:DropDownList ID="DropDownList4" runat="server" AutoPostBack="True" OnSelectedIndexChanged="InsertCategoryDDL_SelectedIndexChanged" CssClass="form-control js-source-states"> </asp:DropDownList> </asp:Panel> </div> </div> <div class="col-lg-8"> <div class="form-group"> <label>Details:</label> <asp:TextBox ID="TextBox9" runat="server" CssClass="form-control" Style="resize: none" /> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="form-group"> <asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder> <asp:LinkButton ID="LinkButton8" runat="server" OnClick="ClearClassLinkButton_Click">Clear Classes</asp:LinkButton> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-6"> <div class="page-header"> <h4 style="text-align: center;">Contact Information</h4> </div> </div> </div> </div> <div class="panel-footer" id="test1"> <asp:LinkButton ID="LinkButton9" CssClass="btn btn-primary" runat="server" CausesValidation="false" ValidationGroup="InsertGrp" OnClientClick="return SaveOrUpdate();" OnClick="InsertLinkButton_Click"> Save</asp:LinkButton> <asp:LinkButton ID="LinkButton10" CssClass="btn btn-danger" runat="server" ValidationGroup="ClearGrp" OnClick="ClearLinkButton_Click"> Clear</asp:LinkButton> </div> </div> </div> </div> </asp:View> </asp:MultiView> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="btnExportSelected" /> <asp:PostBackTrigger ControlID="btnExportAll" /> <asp:AsyncPostBackTrigger ControlID="ConvertionExportDDL" /> <asp:AsyncPostBackTrigger ControlID="IDButtonSettings" /> <asp:AsyncPostBackTrigger ControlID="IDCheckBoxListMain" /> <asp:PostBackTrigger ControlID="CheckBoxTax" /> <asp:PostBackTrigger ControlID="CheckBoxBankName" /> <asp:PostBackTrigger ControlID="CheckBoxBankAccountNo" /> <asp:PostBackTrigger ControlID="CheckBoxClasses" /> <asp:PostBackTrigger ControlID="CheckBoxAddress" /> <asp:PostBackTrigger ControlID="CheckBoxVendorName" /> <asp:PostBackTrigger ControlID="CheckBoxDetails" /> </Triggers> </asp:UpdatePanel> </asp:Content>All-Star
53711 Points
24041 Posts
Re: jQuery are not working in full page update panel in asp.net webforms
Jul 09, 2019 01:22 PM|mgebhard|LINK
The UpdatePanel overwrites the dropdown-menu which break the event handler. You need to recreate the event handler for the newly rendered dropdown-menu elements.
https://stackoverflow.com/questions/9026496/running-script-after-update-panel-ajax-asp-net
<script> function pageLoad(){ $('.dropdown-menu').on('click', function (e) { if ($(this).hasClass('dropdown-menu-form')) { e.stopPropagation(); } }); $('.dropdown-menu').on('click', function (e) { if ($(this).hasClass('dropdown-menu-showhide')) { e.stopPropagation(); } }); } </script>Contributor
3370 Points
1409 Posts
Re: jQuery are not working in full page update panel in asp.net webforms
Jul 10, 2019 10:11 AM|samwu|LINK
Hi bahmad143,
UpdatePane is used for page partial refresh, is to submit the page to the server, asynchronously re-render the HTML in the UpdatePanel after executing the server code. During this process, there are no state changes in other parts of the page, avoiding PostBack for the entire page.
JQuery: You can add various properties and event handlers to HTML elements with simple code. Your "change" event will run once after the DOM is fully loaded.
So after the UpdatePanel is partially refreshed, the elements are overwritten and the entire DOM tree is not reloaded, so the jQuery ready event is not fired, so your code is not working.
As mgebhard says, you can use function pageLoad()，that gets called each time the page posts back, be it full or partial from an UpdatePanel.
Best regards,
Sam