Solved

datepicker for dynamic form elements

Posted on 2012-03-11
11
409 Views
Last Modified: 2012-04-02
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?
0
Comment
Question by:genius_geek
  • 6
  • 5
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37708337
run
$( "#new_datepicker_ID" ).datepicker();

Open in new window

each time you create a new datepicker
0
 

Author Comment

by:genius_geek
ID: 37708341
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>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 37708350
<< each time you create a new datepicker >> mean after creating the new datepickers NOT BEFORE! And use the right ID :)
0
 

Author Comment

by:genius_geek
ID: 37708356
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...so on
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37708363
>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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:genius_geek
ID: 37708365
HOw?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37708370
where are you creating dynamically your datepicker, please give me the last line
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37708373
hmmm... replace line 37 :
    });

Open in new window

by :
    }); $("#datepicker" + current ).datepicker();

Open in new window

0
 

Author Comment

by:genius_geek
ID: 37708375
replaced. but still does not work :-(
0
 

Accepted Solution

by:
genius_geek earned 0 total points
ID: 37779768
put it after line 39. tried and tested. works.
0
 

Author Closing Comment

by:genius_geek
ID: 37795213
i found the solution before anyone answered it
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Consume Rest Post API from Jquery Ajax 8 32
asp.net repeater js datatable 6 80
Ajax control editor 4 63
Ajax Panel Not Updating When Triggered By Timer 4 44
There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…
Many functions in Excel can make decisions. The most simple of these is the IF function: it returns a value depending on whether a condition you describe is true or false. Once you get the hang of using the IF function, you will find it easier to us…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now