25

I want to create a jQuery dialog on-the-fly. I'm using this:

var newDiv = $(document.createElement('div')); 
$(newDiv).html('hello there');
$(newDiv).dialog();

I then have this in the html header:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

When I try running the JS in IE7 I get the following error on the $(newDiv).dialog(); line : Object doesn't support this property or method.

Anyone know what's going on?

DEH
  • 1,647
  • 3
  • 25
  • 45

3 Answers3

63

Your code works, you can test it here, that means you probably have a script include problem, make sure that your files are under a js folder beside the page, or if you intended them to be from site root, use /js instead.

Or, consider using a CDN.

You can make your code a bit more efficient (I realize it's just a test), like this:

var newDiv = $(document.createElement('div')); 
newDiv.html('hello there');
newDiv.dialog();

This works because newDiv is already a jQuery element, no reason to clone the object each time...or a bit shorter:

$('<div />').html('hello there').dialog();
Community
  • 1
  • 1
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • I do already have a js folder under the root which contains jquery-1.4.2.min.js and jquery-ui-1.8.1.custom.min.js. I also have some other jQuery stuff (Tabs) which are working fine. Doesn't this mean that my jQuery references are ok? The code gets called via an onclick event for a button. – DEH Aug 06 '10 at 12:58
  • I replaced my js references with the following: and it all started working. Do I need some additional .js files in my js folder, even though they're not directly references via a script tag? – DEH Aug 06 '10 at 13:04
  • @DEH - Nope that's it if what you're using is all jQuery and jQuery UI, everything is in those 2 files as far as the script goes. You may also want to include the CSS for jQuery UI the same way. Take a look at this question for those URLs: http://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere just replace the `1.7.0` in the URL of whatever theme you want to use with `1.8` (to match your jQuery UI script version), for example: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css – Nick Craver Aug 06 '10 at 13:12
  • Just to confirm, my js/jquery-ui-1.8.1.custom.min.js file was a custom js download that did NOT include the jQuery Dialog stuff. Once I had created a new download containing the Dialog elements then it all worked with my own internal .js references. – DEH Aug 10 '10 at 16:56
23

Here is an alternative way of creating dialogs and their messages dynamically:

     $('<div></div>').dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = 'Hello World';
          $(this).html(markup);
        },
        buttons: {
          Ok: function() {
            $( this ).dialog( "close" );
          }
        }
      });  //end confirm dialog

See it in action: http://jsfiddle.net/DYbwb/

2Yootz
  • 3,971
  • 1
  • 36
  • 31
  • 1
    I have added a line after close function to ensure that the newly created div was deleted when the dialog was closed see http://jsfiddle.net/DYbwb/597/ – KMX Aug 19 '15 at 10:20
  • Wow, this should have been the user's Accepted answer. Excellent detail, the jsfiddle was much appreciated. – mike Apr 06 '18 at 21:52
  • 1
    KMX - rather than add a button, I took your suggestion and altered the close function (otherwise it only gets deleted when you click the button, not when you use the X to close) - Thanks for the starting point, it is much much easier to tweak someone else's answer than write it from scratch! – iheggie Jun 15 '18 at 09:47
0

The code is good, what you need is a reference of jquery and jquery ui

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Leon
  • 139
  • 1
  • 5