Everything is ok so far, I had to put a Timer and update some data from condebehind, the problem is that, after every update my slick-slidetoggle
div loose all the java functionality... what am I doing wrong???
What's happening is your UpdatePanel refreshes are reverting the DOM back to how it was before jQuery wired up those handlers. The quick and dirty fix is to move that jQuery code into pageLoad() instead of $(document).ready(), since
pageLoad fires after every partial postback.
Hi! I've had the same issue using jquery slidetoggle. I moved the event binding to the pageLoad() method. But now, every time I'm doing an UpdatePanel Update, and click on my slideToggle button, the div collapses and expands several times, depending how often
I did an update in an updatepanel... any suggestions?
You have to be careful when wiring up events in pageLoad(), whether using jQuery or ASP.NET AJAX's $addHandler, because it's possible to wire up multiple copies of the same event to the same element. In the previous poster's case of a Timer that updates
everything, pageLoad() is the easiest way and is safe since the elements will be replaced after every Timer tick.
If you're using jQuery 1.3.x, the easiest way to resolve your problem is to use
the new "live" functionality. That's extremely useful when using jQuery with UpdatePanels.
Because of some bugs in the new release I cant use 1.3.x and have to stick to 1.2.6... so is there maybe a way to unwire events from elements. I already searched for a solution for this issue, but it seems no one uses the combination of jquery, updatepanels
and slidetoggle.
I solved this problem by adding custom event to jquery like this:
jQuery.fn.extend({
AjaxReady : function(fn){
if (fn) {
return jQuery.event.add(this[0], "AjaxReady", fn, null);
} else {
var ret = jQuery.event.trigger("AjaxReady", null, this[0], false, null);
// if there was no return value then the even validated correctly
if (ret === undefined)
ret = true;
return ret;
}
}
});
-------------------
And than called it on each UpdatePanel Post back event:
rdelgadoj
Member
9 Points
5 Posts
jQuery methods and UpdatePanel
Dec 03, 2007 10:02 PM|LINK
Hello,
I'm using jQuery to show and hide a div in my page... I wrote this in codeinline:
<script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript">$(document).ready(
function() {$(
'#remindershide').hide(); $('#slick-slidetoggle').click( function() { $('#remindershide').slideToggle(400);return false;});
$(
'#cancelReminder').click( function() {$(
'#remindershide').slideToggle(400); return false;});
});
</script>
Everything is ok so far, I had to put a Timer and update some data from condebehind, the problem is that, after every update my slick-slidetoggle div loose all the java functionality... what am I doing wrong???
Thanks
gt1329a
All-Star
15377 Points
2501 Posts
ASPInsiders
MVP
Re: jQuery methods and UpdatePanel
Dec 03, 2007 11:30 PM|LINK
What's happening is your UpdatePanel refreshes are reverting the DOM back to how it was before jQuery wired up those handlers. The quick and dirty fix is to move that jQuery code into pageLoad() instead of $(document).ready(), since pageLoad fires after every partial postback.
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
the-pixel
Member
4 Points
2 Posts
Re: jQuery methods and UpdatePanel
Feb 01, 2009 02:04 PM|LINK
gt1329a
All-Star
15377 Points
2501 Posts
ASPInsiders
MVP
Re: jQuery methods and UpdatePanel
Feb 01, 2009 05:28 PM|LINK
You have to be careful when wiring up events in pageLoad(), whether using jQuery or ASP.NET AJAX's $addHandler, because it's possible to wire up multiple copies of the same event to the same element. In the previous poster's case of a Timer that updates everything, pageLoad() is the easiest way and is safe since the elements will be replaced after every Timer tick.
If you're using jQuery 1.3.x, the easiest way to resolve your problem is to use the new "live" functionality. That's extremely useful when using jQuery with UpdatePanels.
A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
the-pixel
Member
4 Points
2 Posts
Re: jQuery methods and UpdatePanel
Feb 01, 2009 05:50 PM|LINK
gt1329a
All-Star
15377 Points
2501 Posts
ASPInsiders
MVP
Re: jQuery methods and UpdatePanel
Feb 01, 2009 05:55 PM|LINK
You can use unbind(). Just place a call to that before your event handler wireup in pageLoad().
function pageLoad() { $('element').unbind(); $('element').click(function() { alert('click'); }); }A guide to combining jQuery and ASP.NET: jQuery for the ASP.NET developer
akhileshnair
Member
6 Points
12 Posts
Re: jQuery methods and UpdatePanel
Nov 05, 2009 04:16 AM|LINK
Hi friend ,
When the Ajax toolkit is used in a page Jquery method's won't be fired after a partial postback..
So you can use this method to wire ur jquery events to the Ajax Update panel
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
//Jquery logic
});
</script>
This code should be placed inside the contentTemplate tag
Happy Coding....
germanz
Member
2 Points
1 Post
Re: jQuery methods and UpdatePanel
Feb 18, 2010 01:12 PM|LINK
I solved this problem by adding custom event to jquery like this:
jQuery.fn.extend({ AjaxReady : function(fn){ if (fn) { return jQuery.event.add(this[0], "AjaxReady", fn, null); } else { var ret = jQuery.event.trigger("AjaxReady", null, this[0], false, null); // if there was no return value then the even validated correctly if (ret === undefined) ret = true; return ret; } } });-------------------
And than called it on each UpdatePanel Post back event:
prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(EndRequest); function EndRequest (sender, args) { //alert("EndRequest"); $(document).AjaxReady(); }-------------------
One more thing is left, register actions which we want to do on each post back. It will look like this:
$(document).AjaxReady(function(){ // do something }); insteed of $(document).ready(function(){ // do something });madasty
Member
3 Points
8 Posts
Re: jQuery methods and UpdatePanel
Jul 29, 2010 06:36 PM|LINK
Hi,
I know the reason why JQuery was failing but didn't know the solution - the solution you have is fabulous!
Thank you.
beaudet
Member
6 Points
5 Posts
Re: jQuery methods and UpdatePanel
Oct 06, 2011 02:40 PM|LINK
Looks like pageLoad() saved my bacon. Thanks!