ModalPopupExtender: Dragging dialog box results in 'scrollleft is null or not an object' error_问答_开发者

I am using the ModalPopupExtender control to display a modal popup dialog when a button is click. The problem is that dragging the dialog results in an 'scrollleft is null or not an object' error.

Here's a video demo

..and here is ALL the code:

If possible, I'd like to resolve this problem w/o resorting to modifying the AjaxToolkit scripts themselves.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyModalSimple.aspx.vb" Inherits="MyModalSimple" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }
    </style>
    <link href="Default.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        function onOk() {
            //form1.submit();
        }
    </script>

    <script type="text/javascript">
        var clientid;
        function fnSetFocus(txtClientId) {
            clientid = txtClientId;
            setTimeout("fnFocus()", 1000);

        }

        function fnFocus() {
            //debugger;
            if (document.getElementById("pnlModal").style.display != "none")
                eval("document.getElementById('" + clientid + "').focus()");
        }

        function fnClickOK(sender, e) {
            __d开发者_如何学编程oPostBack(sender, e);
        }


    </script>

</head>
<body>
    <form id="form1" runat="server">
        <br />
        Clicking the button will bring up the modal dialog<br />
        <br />    
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server" TargetControlID="Button1"
            PopupDragHandleControlID="programmaticPopupDragHandle" PopupControlID="pnlModal"
            OkControlID="btnOK" CancelControlID="btnCancel" DropShadow="true" OnOkScript="onOk();"
            BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <br />
        <asp:Panel ID="pnlModal" runat="server" Style="display: None" BackColor="#CCCCCC">
            <asp:Panel runat="Server" ID="programmaticPopupDragHandle" Style="cursor: move; background-color: #DDDDDD;
                border: solid 1px Gray; color: Black; text-align: center;">
                Caption
            </asp:Panel>
            <br />
            <table>
                <tr>
                    <td>
                        <asp:Label ID="lblFirst" runat="server" Text="First"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtFirst" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblLast" runat="server" Text="Last"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtLast" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td align="right">
                        <asp:Button ID="btnOK" runat="server" Text="OK" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
        <br />
        <br />
        </div>
    </form>
</body>
</html>

Partial Class MyModalSimple

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then

            Button1.Attributes.Add("onclick", "fnSetFocus('" + txtFirst.ClientID + "');")

            btnOK.OnClientClick = String.Format("fnClickOK('{0}','{1}')", btnOK.UniqueID, "")

        End If

    End Sub

    Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOK.Click
        lblMessage.Text = "Hi, " & txtFirst.Text & " " & txtLast.Text
    End Sub
End Class

Unfortunately this is a known bug in the DragPanelExtender. I would recommend dropping the modal extender all together if it's an option and you're comfortable with javascript.

With jQuery/jQuery UI for example, your page would look like:

<form id="form1" runat="server">
  <br />
  Clicking the button will bring up the modal dialog<br />
  <br />    
  <div>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <br />
    <div id="myModal" Style="display: None" background="#CCCCCC" title="Caption/Dialog Title">
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblFirst" runat="server" Text="First" />
                </td>
                <td>
                    <asp:TextBox ID="txtFirst" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblLast" runat="server" Text="Last" />
                </td>
                <td>
                    <asp:TextBox ID="txtLast" runat="server" />
                </td>
            </tr>
        </table>
    </div>
    <asp:Label ID="lblMessage" runat="server"></asp:Label>
    <br />
    <br />
    </div>
</form>
<script type="text/javascript">
  $(function() {
    $("#<%= Button1.ClientID %>").click() {
      $("#myModal").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
    }
  });
</script>

This is a whole different way of programming, but results in a much richer UI experience for the user. If you're willing to learn jQuery and how it hooks up, it's a really natural/fluid syntax that can add a great deal of power/flexibility to your web pages. Now keep in mind that I prefer jQuery but that there are many other javascript libraries available. You should at least browse around and see what looks the most comfortable if you're just getting started...it's possible since you're from a VB background (I'm from C#) that another libraries coding style/syntax is much more appealing.

Now if you're unwilling to go down that road and it's too unfamiliar, your only alternative as far as I can see is to do what you don't want to...compile the AJAX Control Toolkit yourself. If you want to go this route, grab the latest source from codeplex and modify the below section of Release\AjaxControlToolkit\Compat\DragDrop\DragDropScripts.js:

_drag: function(isInitialDrag) {
  var ev = window._event;
  var mousePosition = { x: ev.clientX, y: ev.clientY };

To this:

_drag: function(isInitialDrag) {
  if (!this._activeDragVisual) return;
  var ev = window._event;
  var mousePosition = { x: ev.clientX, y: ev.clientY };

The _onScrollerTick operation in certain browsers bombs out and nulls the dragVisual function. Credit is due here: A post on the ASP.Net forums by freakyer led me down this debug path to figure out where it's breaking...but I see no other solution as there is an actual bug in certain browsers not-fixable without a script change and recompile.

I urge you to consider the jQuery/other framework path, there's a ton of community support and examples out there to help get you started. This question from a while back is worth a read if the framework options interest you at all.