CODEWITHSUNDEEP
jquery
Edward
Edward

Reputation: 1914

jQuery dialog not working as expected

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!

Upvotes: 1

Views: 2516

Answers (2)

Palpatim
Palpatim

Reputation: 9272

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>

Upvotes: 2

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

Change 

$('#open').click(function() {
                $('#login_form').dialog('open');
                return false;
            });

To

$('#open').click(function() {
                    $('#login').dialog('open');
                    return false;
                });

As your dialog div's id is login not login_form.

Working Fiddle

Upvotes: 1

Related Questions