asked on
datepicker for dynamic form elements
hi i am using datepicker which works fine if there is one date field.
I am generating dynamic date fields using jquery. But datepicker does not work on those dynamic fields.
Does anyone have a tutorial/example that shows how datepicker is used with dynamic form elements?
I am generating dynamic date fields using jquery. But datepicker does not work on those dynamic fields.
Does anyone have a tutorial/example that shows how datepicker is used with dynamic form elements?
AJAX
Last Comment
genius_geek
ASKER
its not working. i tried that.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple cloning demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.error{
border: 2px solid red;
background-color: #FFFFD5;
margin: 0px;
color: red;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script type="text/javascript">
var current= 1;
$(function() {
$( "#datepicker1" ).datepicker();
$( "#datepicker2" ).datepicker();
});
$(document).ready(function() {
$("#addeducation").click(function() {
current++;
/* GWF - Modified the line below */
$neweducation= $("#userTemplate").clone(true).removeAttr("id").attr("id", "fieldSet" + current).insertBefore("#userTemplate");
$neweducation.children("p").children("input").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("name",$currentElem.attr("name")+current);
$currentElem.attr("id",$currentElem.attr("id")+current);
});
var f = $("#fieldSet"+current);
f.html(f.html().replace("fieldSetID", "fieldSet"+current));
$neweducation.appendTo("#mainField");
$neweducation.removeClass("hideElement");
//add validation
$("#level"+current).rules("add", { required:true,minlength:2 });
$("#institution"+current).rules("add", { required:true,minlength:2 });
$("#board"+current).rules("add", { required:true,minlength:2 });
$("#division"+current).rules("add", { required:true,minlength:2 });
var prevvalue=$("#count").attr("value");
$("#count").attr("value",prevvalue+","+current);
});
$("#demoForm").validate({
errorPlacement: function(error, element) {
$(element).attr("class","error");
//error.insertAfter(element);
},
rules: {
level1: {
required: true,
minlength: 2
}
,institution1: {
required: true,
minlength: 2
}
,board1: {
required: true,
minlength:2
}
,division1: {
required: true,
minlength:2
}
}
});
});
/* GWF - Add function to remove education */
function removeeducation(id) {
$(id).remove();
var fieldid=id.replace("#fieldSet","");
var prev=$("#count").attr("value");
var finalids=prev.replace(","+fieldid,"");
$("#count").attr("value",finalids);
};
</script>
<style>
.hideElement {display:none;}
</style>
</head>
<body>
<div id="userTemplate" class="hideElement">
<p>
<input id="level" name="level" size="25" />
<input id="institution" name="institution" size="25" />
<input id="board" name="board" size="25" />
<input id="division" name="division" size="25"/>
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
</p>
</p>
<p>
<a href='#' onClick='removeeducation("#fieldSetID"); return false;'>Remove</a>
</p>
</div>
<form name="demoForm" id="demoForm" method="post" action="getvalues.php">
<fieldset id="mainField">
<div>
<table><tr><td width="170px" align="center">Level</td><td width="170px" align="center">Institution</td><td width="170px" align="center">Board</td><td width="170px" align="center">Division</td></tr></table>
<p>
<input id="level1" name="level1" size="25" />
<input id="institution1" name="institution1" size="25" />
<input id="board1" name="board1" size="25" />
<input id="division1" name="division1" size="25"/>
<div class="demo">
<p>Date: <input type="text" id="datepicker1"></p>
</div><!-- End demo -->
</p>
</div>
</fieldset>
<p>
<input type="button" id="addeducation" value="Add Another">
</p>
<input type="hidden" name="count" value="1" id="count"/>
<input type="submit" value="Save">
</form>
</body>
</html>
<< each time you create a new datepicker >> mean after creating the new datepickers NOT BEFORE! And use the right ID :)
ASKER
I dont understand what you are trying to say.
Before/after does it matter? they are within the script tag.
ID's are right - for the first field field id will be datepicker1 for susbsequent fields generated dynamically IDs will be datepickerNUMBER so that is datepicker2..datepicker3..
Before/after does it matter? they are within the script tag.
ID's are right - for the first field field id will be datepicker1 for susbsequent fields generated dynamically IDs will be datepickerNUMBER so that is datepicker2..datepicker3..
>I dont understand what you are trying to say.
>Before/after does it matter?
Yes it is ! This is you issue, run datepicker AFTER each dynamically generated input dedicated for your datepicker
>Before/after does it matter?
Yes it is ! This is you issue, run datepicker AFTER each dynamically generated input dedicated for your datepicker
ASKER
HOw?
where are you creating dynamically your datepicker, please give me the last line
hmmm... replace line 37 :
});
}); $("#datepicker" + current ).datepicker();
ASKER
replaced. but still does not work :-(
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
i found the solution before anyone answered it
Open in new window
each time you create a new datepicker