1 Replies - 1281 Views - Last Post: 11 June 2010 - 10:28 AM

#1 samuraitux  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 9
  • View blog
  • Posts: 65
  • Joined: 29-April 09

Jquery Datepicker issue when using .html

Posted 10 June 2010 - 12:56 PM

Hey guys and I getting this weird error where the datepicker will not work when I use the .html() to create a form.

here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
        <link type="text/css" href="js/themes/smoothness/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />        
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/ui/jquery-ui-1.8.2.custom.js"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                        $('#overview').click(function() {
                                $('#Content').html("").html('<p>You clicked Overview Report</p>');
                        });
                        
                        $('#daily').click(function() {
                                $('#Content').html("").html('<p>Start Date: <input type="text" name="startDatepicker" id="startDatepicker" size="30" /></p>');
                        });
                
                });

                $(function() {
                        $("#startDatepicker").datepicker();
                        $( "#startDatepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
                        $("#format").change(function() { $('#startDatepicker').datepicker(); });
                });

                $(function() {
                        $("#endDatepicker").datepicker();
                        $( "#endDatepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
                        $("#format").change(function() { $('#endDatepicker').datepicker(); });
                });

        </script>
        <title>Registration Report Form</title>
</head>
<body>
        <ul>
                <li><button type="button" id="overview">Overview Report</button></li>
                <li><button type="button" id="daily">Daily Totals</button></li>
                <li><button type="button" id="time">Attendance Report</button></li>
        </ul>
        <div id="Content">
                <p>Click on a button above to load the specified report.</p>
        </div>

</body>
</html>



now if I take out the <p>Start Date: <input type="text" name="startDatepicker" id="startDatepicker" size="30" /></p> and place it directly under the div it pops up the calendar just fine.

Not sure where to begin troubleshooting this any help would be appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Jquery Datepicker issue when using .html

#2 Wimpy  Icon User is offline

  • R.I.P. ( Really Intelligent Person, right? )
  • member icon

Reputation: 159
  • View blog
  • Posts: 1,038
  • Joined: 02-May 09

Re: Jquery Datepicker issue when using .html

Posted 11 June 2010 - 10:28 AM

The problem you are experiencing is caused by the fact that the date picker element is not created until you click a button whilst you try to initialize the element with the date picker plug-in at page load. The element does not exist yet and therefore it will not work... What you can do is to initialize the date picker on creation or create the element emediately and simply hide it until it is required. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1