The problem is here i can’t add datepick(); functionality to newly created items.
Everythig works fine except that.
The first elements which named as date1 and datep1 are has datepick and works so good.
I got the plugin there: http://keith-wood.name/datepick.html What is wrong?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/humanity.datepick.css" />
<script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick.js"></script>
<script type="text/javascript" src="../../../includes/my_app/js/datepick/jquery.datepick-tr.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../../../includes/my_app/js/datepick/ui-ui-lightness.datepick.css" />
<script>
$(function() {
$('#date1').datepick({
dateFormat: 'yyyy-mm-dd',
yearRange: '1800:2053'
});
});
$(function() {
$('#datep1').datepick({
dateFormat: 'yyyy-mm-dd',
yearRange: '1800:2053'
});
});
</script>
</head>
<body>
<form name="stad_alt" id="myForm">
<h1></h1>
<div id="first">
Please Select:
<select name="myoption">
<option value="1">First Option</option>
</select><br /><br /></div>
<div id="container">
<div id="input1" style="margin-bottom:4px;" class="alternate">
Name 1: <input type="text" name="the_name1" id="name1" class="textbox" />
From :<input type="text" id="date1" name="from1" class="textbox" />
To :<input type="text" id="datep1" name="to1" class="textbox" />
Photo: <input type="file" id="photo1" name="photo1" class="textbox" />
</div>
</div>
<div>
<input type="button" id="add" value="Add New" />
<input type="button" id="delete" value="Delete This" />
</div>
</form>
<script type="text/javascript">
$(function(){
var num = 1; //default 1
if (num == 1)
$('#delete').prop('disabled','disabled');
$('#add').live('click',function(e) {
e.preventDefault();
num = num+1;
$('#delete').prop('disabled','');
$('#date' + num).datepick({
dateFormat: 'yyyy-mm-dd',
yearRange: '1800:2053'
});
$('#datep' + num).datepick({
dateFormat: 'yyyy-mm-dd',
yearRange: '1800:2053'
});
var html = '<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">Name '+num+': <input type="text" name="the_name'+num+'" id="name'+num+'" class="textbox" /> From :<input type="text" id="date'+num+'" name="from'+num+'" class="textbox" /> To :<input type="text" id="datep'+num+'" name="to'+num+'" class="textbox" /> Photo: <input type="file" id="photo'+num+'" name="photo'+num+'" class="textbox" /></div>';
$('#container').append('<div id="input'+num+'" style="margin-bottom:4px;" class="alternate">'+html+'</div>');
if (num == 10)
$('#add').prop('disabled','disabled');
});
$('#delete').click(function() {
$('#input' + num).remove();
num = num -1;
if (num == 1)
$('#delete').prop('disabled','disabled');
$('#add').prop('disabled','');
});
});
</script>
</body>
</html>
You’ve got a lot of structural problems there, making the document a mess; this makes troubleshooting more difficult.
First things first, get rid of those numerous
$(function() {blocks – condense your javascript into one block, at the bottom of the page. CSS in the head, javascript includes at the very end of the body, followed by page script.Your immediate problem is called because when you do this:
… putting aside the messy long HTML string (use DOM objects to add content to the page), the problem here is that you are calling the
datepickmethod on an element that does not yet exist on the page. The big line of HTML creation should go BEFORE you try to interact with it. Thus:Now some homework:
document.createElement – Use this instead of big messy HTML strings
Script position – The article is related to performance, but being organized will help YOUR performance as a developer
Divitis – You’ve got DIVs coming out the wazoo and this is a pretty short page. Take better advantage of CSS
Avoid inline styles – You’ve got stylesheets attached… use em!
Use Jquery’s document.ready – those
$(function() {things… yuck!