Problem:

The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.

Code:

Includes:

<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autoplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>

Css:

<link rel="stylesheet" type="text/css" href="css/jquery.ui.autoplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />

Buttons: <a class="phoneadder">Stuff</a>

Scripts:

<script>
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true
        }
    );
        $( ".phoneadder" ).click(function() {
            $( "#dialog-form" ).dialog( "open" );
            return false;
        });
    </script>

Dialog:

<div id="dialog-form" title="Create new phone">
    <p>All form fields are required.</p>

    <form>
    <fieldset>
        ...some html here
    </fieldset>
    </form>
</div>

Problem:

The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.

Code:

Includes:

<script src="js/jquery-1.5.1.min.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.autoplete.js"></script>
<script src="js/ui/jquery.ui.dialog.js"></script>

Css:

<link rel="stylesheet" type="text/css" href="css/jquery.ui.autoplete.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
<link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" />

Buttons: <a class="phoneadder">Stuff</a>

Scripts:

<script>
        $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true
        }
    );
        $( ".phoneadder" ).click(function() {
            $( "#dialog-form" ).dialog( "open" );
            return false;
        });
    </script>

Dialog:

<div id="dialog-form" title="Create new phone">
    <p>All form fields are required.</p>

    <form>
    <fieldset>
        ...some html here
    </fieldset>
    </form>
</div>

• javascript
• jquery
• html
• jquery-ui
• jquery-ui-dialog

• are you sure you pasted the css ? or it was just an error here ? – Mihai Iorga Commented Aug 15, 2011 at 9:01
• You have a few missing characters in your stylesheet includes there - I suppose this was just missed by the c&p? – pyvi Commented Aug 15, 2011 at 9:01
• they vanished when I put them in, but you get the idea. – Sean Commented Aug 15, 2011 at 9:33

4 Answers 4

Place the initializer in your document.ready, or as shorthand:

$(function() { $("#dialog-form").dialog(autoOpen... ); } );

Alternatively, make sure your scripts are run after the div is created, so like, in the footer.

Try putting your jQuery code in the $(document).ready function like this:

$(document).ready(function () { 
/// your code here

});

Try this,

  $(function()
  {
    $( ".phoneadder" ).click(function() {
       $( "#dialog-form" ).dialog({
        height: xxx,
        width: xxx,
        modal: true
       });
       return false;
    });
  });

Why don't you just put the dialog function in the click event handler?

<script>
      $(function()
      {
        $( ".phoneadder" ).click(function() {
           $( "#dialog-form" ).dialog({
            height: 300,
            width: 350,
            modal: true
           });

           return false;
        });
      });
</script>