locked
jQuery methods and UpdatePanel RRS feed

  • Question

  • User-1277958489 posted

    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

     

     

     

    Monday, December 3, 2007 6:02 PM

Answers

  • User770037084 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2007 7:30 PM

All replies

  • User770037084 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 3, 2007 7:30 PM
  • User542219115 posted
    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?
    Sunday, February 1, 2009 10:04 AM
  • User770037084 posted

    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.

    Sunday, February 1, 2009 1:28 PM
  • User542219115 posted
    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.
    Sunday, February 1, 2009 1:50 PM
  • User770037084 posted

    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'); });
    }
     
    Sunday, February 1, 2009 1:55 PM
  • User-1850184500 posted

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


    Smile

    Thursday, November 5, 2009 12:16 AM
  • User-1810648487 posted

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



    Thursday, February 18, 2010 9:12 AM
  • User366855494 posted

    Hi,

            I know the reason why JQuery was failing but didn't know the solution - the solution you have is fabulous!

     

    Thank you. 

    Thursday, July 29, 2010 2:36 PM
  • User1246459114 posted

    Looks like pageLoad() saved my bacon.  Thanks!

    Thursday, October 6, 2011 10:40 AM