jQueryUI Ajax.NET Postback Bug
I have this ASP.NET page with ASP.NET UpdatePanel and jQueryUI droppable and sortable components. The page works fine in all browsers, but doesn't in Internet Explorer (IE8 tested).
After I try to call ASP.NET AJAX event (by pressing my asp.net button inside the UpdatePanel) my sortable list stops working properly inside IE browser and the browser throws the following error:
Message: Unspecified error. Line: 145 Char: 186 Code: 0 URI: http://code.jquery.com/jquery-1.4.2.min.js
I found out that the problem is caused by the code on line 66:
$("#droppable").droppable();
If I comment it out, the sortable list works fine after ajax postbacks. But it doesn't make sense.
Does anyo开发者_开发问答ne know what could be wrong?
Thanks.
P.S. I am using jQueryUI 1.8.1 and jQuery 1.4.2
I believe this is a bug in JQuery - I think there is a fix where you redefine the offset function to work under IE:
http://dev.jqueryui.com/ticket/4918
Cheers
The solution
<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#sortable
{
list-style-type: none;
margin: 0;
padding: 0;
border: solid 1px #999999;
}
#sortable li
{
margin: 0.3em 0.3em 0.3em 0.3em;
padding-left: 1.5em;
font-size: 1em;
height: auto;
border: dotted 1px #999999;
background-color: #dddddd;
}
#sortable li:hover
{
background-color: #aaaaaa;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="srptManager">
<Scripts>
<asp:ScriptReference Path="http://code.jquery.com/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="updPanel" runat="server">
<ContentTemplate>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div id="droppable" style="background-color: black">
Drop Here</div>
<asp:Button runat="server" ID="btnAjaxRefresh" Text="Go" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
// *******Solution Here*******
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
jqueryStuff();
}
}
function BeginRequestHandler(sender, args) {
$("#sortable").sortable("destroy");
$("#droppable").droppable("destroy");
}
function jqueryStuff() {
$(document).ready(function() {
$("#sortable").disableSelection();
$("#sortable").sortable();
// ******Problem at this line******
$("#droppable").droppable();
});
}
jqueryStuff();
</script>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论