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?

Improve this question

3 Answers 3

Reset to default
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();
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
I replaced my js references with the following: <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/…> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jqueryui/1.8/…> 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 - 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: stackoverflow.com/questions/1348559/… 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: ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/…
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.
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/

Improve this answer

3 Comments

I have added a line after close function to ensure that the newly created div was deleted when the dialog was closed see jsfiddle.net/DYbwb/597
Wow, this should have been the user's Accepted answer. Excellent detail, the jsfiddle was much appreciated.
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!
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>

Improve this answer

Comments

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.