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

 

 

 

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.

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'); });
}

 

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