jQuery + Simple Dialog

Question

I have a jQuery Model windows which contains a form.

On creating of the page, I'm able to see the fields although in my dialog, i have set autoOpen to false.

All the forms are in a div.

a sample of my dialog looks like this:

$("#dialog-form").dialog({
                autoOpen: false,
                height: 460,
                width: 750,
                modal: true,
                buttons: {
                    'Create Map': function() {
                        document.registerFrm.submit();
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                },
                close: function() {
                    allFields.val('').removeClass('ui-state-error');
                }
            });

Any way to resolve, I don't want the form fields to be visible on load/creation of the page.

Answer 1

You need to hide it initially vis CSS, like this:

#dialog-form { display: none; }

The opening of the dialog will cause it to display...this is what the authors of the dialog widget expect you to do :)

Alternatively, hide the div containing all the forms...whatever you don't want hidden just display:none on that wrapper, the dialog will grab and show that or whatever's in it and show it accordingly (just don't do the display on every child, only the wrapper), like this:

<div style="display: none;">
  <div id="dialog-form">fields here</div>
  <div id="dialog-form2">fields here</div>
</div>

Or just this:

<div id="dialog-form" style="display: none;">
  fields here
</div>