jQuery dialog with dynamic content

Question

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?

Answer 1

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