Home/ Questions/Q 8152465
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T15:43:24+00:00

It might be a stupid problem, but I am very new to jQuery. I

  • 0

It might be a stupid problem, but I am very new to jQuery. I am trying to create a button that on-click will pop-up a login dialog. Somehow the form is shown instead of being created as a dialog. Below is my code:

<head>
    <script src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script>
        $(function() {   
            $('#login').dialog({
                    autoOpen: false,
                    title: 'Login',
                    height: 300,
                    width: 350,
                    modal: true
            });

            $('#open').click(function() {
                $('#login_form').dialog('open');
                return false;
            });
        });
    </script>        
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="login">
        <form class="caption" action="Login.php" method="post">           

        <p>E-mail: <br><input type="text" name="email" maxlength="255" /></p>
        <p>Password:</p> <br><input type="password" name="pwd" /></p>
        <p><input type="submit" value="Login" /></p>

        </form>

    </div>
    <button id="open">Click</button>
</body>

Any idea what I have done wrong? Thank you very much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alex W had it above:

    From https://developers.google.com/speed/libraries/devguide#jqueryUI

    note: This library depends on jquery. You must also load jquery before
    loading this module.

    In addition, you’re trying to open the #login_form element, rather than the #login element. You need to use the same jQuery set. See the modified code below.

    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>
        $(function() {   
            $('#login').dialog({
                    autoOpen: false,
                    title: 'Login',
                    height: 300,
                    width: 350,
                    modal: true
            });

            $('#open').click(function() {
                $('#login').dialog('open');
                return false;
            });
        });
    </script>        
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="login">
        <form class="caption" action="Login.php" method="post">           

        <p>E-mail: <br><input type="text" name="email" maxlength="255" /></p>
        <p>Password:</p> <br><input type="password" name="pwd" /></p>
        <p><input type="submit" value="Login" /></p>

        </form>

    </div>
    <button id="open">Click</button>
</body>
    • 0