Home > ASP.NET, JQuery > Rebinding events in jQuery after Ajax update (updatepanel)

Rebinding events in jQuery after Ajax update (updatepanel)


Some time we use update panel and $(document).ready(function() {});function of jquery in same page . Then whatever written inside $(document).ready(function() {});not work once we have done or performed partail post back because script inside $(document).ready(function() {}); is not bound with the page .So in this Scenario we have two option for solving the problem for the same.

  1. PageLoad event handler
  2. endRequest event of the PageRequestManager class

let see implementation of both one by one.

Using PageLoad event handler

Since we’re using ASP.NET AJAX,we’ll have access to a pageLoad event handler,that gets called each time the page posts back, be it full or partial from an UpdatePanel.You just need to put this function into your page.


function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
//Specific code for partial postbacks can go in here.
}
}

just place your entire  $(document).ready(function() {}); inside pageLoad event handler , now our problem solved.like this.

function pageLoad(sender, args) {
$(document).ready(function() {

$("input[id$=btnMail]").click(function() {
if ($("input[id$=txtMailingList]").val() == '') {
alert('Please enter e-mail Address');
return false;
}
else if ($("input[id$=txtMailingList]").val() != '') {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var eaddress = document.getElementById("<%=txtMailingList.ClientID %>").value;
if (reg.test(eaddress) == false) {
document.getElementById("<%=txtMailingList.ClientID %>").focus();
alert('Please enter valid email address.');
return false;
}
}
});

});
}

using endRequest event of the PageRequestManager class

endRequest event Raised after an asynchronous postback is finished and control has been returned to the browser. way of using :

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler)
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(endRequestHandler)

Hope this will help you in solving your problem . if it help leave a comment it encourage to write more on issue.

Advertisements
Categories: ASP.NET, JQuery Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: