jQuery UI-未定义不是对话框上的函数

Question

I'm at my wit's end here. 我在这里机智。 I have a link on my page that is designed to load the contents of a PartialView into a <div> on my page as a draggable modal. 我的页面上有一个链接，该链接旨在将PartialView的内容作为可拖动模式加载到页面上的<div> 。 The Javascript code to load the content into a div works, but my callback to create the modal fails with the following error: 将内容加载到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

Code from HTML head as defined in my _Layout.cshtml file: 在我的_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 code to execute that resides on my ViewPresentationSchedule.cshtml page, which is returned as a View : 执行的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>

Div on ViewPresentationSchedule.cshtml, which is returned as a View : Div在ViewPresentationSchedule.cshtml上，以View形式返回：

<div id="AddPresenterForm">

</div>

Link to make all the magic happen: 链接使所有魔术发生：

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

Any ideas what may be happening? 任何想法可能会发生什么？ I suspect that jQuery UI is not loading/initializing properly as I have .datepicker() commands on other pages that don't work as well. 我怀疑jQuery UI无法正确加载/初始化，因为我在其他页面上的.datepicker（）命令也无法正常工作。

Answer 1

After further investigation, there was something wrong with my jQuery files. 经过进一步调查，我的jQuery文件出了点问题。 I deleted them and retrieved them from a CDN and now everything works as expected. 我删除了它们并从CDN中检索了它们，现在一切正常。

Answer 2

Perhaps it has to do with where you are initializing draggable() . 可能与初始化draggable() 。 You could probably initialize the draggable() prior to loading the content. 您可以在加载内容之前初始化draggable() 。 I assume #AddPresenterForm is hidden until the Add Presenter button is clicked, in which case it wouldn't be a problem if it is already draggable by the time it becomes visible. 我假定#AddPresenterForm在单击“添加演示者”按钮之前是隐藏的，在这种情况下，如果它在可见时已经可拖动，则不会有问题。

If that doesn't seem to work you could use jQuery UI Modal Dialogue box which could make what you are doing a lot easier. 如果这似乎不起作用，则可以使用jQuery UI Modal Dialogue框，这可以使您的工作变得容易得多。

Here is a link to an example that seems to match what you are trying to do: http://jqueryui.com/dialog/#modal-form 这里是一个示例的链接，该示例似乎与您尝试执行的操作相匹配： http : //jqueryui.com/dialog/#modal-form

jQuery UI-未定义不是对话框上的函数

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-09-10 19:15:03

解决方案2
0 2014-09-10 18:35:34

jQuery UI-未定义不是对话框上的函数

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-09-10 19:15:03

解决方案2 0 2014-09-10 18:35:34

解决方案1
1 已采纳 2014-09-10 19:15:03

解决方案2
0 2014-09-10 18:35:34