Jquery Dialog - Object doesn't support this property or Method

Question

My this code was working fine until I upgraded to Jquery newer version. Now I get above error.

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

Is the jQuery UI version you're using compatible with the jQuery version? You might need to download a newer version. — Marko
– Marko, Commented Mar 3, 2011 at 13:43
I changed jquery-1.3.2.min.js to jquery-1.4.4.min.js And jquery-ui-1.7.1.custom.min.js to jquery-ui-1.8.10.custom.min.js and Css jquery-ui-1.7.1.custom.css to jquery-ui-1.8.10.custom.css. That's all. It worked fine with previous version. — user643062
– user643062, Commented Mar 3, 2011 at 13:53
Make sure the files are really loaded using HttpWatch for example. — user447356
– user447356, Commented Mar 3, 2011 at 14:03
This is how it was before with old file names and now with new file names. <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> — user643062
– user643062, Commented Mar 3, 2011 at 14:08

Sachin Chavan · Accepted Answer · 2012-11-24 06:44:23Z

3

I had something similar happen (converting MVC3 ASP to Razor), and in my case, moving my jquery-1.4.4.min.js reference to my master page helped.

I say "helped" because now the open works, but the $(this).dialog("close"); doesn't.

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");
}

edited Nov 24, 2012 at 6:44

Sachin Chavan

5,6205 gold badges52 silver badges77 bronze badges

answered Apr 20, 2011 at 16:44

James in Indy

312 bronze badges

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

Comments

DGM · Accepted Answer · 2011-03-03 13:58:17Z

0

Check the options available for dialog, I think autoResize has been renamed to resizable.

answered Mar 3, 2011 at 13:58

DGM

27.1k7 gold badges65 silver badges82 bronze badges

2 Comments

user447356 Over a year ago

But it won't generate "object doesn't support.." error.. or can it? :/

Mike C Over a year ago

{ resizable : true } allows users to drag the edges of the dialog to resize it. AutoResize appears to be something else, although I don't see it in the documentation.

Mike C · Accepted Answer · 2011-03-03 14:12:53Z

0

Is it possible that you are not closing your $(document).ready(function(){ ?

The }); you are showing above closes the $('#dialog').dialog({ but I don't see a close of the $(document).ready(function(){ .

answered Mar 3, 2011 at 14:12

Mike C

3,11725 silver badges31 bronze badges

6 Comments

user643062 Over a year ago

$(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').dialog('open'); return false; });

user643062 Over a year ago

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); }

user643062 Over a year ago

}); function hideEditIcon(){ $('.edit_icon_link').hide(0); }

user447356 Over a year ago

@user643062 please edit your question and add the code there, putting whole code in comments is not really readable.

user643062 Over a year ago

Shadow Wizard - done, please let me know if you need any other info. Everything was working fine and still the same code works fine if just replace following 3 lines with old versions. <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" /> <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>

|

Christopher Johnson · Accepted Answer · 2012-02-10 20:48:08Z

0

I ran into this problem with IE8 because I was on a HTTPS page but loading jquery-ui package from a 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

it started working.

answered Feb 10, 2012 at 20:48

Christopher Johnson

6957 silver badges13 bronze badges

Comments

TheHolyTerrah · Accepted Answer · 2013-04-02 13:37:31Z

0

I'm now using MVC4. So I had to add jquery-ui-1.8.20.js to the BundleConfig.RegisterBundles() under App_Start to get it to work:

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

answered Apr 2, 2013 at 13:37

TheHolyTerrah

2,8793 gold badges44 silver badges50 bronze badges

Collectives™ on Stack Overflow

Jquery Dialog - Object doesn't support this property or Method

5 Answers 5

Comments

2 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related