Databases
StackOverflow2013
Postsdbo
POWeird bug when combining an ASP.NET updatepanel with the jQuery UI DatePicker
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird bug when combining an ASP.NET updatepanel with the jQuery UI DatePicker
    text
    copied!<p>I've created a page which combines an inline <a href="http://docs.jquery.com/UI/Datepicker" rel="nofollow noreferrer">jQuery UI datepicker</a> . I wan't to initiate a callback to the updatepanel when the user clicks a new date to update some data. Now, this page has multiple updatepanels (don't ask :) ), so I need to check which updatepanel did the reload in order to do some stuff clientside. I'm using <code>__doPostBack</code> to do the postback and <code>Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {}</code> to listen for when an update is done.</p> <p>The problem is that in FF the callback tells me that it's not an async operation, and the data I need to have to check which updatepanel did the update is set to null.</p> <p>My problem is that this works fine in IE, but not in any other browser, which could be caused by 2 things: IE goes into a quirksmode which resolves the issue (this is what I think) or that IE has some sort of native support for the updatepanel that other browsers dont.</p> <p>I've narrowed the problem down, and produced a testpage:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;Test&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js "&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js "&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;asp:ScriptManager ID="ScriptManager1" runat="server" /&gt; &lt;script type="text/javascript"&gt; function doAspNetPostback() { __doPostBack('&lt;%= hiddenOnSelectionChangedButton.ClientID %&gt;', ''); } $(document).ready(function() { /* Create the datepicker */ buildDatepicker(); /* Add callback-method for when the scriptmanager finished a request */ Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) { /* Show the panelID - This is 'upd1|hiddenOnSelectionChangedButton' in IE as it should be, and null in Chrome / FF */ alert(sender._postBackSettings.panelID); }); }); function buildDatepicker() { var dp = $("#datepicker").datepicker({ onSelect: function(dateText, inst) { /* Do a postback when someone clicks a date */ doAspNetPostback(); } }); } &lt;/script&gt; &lt;div id="datepicker"&gt; &lt;/div&gt; &lt;asp:UpdatePanel UpdateMode="Conditional" ID="upd1" runat="server"&gt; &lt;ContentTemplate&gt; &lt;asp:Button ID="hiddenOnSelectionChangedButton" Text="Press me" runat="server" /&gt; &lt;div id="lala" runat="server"&gt; Upd1 &lt;/div&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Firing this testpage up in IE will result in a messagebox which shows what it's supposed to, while loading it in FF or Chrome results in a messagebox which says "null" :)</p> <p>I've tried all sorts of things, but I'm unsure of what could cause this behaviour as I'm not really that deep into the inner workings of jQuery or ASP.NET Ajax. However, if I step through the code in FireBug slow enough it works ... Which leads me to think it might be a problem with interoperability between jQuery callbacks and ASP.NET Ajax callbacks?</p> <p>Any help or ideas will be highly appreciated.</p> <p>Thanks.</p> <p>[UPDATE] Tim solved it! Thanks a lot! - Also thanks to everyone who spent their time trying to figure this out :)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload