JQuery Dialog - the object does not support this property or method

Question

My code worked fine until I upgraded to a new version of jQuery. Now I get the error above.

 <link rel="stylesheet" type="text/css" href="site.css" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />   
     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>    
    <script type="text/javascript" src="js/ddsmoothmenu.js"></script>

    <script type="text/javascript">    
         $(document).ready(function(){     
                $('#dialog').dialog({
                    modal: true,
                    autoOpen: false,
                    width: 760,
                    height: 'auto',             
                    close: function(event, data) {
                        $('#mainFrame')[0].src = "LoadingPage.aspx";
                    }
                });
                $('a[name="dia"]').click(function(){
                    $('#mainFrame')[0].src = this.file;
                    $('#dialog').data('title.dialog', this.innerText); 
//                    $('#dialog').data('width.dialog', this.diaWidth); 
//                    $('#dialog').data('height.dialog', this.diaHeight); 
                    $('#dialog').dialog('open');
                    return false;
                });             

                if (document.getElementById('hidIsAdmin').value == "1"){
                    document.getElementById('liAdmin').style.display = 'block';
                    document.getElementById('liReports').style.display = 'block';
                }else {
                    $('#liAdmin').remove();
                    $('#liReports').remove();

                }
                if (document.getElementById('hidCreate').value == "1"){
                    document.getElementById('liCreate').style.display = 'block';
                }else {
                    $('#liCreate').remove();
                    $('.edit_icon_link').hide(0);                   
                }
            });
            function hideEditIcon(){
                $('.edit_icon_link').hide(0);                   
            }            
    </script>

Answer 1

I had something similar (converting MVC3 ASP to Razor) and in my case my link jquery-1.4.4.min.jsto my main page helped me .

I say "helped" because it is now open work, but it $(this).dialog("close");does not work.

function ShowPopUp(strDivName)
{
    $("div[id$='" + strDivName + "']").dialog(
        {
            title: "blah blah blah",
            width: 600,
            modal: true,
            resizable: true,
            closeOnEscape: false,
            buttons:
            {
                "Save": function () { SaveThis(); $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        }
    );
    $("div[id$='" + strDivName + "']").dialog("open");
}

Answer 2

Check the options available for dialogue, I think autoResize has been renamed to resize.

Answer 3

, $(document).ready(function(){?

});, , $('#dialog').dialog({, $(document).ready(function(){.

Answer 4

I ran into this problem with IE8 because I was on an HTTPS page but downloaded the jquery-ui package from the HTTP CDN. As soon as I changed the URL from

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

to

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

he started to work.

Answer 5

Now I am using MVC4. So I had to add jquery-ui-1.8.20.js to BundleConfig.RegisterBundles()in App_Start to make it work:

bundles.Add( new ScriptBundle( "~/bundles/jquery" ).Include(
  "~/Scripts/jquery-{version}.js",
  "~/Scripts/jquery-ui-1.8.20.js" ) );