I'm constructing a page that contains a form of tabular data where the user is entering in multiple similar data items, one field of which is a date field that is using the datepicker component. I've placed the form inputs in a row with a fixed id and I've added a button to add a new empty row to the table to handle more inputs. I'm able to clone the DOM and update the inputs and such to post the data properly, but I'm running in to trouble binding the datepicker to the newly created DOM inputs. It looks like everything is being initialized correctly until I go and focus the element, and the process of activating the datepicker is producing a JS error in both Firefox 3.0 and IE6. In Firefox, I'm getting a "inst is undefined" error on ui.datepicker.js: 443, in IE6 it's being manifested as 'settings is null or not an object'. I've attached a fully working example page to reproduce the issue. Am I doing something wrong here or are things not being initialized properly? I've been using 1.6rc4 with jQuery 1.2.6.
Thanks for the assistance, Jason ----------- Example Below ---------------- <html> <head> <script type="text/javascript" src="http://jquery-ui.googlecode.com/ svn/trunk/jquery-1.2.6.js" ></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/ svn/trunk/ui/ui.core.js" ></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/ svn/trunk/ui/ui.datepicker.js" ></script> <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/trunk/ themes/base/ui.all.css" /> <script> function addHandlers(root) { if (root == null) root = $(document); root.find(".datepicker").datepicker({ showOn: 'focus', showButtonPanel: true }); } function addMyrowItem() { var row = $("#myrow"); var parent = row.parent(); var index = $(parent).children('tr').size(); var newRow = row.clone(true) newRow.find("[id^=myrow]").attr("id", function() { return $(this).attr("id").replace('0', index); }); newRow.find("[name^=myrow]").attr("value","").attr("name", function () { return $(this).attr("name").replace('0', index); }); newRow.appendTo(parent); addHandlers(newRow); } $(document).ready(function() { $("#add").click(addMyrowItem); addHandlers($(document)); }); </script> </head> <body> <h1>Clone test</h1> <table> <thead> <tr> <th>Date</th> <th>Description</th> </tr> </thead> <tbody> <tr id="myrow"> <td><input id="myrow0.date" name="myrow0.date" class="datepicker"/></td> <td><input id="myrow0.description" name="myrow0.description" /></td> </tr> </tbody> <tfoot> <tr> <td colspan="2"><button id="add">Add</button></td> </tr> </tfoot> </table> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@googlegroups.com To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
