jquery and updatepanel issue

Question

i have a webpart and it has dropdownlist and gridview and i am using updatepanel around dropdown and gridview..in gridview i have a textbox as date picker..when i go on that page and click on textbox the date picker appears but as soon as i change item in dropdown which triggers postback the datepicker never comes back.

here is the jquery code i am using if i change this code the updatepanel simply doesnt work.

<script type="text/javascript">
     var $ = jQuery.noConflict();
     $(function () {
         $('input[id*="txtftrNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
         $('input[id*="txtNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
         $('input[id*="txtftrQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
         $('input[id*="txtQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });

     });

</script>

Its because the event binding was lost after the partial postback. Try rebind them again upon postback.. — Tariqulazam
– Tariqulazam, Commented Dec 6, 2012 at 20:42

Ricky Gummadi · Accepted Answer · 2012-12-06 22:26:28Z

2

once an update panel does a async post back it wipes everything away. you need to rebind

<script type="text/javascript">    

$(function () {
     BindEvents();
 }); 


function BindEvents() {

           var $ = jQuery.noConflict();

             $('input[id*="txtftrNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
             $('input[id*="txtNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
             $('input[id*="txtftrQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
             $('input[id*="txtQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
        }
</script>

And in your update panel reload the jquery events again like this

 <asp:UpdatePanel>
      <ContentTemplate
           <script type="text/javascript">
                          Sys.Application.add_load(BindEvents);
           </script>

           <!-- your stuff in the update panel -->
      </ContentTemplate>
    </asp:UpdatePanel>

edited Dec 6, 2012 at 22:26

answered Dec 6, 2012 at 20:56

Ricky Gummadi

5,3502 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricky Gummadi Over a year ago

Ok I've updated my solution try now, you need to bind events when page is loaded and again when the update panel is triggerd.

user342944 Over a year ago

Rickey, Boriss & Tariq I am so sorry that i kept u guys for so long because of my silly mistake. for Quantity ive used autonumeric library and I forgot to include in my masterpage as this was a recent change and thats why on post back it was breaking up everything. Thanks to FireBug and you guys for sure..I really appreciate your time and efforts to solve this (finally) ..

Tariqulazam · Accepted Answer · 2012-12-06 20:44:41Z

0

This should work.

var $ = jQuery.noConflict();
$(document).ready(function(){
   BindEventHandler();
});
$.ajaxStop(function(){
   BindEventHandler();
});

function BindEventHandler(){
$('input[id*="txtftrNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
         $('input[id*="txtNeededBy"]').datepicker({ dateFormat: 'dd-M-y', changeMonth: true, minDate: 0 });
         $('input[id*="txtftrQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
         $('input[id*="txtQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
}

answered Dec 6, 2012 at 20:44

Tariqulazam

4,5831 gold badge38 silver badges44 bronze badges

13 Comments

user342944 Over a year ago

Tariq this time updatepanel is working but on page load first time the datepicker appears but once again if i select any item from dropdown and click on datepicker it never comes

Boriss Pavlovs Over a year ago

Try to call your function like this Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(BindEventHandler)

user342944 Over a year ago

boriss where do i need to add this statement? in document.ready first line?

Boriss Pavlovs Over a year ago

inside tag <script type="text/javascript"></script>together with function suggested Tariqulazam

Tariqulazam Over a year ago

Try to debug if the ajaxStop callback is fired or not after you select an item from the dropdown. Alternatively try what Boriss suggested.

|

Sushanth -- · Accepted Answer · 2012-12-06 20:53:33Z

0

Try it this way

$(function(){
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(BindEventHandler);
     BindEventHandler();
});

answered Dec 6, 2012 at 20:53

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

user342944 Over a year ago

Sushanth after trying ur statement the datepicker is appearing as expected but updatepanel doesnt work on 2nd time item select..it only works on first time..this is what happening here..either one thing works jquery or updatepanel but not both together :(

Collectives™ on Stack Overflow

jquery and updatepanel issue

3 Answers 3

2 Comments

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related