I am not sure what the problem is, so I am unsure what to google!
What I am trying to do is. Inside a form tag, I have a div. This div's contents are a button titled "change date" that calls a javascript function that changes the innerhtml to that of a javascript date dropdown/selecter/calendar. As well as a button thats titled "Save new date" that calls another function that switches a current date to the new date.
The problem is, that calendar doesn't work when I insert it with javascript. You can see what I am talking about with the following.
The source code looks like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
@import "caltest2/jquery.datepick.css";
</style>
<script type="text/javascript" src="caltest2/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDatepicker_cur_date').datepick({
onSelect: function() { $('#calendar').submit(); }
});
});
function change_date() {
document.getElementById("output").innerHTML='<input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" />';
}
</script>
</head>
<body>
<form>
This one works!<br />
<input id="popupDatepicker_cur_date" name="popupDatepicker_cur_date" value="" />
</form>
<br /><br />
<form>
Clicking this button, uses Javascript, and innerHTML to set the divs contents to the same line of code used above.<br />
This time, it doesn't work?<br />
<input type="button" onclick="change_date();" value="change" />
<div name="output" id="output"></div>
</form>
</body>
</html>
You can see this code live at:
http://www.marcomtec...com/test_j.html
Can anyone point me in the direction as to whats going wrong? The console doesn't say anything and I can't think of any solution to this problem!
Thanks in advance!
Nick
