jQuery $(document).ready and UpdatePanels?
An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.
What I've done to work around this is re-subscribe to the events I need after every update. I use $(document).ready()
for the initial load, then use Microsoft's PageRequestManager
(available if you have an update panel on your page) to re-subscribe every update.
$(document).ready(function() {
// bind your jQuery events here initially
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
// re-bind your jQuery events here
});
The PageRequestManager
is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.
If you need more detailed control, this event passes arguments similar to how .NET events are passed arguments (sender, eventArgs)
so you can see what raised the event and only re-bind if needed.
Here is the latest version of the documentation from Microsoft: msdn.microsoft.com/.../bb383810.aspx
A better option you may have, depending on your needs, is to use jQuery's .on()
. These method are more efficient than re-subscribing to DOM elements on every update. Read all of the documentation before you use this approach however, since it may or may not meet your needs. There are a lot of jQuery plugins that would be unreasonable to refactor to use .delegate()
or .on()
, so in those cases, you're better off re-subscribing.
using Document.ready with update panel
document.ready function will not work after a call back .. you need to call that function after every post back.. there are number of solutions
1) use pageLoad instead of document.ready
function pageLoad() {
//execute code
}
2) or you can register your function after a call back
ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "function", "try{function();}catch(err){}", True)
3) or you can call your function in
function page_EndRequest(sender, args) {
// your Code
}
ASP.NET/Jquery: document ready in update panel?
Put a method in your head tags and then in your placeholder call it. The problem here is that your PlaceHolder Visible="false" so it's never rendered. If you show it dynamically via ajax the script won't run. You'd have to rebind it when you dynamically show the placeholder. I would suggest not using document(ready) ...
How do I use a jQuery $(document).ready and an ASP.NET UpdatePanel together?
You will need to add a handler to the AJAX client side endRequest event. See the links below for more information. This "event" is called when the ajax engine completes a request to the server, and is necessary for any javascript running on content that is inside the update panel.
http://www.asp.net/ajax/documentation/live/overview/AJAXClientEvents.aspx
http://msdn.microsoft.com/en-us/library/bb383810.aspx
<script type="text/javascript">
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
// code that you want to run when the request is complete
}
<script>
Related Topics
Angularjs: How to Pass Variables Between Controllers
Sleep in JavaScript - Delay Between Actions
Suppress Chrome 'Failed to Load Resource' Messages in Console
Best Way to Find If an Item Is in a JavaScript Array
How to Use JavaScript Conditionally Like CSS3 Media Queries, Orientation
How to Determine If ::Before Is Applied to an Element
Jquery in Chrome Returns "Block" Instead of "Inline"
Detect iOS Version Less Than 5 with JavaScript
How to Zip Two Arrays in JavaScript
Difference Between Domcontentloaded and Load Events
Is the JavaScript Date Object Always One Day Off
JavaScript Function to Add X Months to a Date
JavaScript: Object Literal Reference in Own Key'S Function Instead of 'This'
Queryselector and Queryselectorall VS Getelementsbyclassname and Getelementbyid in JavaScript
Programmatically Changing Webkit-Transformation Values in Animation Rules
Polymer Share Styles Across Elements
Vue.Js - Add Class to Clicked Button
Invoke Method in Objective C Code from HTML Code Using Uiwebview