Ajax/Asp.Net Update Panel problem

2
votes

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?

2
jqueryasp.netajaxupdatepanel
is the hasDatepicker class added on the client side by any chance? - Menahem
@Menahem Yea it is - I can't figure out why it doesn't add it again once the update has run? - Jamie Taylor
looks like the client script isnt run afetr the ajax postback, maybe because of what Mohamed sais... - Menahem

2 Answers

3
votes

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.

1
votes

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>