jquery ui - undefined is not a function on dialog

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. The Javascript code to load the content into a div works, but my callback to create the modal fails with the following error:

> 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:

<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:

<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 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.

Which line of the showform() function is throwing the error? — user3559349
– user3559349, Commented Sep 6, 2014 at 8:22
@StephenMuecke It actually processes successfully. It's when I click on the DIV to drag it that I encounter the error. — ravibhagw
– ravibhagw, Commented Sep 6, 2014 at 22:02
Check your browser's debugger console for network errors. In my experience, that error means a script did not download correctly, or a script was executed in the wrong order. — Walter Stabosz
– Walter Stabosz, Commented Sep 10, 2014 at 17:58

ravibhagw · Accepted Answer · 2014-09-10 19:15:03Z

1

After further investigation, there was something wrong with my jQuery files. I deleted them and retrieved them from a CDN and now everything works as expected.

answered Sep 10, 2014 at 19:15

ravibhagw

1,74017 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jake Zeitz · Accepted Answer · 2014-09-10 18:35:34Z

0

Perhaps it has to do with where you are initializing draggable(). You could probably initialize the draggable() prior to loading the content. 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.

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.

Here is a link to an example that seems to match what you are trying to do: http://jqueryui.com/dialog/#modal-form

answered Sep 10, 2014 at 18:35

Jake Zeitz

2,5844 gold badges26 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery ui - undefined is not a function on dialog

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related