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