JQuery UI Dialog - Uncaught TypeError: Cannot call method 'getTitleId' of undefined

Question

I am trying to use JQuery UI Dialog plugin in my ASP.NET MVC application. My problem is when I load my page, the the Chrome console gives the following error in jquery-ui-min.js file.

JQuery UI Dialog - Uncaught TypeError: Cannot call method 'getTitleId' of undefined

I am loading all js and css files in my layout page. Following are my JQuery events for dialog.

$('.button').live('click', function () {
    $('.dialog').dialog('open');
});

$('.dialog').dialog({
    autoOpen: false,
    buttons: {
        'Ok': function () {
             $(this).dialog('close');
         }
    }
});

These two events are located inside a seperate .js file which is also loaded in layout page. (This file is loading correctly, debugged it.)

In my partial view i have following piece of html for dialog.

<input type="button" value="Add Value" class="button" /> 
<div class="dialog"> 
    I am dialog.
</div>

When I remove the JQuery events for dialog, the error disappears.

Any ideas ? Thanks in advance.

EDIT :

Below is the inside of tag in my layout page.

<head>
<meta charset="utf-8" />
<title>@ViewBag.Title </title>
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui.min.js"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../Scripts/plugins/spinner/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/spinner/ui.spinner.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wysiwyg/wysiwyg.image.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wysiwyg/wysiwyg.link.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wysiwyg/wysiwyg.table.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/flot/jquery.flot.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/flot/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/flot/jquery.flot.pie.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/flot/excanvas.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/flot/jquery.flot.resize.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/tables/colResizable.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/forms.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/autogrowtextarea.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/autotab.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.validationEngine.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/chosen.jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/other/calendar.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/other/elfinder.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/uploader/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.alerts.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wizards/jquery.form.wizard.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.ToTop.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.listnav.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.sourcerer.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="../../Scripts/plugins/ui/jquery.prettyPhoto.js"></script>

// This is the file in which my dialog events are located.
<script type="text/javascript" src="../../Scripts/custom.js"></script>
<meta name="viewport" content="width=device-width" />
</head>

It seems to work here in latest version of Chrome: jsfiddle.net/FranWahl/xJNHD Are you sure you got the required jQuery files referenced? — Nope
– Nope, Commented Jun 29, 2012 at 21:19
Had the wrong link posted, sorry. As a side-note,do not use live() but on() instead if using jQuery 1.7. If you using jQuery 1.6.x or less use delegate() instead. Live has a lot of drawbacks, see here for more details: stackoverflow.com/a/11148053/448144 — Nope
– Nope, Commented Jun 29, 2012 at 21:22
Yes, as I mention when i remove these two events from my js file, all jquery plugins, ajax calls are working without problems. — emre nevayeshirazi
– emre nevayeshirazi, Commented Jun 29, 2012 at 21:22
How do you load your partial? From directly the main view e.g with @Html.Partial(... or with AJAX? — nemesv
– nemesv, Commented Jun 29, 2012 at 21:25

emre nevayeshirazi · Accepted Answer · 2012-06-29 21:27:57Z

1

I just found the problem.

<script type="text/javascript" src="../../Scripts/plugins/spinner/ui.spinner.js"></script>

When I remove this line from my <head>, the dialog started to work. This file does exists by the way. However, I have no idea why this is happened.

answered Jun 29, 2012 at 21:27

emre nevayeshirazi

19.3k12 gold badges67 silver badges82 bronze badges

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

1 Comment

Nope Over a year ago

Are you wrapping your script in a $(document).ready(function(){ //your script in here...}); ? If not, add the reference back in and wrap your script inside the document ready function and try it again and see if it makes a difference.

Collectives™ on Stack Overflow

JQuery UI Dialog - Uncaught TypeError: Cannot call method 'getTitleId' of undefined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related