Ticket #4731: autofocusexample.htm

File autofocusexample.htm, 2.1 KB (added by Chris Becker, 10 years ago)

Example of problem

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5    <title>Example</title>
6    <link href="style/style.css" rel="stylesheet" type="text/css" />
7    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
8    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
9    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
10    <style type="text/css">
11        .promoteDp {z-index:1005}
12    </style>
13</head>
14<body>
15        <div align="center" style="margin-top:1em"><a id="lnkOpen" href="#">Open dialog</a></div>
16       
17        <div id="divOpenDialog" style="display:none" title="Example">
18            <table>
19                <tr>
20                    <th align="right">Start Date</th>
21                    <td>
22                        <input type="text" name="startDate" id="startDate" class="datepicker" />
23                    </td>
24                </tr>
25                <tr>
26                    <th align="right">End date</th>
27                    <td>
28                        <input type="text" name="endDate" id="endDate" class="datepicker" />
29                    </td>
30                </tr>
31            </table>
32           
33            <div align="center" style="margin-top:1em">
34                <button>Submit</button>
35            </div>
36        </div>
37    </div>
38   
39    <script type="text/javascript">
40        $(document).ready(function() {
41            var dlg = $('#divOpenDialog');
42            dlg.dialog({ autoOpen: false, modal: true, width: 400, draggable: false, resizable: false });
43            $('.datepicker').datepicker({ duration: '' });
44            $("#ui-datepicker-div").addClass("promoteDp"); 
45            $('#lnkOpen').click(function() { dlg.dialog('open'); return false; });
46            dlg.parent().appendTo(jQuery("form:first"));
47        });
48    </script>
49</body>
50</html>