Question

我的智慧在这里结束了。我的页面上有一个链接，用于将PartialView的内容加载到我页面上的<div>作为可拖动模式。将内容加载到div中的Javascript代码可以正常工作，但是我创建模式的回调失败并出现以下错误：

> Uncaught TypeError: undefined is not a function 
> jquery-1.8.2.min.js:19p.fn.extend.add 
> jquery-1.8.2.min.js:19p.fn.extend.addBack 
> jquery-1.8.2.min.js:19a.widget._getHandle 
> jquery-ui-1.8.24.min.js:23a.widget._mouseCapture 
> jquery-ui-1.8.24.min.js:23a.widget._mouseDown 
> jquery-ui-1.8.24.min.js:23(anonymous function) 
> jquery-ui-1.8.24.min.js:23p.event.dispatch 
> jquery-1.8.2.min.js:19g.handle.h jquery-1.8.2.min.js:19

我的_Layout.cshtml文件中定义的HTML头代码：

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

    <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.8.24.min.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.dataTables.min.js"></script>

    <link href="/Content/siteV2.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/Content/jquery.dataTables.min.css" />

</head>

要执行的Javascript代码驻留在我的ViewPresentationSchedule.cshtml页面上，该页面以View的形式返回：

<script type="text/javascript">
    function showAddForm() {
        $('#AddPresenterForm').load('@Url.Action("AddPresenterForm", "Pod", new { podId = pod.PodId })',
            function () {
                showform();
            }
        );
    }

    //fades in our help popup and makes it draggable but not resizable
    function showform() {
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $('#AddPresenterForm').height();
        var popupWidth = $('#AddPresenterForm').width();
        $('#AddPresenterForm').css('position', 'absolute');
        $('#AddPresenterForm').css('top', windowHeight / 2 - popupHeight / 2);
        $('#AddPresenterForm').css('left', windowWidth / 2 - popupWidth / 2);
        $('#AddPresenterForm').fadeIn('slow',
        function () {
            $('#AddPresenterForm').draggable();
            $('#AddPresenterForm').css('display', 'block');
        });
    }

</script>

分割ViewPresentationSchedule.cshtml，以View的形式返回：

<div id="AddPresenterForm">

</div>

链接让所有魔法发生：

<a href="#" onclick="showAddForm()">Add Presenter</a>

任何想法可能会发生什么？我怀疑jQuery UI没有正确加载/初始化，因为我在其他页面上运行的.datepicker（）命令也不起作用。

Answer 1

经过进一步调查，我的jQuery文件出了问题。我删除了它们并从CDN中检索它们，现在一切都按预期工作。

Answer 2

也许这与您初始化draggable()的位置有关。您可以在加载内容之前初始化draggable()。我假设#AddPresenterForm被隐藏，直到单击Add Presenter按钮，在这种情况下，如果它在可见时已经可以拖动，则不会有问题。

如果这似乎不起作用，您可以使用jQuery UI模式对话框，这可以使您正在做的事情变得更加容易。

这是一个示例的链接，似乎与您尝试执行的操作相符：http://jqueryui.com/dialog/#modal-form

jquery ui - undefined不是对话框上的函数

2 个答案: