Home/ Questions/Q 7781497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:14:45+00:00

Hi iam using this code here http://jsfiddle.net/bryanjamesross/pyNJ9/ I segregated the whole code in one

  • 0

Hi iam using this code here http://jsfiddle.net/bryanjamesross/pyNJ9/ I segregated the whole code in one page..means like the javascript under this tags

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
</script>

and the css code under 

<script type="text/css"> 
 </script>

and used html code in html tags..but i am getting the textboxes also instead of single login href link.

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$('a.loginlink').click(function(e) {
    $('#loginform').dialog('open');
    e.preventDefault();
    return false;
});

$('#loginform').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    draggable: false
});
</script>
</head>
<body>
<a href="mytest.html" class="loginlink">Log In</a>

<div id="loginform">
    <form action="/login" method="post">
        <table>
            <tr>
                <td>User Name:</td>
                <td>
                    <input name="username" type="text" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input name="password" type="password" />
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center;">
                    <input type="submit" value="Login" />
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to include jQuery UI as well.

    The files the jsfiddle, you posted, uses are CDN hosted script and CDN hosted stylesheet

    so change your code to 

    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
</script>

    and add in the head of your page

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css" />

    UPDATE

    Important You need to wrap the code in $(function(){ ... }) so that it runs after the DOM is loaded.

    $(function(){
    $('a.loginlink').click(function(e) {
        $('#loginform').dialog('open');
        e.preventDefault();
        return false;
    });

    $('#loginform').dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false
    });
});

    and to be sure that your jquery version is compatible with jquery UI version use

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    instead of 

    <script type="text/javascript" src="jquery.js"></script>

    Full code at http://jsfiddle.net/gaby/k6KjS/

    • 0