0

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>
4
  • It seems to work here in latest version of Chrome: jsfiddle.net/FranWahl/xJNHD Are you sure you got the required jQuery files referenced? Commented Jun 29, 2012 at 21:19
  • 1
    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 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. 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? Commented Jun 29, 2012 at 21:25

1 Answer 1

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.

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

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.