Ajax/Asp.Net Update Panel problem

I've got an update panel but it seems to be removing a class from one of my inputs once it has updated

Here's the code on 开发者_运维百科first load

<input type="text" class="txt1 hasDatepicker" id="txt1" name="txt1">

And here's the code after the update has run

<input type="text" class="txt1" id="txt1" name="txt1">

Here's the jQuery that runs client side

 $(function() {
     $(".txt1").datepicker({ dateFormat: 'D d M yy' }); 
 });

It seems to just remove the hasDatepicker class after the update has run and it is causing problems.

Any ideas why it's doing this?

the jQuery ready event will only fire once the page load very first time. It does not detect AJAX updated even called from jQuery itself, because the page is already there.

However, there is a method similar to Page_Load on the server, if it exists in JavaScript global scope, it gets called once the page loads - in ASP.NET terms, that's either very first time or after partial postback / async update / ajax refresh.

The name is slightly different to match JavaScript conventions:

function pageLoad(){   
    $(".txt1").datepicker({ dateFormat: 'D d M yy' }); 
}

Try it and tell me in comments if it doesn't work...

The other answer (getting a script manager reference then calling add_pageLoaded() and passing a function) is like in ServerSide when you do this.Load += new .... on the server side while this one is the Page_Load version (event wire-up enabled by default). Of course I mean their corresponding in client-side not exactly the same. So, both are fine and both should work, but the 2nd way can be useful if you have multiple load event handlers, which can complicate things more than needed.

You will need to use PageRequestManager, which requires ScriptManager on the page. You can declare it as <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> and then in instantiate PageRequestManager as:

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(SomeFunction);
    prm.add_pageLoaded(function() {});

    function SomeFunction() {}
</script>